Şimdi de bir projede Temel React dosyaları nedir. Hangi dosya içinde neler yapılır yada eklenmelidir yada oluşturulmalıdır buna bakacağız. Çünkü Proje büyüdükçe ve yeni dosya ve alanlar eklendikçe her şeyin yerli yerinde olması önem arzetmektedir.

Temel bir React projesi oluşturduğumuzda gelen dosyaları ve görevlerini inceleyelim.

Yukarıdaki temel dosyalara bakalım;

node_modules:  İçerisinde React ’a ait paketleri bulundurur.  projemizin beyni ve kalbi diyebiliriz. Çünkü bu klasör içerisinde kullandığımız kütüphaneler yer alır.

public: Statik dosyaların bulunduğu klasördür. Derleme gereksinimleri yoktur. Uygulamanın ortak icon, resim gibi dosyalarını tutar. Web sunucusu için kök dosyaları içerir,

 src: componentlerin ve kaynak kodların bulunduğu klasördür. İşin çoğu bu klasörde gerçekleşir. İçindeki dosyalar;

-App.css : App.jsx sayfasındaki css lerinin yazıldığı yerdir. Diğer sayfalarında css leri yazılabilr.

-App.jsx : Uygulamanın App isimli komponent dosyasıdır. main.jsx içerisinde import edilmiş ve  <App />  tag ile uygulamaya eklenmiştir. Burada App adında bir fonksiyon oluşmuş ve return etmiş. Return içine de Html kodları yazılmış. İşte bu formata jsx denir. Yani

jsx: Js içine Html kodlarını yazılması olayıdır. Yapı aşağıda;

Bu App fonksiyonunu main.jsx içinde  render edilir ve sayfa oluşmuş olur. Mantığı böyle çalışmaktadır. Yapısı aşağıda;

-index.css : index.html sayfasının css lerinin yazıldığı dosyadır.

-main.jsx : index.html dosyasında belirttiğim id=”root” olan div içerisine React komponentlerimizin render edileceği başlangıç noktasıdır. Tüm komponentler için bir giriş noktası olmalıdır o giriş noktası burasıdır, buradan bir komponenti eklersiniz ve diğerlerini de o komponentin altına ekleyerek render işlemine dahil edersiniz.

gitignore: Kaynak kod yönetim suncularına örneğin github’a projeyi push ederken hangi dosya veya klasörlerin gözardı edileceğini, geçileceğini tanımlamak için kullanılan dosyadır.

– index.html :Tüm uygulama index.html içindeki   <div id=”root”></div> arasına yüklenir. Yani Komponentler bu div içine eklenir ve proje oluşur.

package-lock.json: Projenin genel yapılandırma ayarlarını ve projeye eklenen paketleri barındırır. Buradaki dependencies kısmı hangi pakete bağımlılıkları var onu gösterir.

package.json: Projeye eklenen paketlerin tam versiyonlarını ve bağımlılıklarını tutar.

sağlıcakla kalın….