React JS Stillendirme Olayları
Hepinize merhaba dostlarım 😊. Kısa bir ara sonrasında yeniden sizlerle beraberim 😅. Birazcık yoğunluklarımın olduğu döneme girdim ama bu benim blog yazmama engel değil dostlarım 😉. Neyse daha fazla çenem düşmeden konumuza girelim dostlarım.
Başlıktan da anlayacağınız üzere dostlarım bu makalemde sizlerle beraber "React JS Stillendirme İşlemi" konusuna bir göz atacağız. İsminden aşina olmuşsunuzdur yapacağımız işlemlere ama sizin aklınızda şu vardır dostlarım ben anlıyorum
Hocam normal bir HTML template üzerinde <link/> etiketleri ile işlemleri ayarlıyorduk. Burada da aslında index.html kısmına da bunu bu şekilde yapsak olmaz mı ?
dostlarım elbette olur. React JS üzerinde tema giydirme işlemi vs yapacaksanız zaten bu şekilde yapacaksınız çoğu şeyi. Ama size şunu söylemek istiyorum
Hadi diyelim yaptınız. Bazı sayfalarda kullanmayacağınız CSS kodlarını neden import etmek istiyorsunuz ?
olayın mantığını kavradınız dostlarım değil mi 😉. İşte her zaman bas geç yöntem olmaz dostlarım. Bazen belleği gereksiz kullanma durumu olur bu da best practice bir yöntem değildir 😊.
Bu kısma kadar anladıysanız olayı dostlarım ufaktan kodlama işlemine girelim. Tabii bunu 2 başlık altında ayrı ayrı kodlayacağız 😊. O halde sözü daha fazla uzatmayalım operasyona başlayalım 😊.
1-) Inline CSS
Eveeet geldik dostlarım React JS üzerindeki stillendirme kurallarının en temeli olan Inline CSS olayına. Dostlarım aslında hepinizi inline css kavramının ne demek olduğunu açık bir şekilde biliyorsunuz ben seziyorum. Bilmeyen dostlarım için de anlatayım kısaca. Bizim elementimizin içerisine uzun uzun yazdığımız css kodlarına verdiğimiz isimdir kendisi. Kısaca örnek verecek olursam dostlarım
<p style="color: blue;">MFSoftware Blog</p>şeklinde bir kodlama örnek verilebilir dostlarım 😊. Şimdi gelin bunu React JS üzerinde nasıl bir şekilde ayarlayabiliriz hızlıca ona bir değinelim
Öncelikle proje ortamını kuralım dostlarım. Harici bir component oluşturmaya gerek yok. App.js içerisindeki html kodlarından <div> tagleri içeriğini silelim hızlıca. Yani aşağıdaki gibi olsun kodlarımız
function App() {
return (
<div>
</div>
);
}
export default App;şeklinde bir yapıyı oluşturduk dostlarım. Gelin şimdi inline css kodlarımızı bir <p></p> tagleri oluşturup bunun üzerinde uygulayalım
function App() {
const inlineCss = { // inline css kodlarımız
backgroundColor : "blue",
color : "white",
padding : 5,
margin : 10
}
return (
<div>
<p style={inlineCss}>MFSoftware Blog Inline</p>
</div>
);
}
export default App;
şeklinde kodlarımızı yazdık. Ekran çıktısına baktığımızda ise karşımıza gelecek olan çıktı
şeklinde olacaktır dostlarım. Şimdi bu kısma kadar tamam isek dostlarım gelelim bir diğer konu başlığımıza 😊
2-) External CSS
Eveeet artık external css kavramını da öğrenmeden yolumuza devam edemeyiz dostlarım. Hem HTML ile geliştirme yaparken hem de React JS üzerinde büyük önem arz eden bu yapıyı yine bir önceki başlık altında belirttiğim gibi burada da kısaca açıklamak istiyorum 😊.
Dostlarım external css bizim projemiz üzerindeki css kodlarının ayrı bir dosyada tutulduğu ve bunun kullanılacak sayfaya import edilme olayı olarak açıklayabilirim. Yani karmaşık şekilde kodlama olayından büyük ölçüde kurtarır sizi dostlarım 😉. Şimdi gelelim bir tane css dosyası oluşturalım
Ama bunu src klasörümüz içinde css isminde bir klasör oluşturup onun içinde saklayalım ki siz bu noktada şunu diyorsunuzdur
Hocam iyi güzel hoş da neden src klasörü içerisinde oluşturduk ?. Index içinde oluştursaydık ya ?
Dediğiniz şekilde de olur dostlarım lakin ben size bu componenti oluşturup belirli sayfalarda nasıl bir şekilde import etmeyi göstereceğim 😊.
Ayrıca src klasörünün içinde yapmamızın sebebi projemizi build alırken bunların hepsini yani src içindeki yapıları da toparlama ve dahil etme olayında da herhangi bir sıkıntı yaşamamak adına yapılan bir durumdur dostlarım 😉.
O halde sözü daha fazla uzatmadan gelelim kodlama işlemlerimize dostlarım 😊. Öncelikle bahsettiğim css dosyasını oluşturalım hızlıca
span{
background-color: #61dafb;
position: relative;
margin-left: 20px;
margin-top: 20px;
}şeklinde kodlarımızı oluşturduk dostlarım. Bu kısmı yaptıktan sonra geriye kalan tek işlemimiz import işlemidir dostlarım. Hemen hızlıca onu da gerçekleştirelim
import './css/External.css'; // import ettik
function App() {
const inlineCss = {
backgroundColor : "blue",
color : "white",
padding : 5,
margin : 10
}
return (
<div>
<p style={inlineCss}>MFSoftware Blog Inline</p>
<hr/>
<span>Seyyar Yazılımcı</span>
</div>
);
}
export default App;şeklinde kodlarımızı düzenledikten sonra karşımıza gelecek olan sonuç
şeklinde olacaktır dostlarım. Bütün işlemlerimiz bu kadar 😊. Biraz karmaşık gelebilir ama anlaşılır dostlarım.
Eveeeet dostlarım bu yazımda sizlere elimden geldiğince dilim döndüğünce React JS Stillendirme Olayları konusundan elimden geldiğince dilim döndüğünce bahsettim. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık gelebilir. Hani her ne kadar da her yazımda basit dememin yanısıra karmaşık olan yanları illa ki vardır yeni öğrenen dostlarım için. Aynı yollardan geçtiğim için biliyorum anlıyorum 😊. Bu aşamada yapmanızı istediğim tek şey her yazımda da dediğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız 😊". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır.
Yazar Hakkında
Kendi Halinde Bir Backend Developer