React projelerinde, dosya ve klasör yapısı önemlidir ve projenin düzgün çalışması için doğru şekilde düzenlenmesi gerekir. Bu yazı, bir React projesindeki temel dosya ve klasör yapısını tanımlayacak ve index.js dosyası içerisindeki kodları açıklayacaktır.
Başlamadan önce, React projesi oluşturmak için kullanabileceğiniz React CLI veya Create React App gibi araçların kullanımını öneriyoruz.
React projelerinde, dosya ve klasör yapısı aşağıdaki gibidir:
node_modules: React uygulamasının gerekli olan tüm paket ve modüllerin bulunduğu klasördür. Bu klasör, npm kullanarak projeyi oluşturduğunuzda otomatik olarak oluşur ve genellikle kodlarımızın içinde direk olarak değişiklik yapmamıza gerek yoktur.
public: Bu klasör, projenin kullanıcı tarafındaki görünür bölümünde bulunan dosyaları içerir. HTML, CSS ve JavaScript dosyaları bu klasörde bulunabilir. Aynı zamanda, bu klasörde projenin görüntülenmesi için gereken tüm statik dosyalar (resimler, favicon vb.) bulunabilir.
src: Bu klasör, projenin çalışma içeriğini içeren dosyaları içerir. Bu dosyalar, uygulamanın işlevselliğini tanımlayan ve React komponentlerini içeren JavaScript dosyalarıdır.
index.js: Bu dosya, React uygulamasının ana dosyasıdır ve uygulamanın çalışmasını sağlar. Bu dosyada, React DOM'u render etme işlemleri yapılır ve React komponentleri ekrana yansıtılır.
React projesi içerisinde en önemli dosyalardan biri, index.js dosyasıdır. Bu dosya, uygulamanızın çalışmasına başlaması için gerekli olan temel kodları içerir. İlk olarak, React kütüphanesi ve ReactDOM kütüphanesini projemize dahil etmemiz gerekir. Bunu, aşağıdaki şekilde yapabiliriz:
import React from 'react';
import ReactDOM from 'react-dom';
Sonra, uygulamamızın görüntüleneceği HTML elementini tanımlayabiliriz. Bunu, aşağıdaki şekilde yapabiliriz:
const rootElement = document.getElementById("root");
En son olarak, React component'ini root element içerisinde render edebiliriz. Bunu, aşağıdaki şekilde yapabiliriz:
ReactDOM.render(<App />, rootElement);
Burada, <App />, uygulamanızda kullanacağınız bir React component'idir.
Diğer önemli dosyalar ve klasörler arasında, components klasörü bulunur. Bu klasör, uygulamanızda kullanacağınız tüm React component'lerini içerir. CSS veya SCSS dosyalarınız için assets klasörü bulunabilir. Ayrıca, api istekleri yapmak için kullanabileceğiniz services veya utils klasörü bulunabilir.
Src klasörü, uygulamanın içeriğini tanımlayan dosyaları içerir. Bu dosyalar, uygulamanın işlevselliğini tanımlayan React komponentlerini içerebilir. Komponentler, kodlarımızı daha düzenli ve anlaşılır hale getirmemize yardımcı olan tekrar kullanılabilir bileşenlerdir.
Public klasörü, uygulamanın görünür bölümünde bulunan ve sunucu tarafından dağıtılan dosyaları içermektedir. Genellikle HTML, CSS ve JavaScript dosyalarını içermektedir. Public klasöründe bulunan index.html dosyası, uygulamanın başlangıç noktasıdır ve bu dosya tarafından yüklenen diğer dosyalar da içermektedir. Bunun yanı sıra public klasöründe resim, favicon gibi dosyalar da bulunabilir.
Bununla birlikte, src klasörü ise uygulamanın gerçek kodlarını içermektedir. Bu klasör, React componentlerini, fonksiyonları ve diğer JavaScript kodlarını içermektedir. Index.js dosyası, uygulamanın başlangıç noktasıdır ve diğer componentlerin yüklenmesine ve işlenmesine yönlendirilir.
Ayrıca, React projelerinde sıklıkla node_modules klasörü de bulunur. Bu klasör, projede kullanılan npm paketlerini içermektedir. Paket yöneticisi olarak npm kullanılır ve bu klasör, paketlerin yüklenmesi ve projede kullanılması için gerekli olan dosyaları içermektedir.
Yazının amacı, React projelerindeki dosya ve klasörlerin ne işe yaradığını ve nasıl yapılandırıldıklarını açıklamaktır. Böylece React projeleri oluştururken daha iyi bir anlayışa sahip olabilir ve projeleri daha verimli bir şekilde yapılandırabilirsiniz.