React JS Proje Yapısı
Hepinize merhaba dostlarım 😊. Birkaç gün aradan sonra tekrardan karşınızdayım. Evet yine React JS kategorisinde makale yazıyorum 😅. Başlığı okuduktan sonra aklınıza şunlar gelmiştir dostlarım ben öyle seziyorum
Biz bir önceki yazımızda React JS kurulumunu gerçekleştirmiştik. Oradaki dosya yapısını anlatacaksınız heralde hocam 😊
Aynen öyle dostlarım 😅. Proje klasörümüz içerisinde hangi dosya neden var, ne işe yarar vs. gibi dosyaları anlatacağım 😊. Eğer proje yapınız yoksa dostlarım bir önceki yazımdan yardım alarak proje ortamınızı kurabilirsiniz.
Şu an proje ortamınız kurulu olarak varsayıyorum ve konuyu anlatmaya başlıyorum 😊
şeklinde proje klasörümüzü açtık dostlarım. İçerisindeki dosyalar tam da bu şekilde bize sunulacaktır dostlarım (eğer en güncel olarak kurduysanız). Şimdi gelelim hangi dosya ne işe yarıyor onlara bir bakalım
1-) Node Modules
Eveeeet dostlarım node modules klasöründen başlayalım dostlarım. Bunu özellikle laravel veya node js geliştirme yapmışsanız dostlarım zaten görmüşsünüzdür. İlk defa gören dostlarım için de konuyu açıklayayım (react js üzerinde de aynı relax olun 😊):
Dostlarım bu node modules klasörü bizim npm ile proje içerisine yüklediğimiz paketlerin tutulduğu klasörümüzdür. İçerisine girip de kod yazmıyoruz. Sadece bizim paketlerimiz burada tutuluyor 😉
şeklinde teoriden uzak bir anlatım yaparak durumu özetleyebilirim dostlarım. Buraya kadar tamam isek dostlarım diğer kısma değinmek istiyorum
2-) Public
İsminden de anlayacağınız üzere (erişilebilir) olarak bilinen bu klasörümüz içerisinde de bizim proje içerisinde kullanacağımız logo.png dosyaları, css dosyaları vb. dosyalarını tutacağımız yerdir.
Ekstra olarak da bizim index.html olarak bir dosya da var içerisinde. İleride daha derinlemesine anlatacağım konuya az biraz değinmek istiyorum:
Dostlarım bizim React JS projemiz tek bir html dosyası üzerinden dööndüğü/render edildiği için bu klasör içerisinde index.html mevcut. Bunu ileriki zamanlarda revize edeceğiz ama şu anlık inceleyin fakat çok da kurcalamayın derim 😀
şeklinde bu klasörü de açıkladım dostlarım. Gelelim bir diğer kısma
3-) .gitignore
Eğer ki projelerinizde GIT ile çalışıyorsanız dostlarım bu dosya size yabancı gelmemiştir. Bu dosya projenizi git üzerine push ederken "şu dosyalar gitmesin, kalsın!" gibi bir komut veren dosyamızdır. Örnek olarak içerisini incelemişseniz node_modules klasörü mevcuttur. Bu klasör paketleri kapsadığı için ve aynı zamanda boyutu da büyük olduğu için github üzerine göndermeniz pek tavsiye edilmez.
Bu durum size React JS kurulumunda bu şekilde sunulmuştur dostlarım. Dilerseniz projenizin durumuna göre örneğin resimlerle videolarla çalıştığınız bir projeniz varsa bu klasörü .gitignore dosyası içerisinde belirtmenizi tavsiye ederim dostlarım 😉.
4-) package.json ve package-lock.json
Bu dosyaları da çoğu proje yapısında çok rahat görmüşsünüzdür dostlarım 😊. Şimdi hepinizin aklında şu vardır
Hocam biz npm ile çalıştığımız için bu iki dosya var
tamam dediğiniz doğru dostlarım ama tam da o şekilde değil. Farklılıkları var bunların. Gelin şimdi buna bir değinelim 😊
Dostlarım şimdi package.json içerisinde bizim dosyamızın adı, versiyonu, oluşturan kişi bilgisi, proje içerisinde hangi paketlerin kullanıldığı bilgisi var. Bu dosyanın bulunma amacı bu. Şimdi kesin şunu diyorsunuzdur 😅
E hocam o zaman package-lock.json neden orada 😅
Bu dosya da bizim package.json üzerindeki bağımlılıkları kilitleme görevi olarak proje dosyamızda yer alıyor dostlarım. Farklı ortamlarda proje kurulumları vs yapacağımızda bu kurulumların tutarlı bir şekilde kurulumunu sağlamak da ekstra görevi oluyor dostlarım 😊.
Ekstra olarak şunu da açıklayayım dostlarım. Yukarıda şunu demiştim
.gitignore dosyası içerisinde node_modules dahil etmiştik. Haliyle github üzerine node_modules klasörü gitmez
Bizim package.json içerisinde de projede kullanılan paketlerimiz vs olduğu için node_modules klasörünü geri getirebilir. Bunun için yapması gereken şey proje dizini içerisinde terminal ekranını açıp
npm installkomutunu kullanarak paketleri dahil edebilir dostlarım 😊. Bu kısmı da anlattığımıza göre dostlarım gelelim bir diğer kısma
5-) README.md
Bunu ekstra olarak uzun uzun açıklamama gerek yok dostlarım. İsterseniz silebilirsiniz de tamamen size kalmış. Burada projenizi nasıl ayağa kaldıracağınızı, nasıl build alacağınızı anlatıyor 😊
6-) src
Eveeeeet projemizin en can alıcı klasörü tam da burası dostlarım. Bizim en çok haşırneşir olacağımız klasör tam da burası. Bütün componentlerimiz (ileride değineceğim dostlarım ama isterseniz google üzerinden araştırabilirsiniz şimdilik ekstra bir durum yok), Rotasyonlarımız bu klasör içerisinde olacaktır. Bu klasör yapısını da fotoğraf üzerinden anlatmak istiyorum.
şeklinde klasör içerisinde dosyalarımız mevcut dostlarım. Başlangıç olarak App.test.js reportWebVitals.js setupTest.js dosyaları test ile alakalı olduğu için bunları silebilirsiniz.
index.js sizin için derlenecek ilk dosyanızdır. Burada hangi component üzerinden projenizin döneceğini veya rotasyon yapısını ayarlayabilirsiniz.
Herhangi bir component için hangi css özelliklerini kullanmak istiyorsanız onları da bu klasör içerisinden ayarlayabilirsiniz.
Bütün anlatacaklarım bu kadardı dostlarım 😊.
Eveeeet dostlarım bir makalenin daha sonuna geldik. Bu makalede elimden geldiğince dilim döndüğünce "React JS Proje Yapısı" konusundan elimden geldiğince dilim döndüğünce anlatmaya çalıştım. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık veya zor gelebilir dostlarım anlıyorum. Bu süreçte sizlerden istediğim tek şey her zaman dediğim gibi "İstikrarlı ve Azimli olacaksınız, Bolca pratik yapacaksınız". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır dostlarım 😊
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer