React Klasör Yapısına Derinlemesine Dalış

Klasör yapısı birçok yönden önemlidir; anlamayı, refactoring’i (kodu yeniden yapılandırmayı) ve sürdürülebilirliği kolaylaştırır. Bu makalede React uygulamamızın klasör yapısını nasıl yönetmemiz gerektiğini göstereceğim.

“Hata yapmaya devam edecek cesaretiniz varsa, bilgeliğiniz ve zekanız büyük bir ivmeyle ileriye doğru sıçrar.” (Holly Near)

İlk olarak bir React uygulaması oluşturduğumuzda bize temel bir yapı sunar. Resmi siteden alınan aşağıdaki resme bakın.

Bir projeye başladığımızda projenin ne kadar karmaşıklaşacağını veya neye ihtiyacımız olacağını tahmin edemeyebiliriz. Çok fazla zaman ve çalışmadan sonra kod parçacıklarımızın doğru yerlerde olmaması ve kendimizi sayılamayacak kadar çok tekrar etmemiz nedeniyle projenin bir karmaşa içinde olduğunu fark ederiz.

Bahsettiğim tüm bu şeylerin gerçekleşmesini önlemenin bir yolu var. Doğru klasör yapısı!

İlk olarak bir senaryoya ihtiyacımız var.

Bir freelance iş aldığınızı hayal edin. Ve işvereniniz kullanıcıların birbirini eleştirebildiği, gönderilere yorum yapıp oy verebildiği, kaydolup giriş yapabildiği ve her şeyden önemlisi blockchain ile gönderilerden para kazanabildiği bir uygulama istiyor. İşveren API’nin kullanıma hazır olduğunu söylüyor.

Oluşturmaya başlayalım.

Tüm klasörler ‘src’ klasörünün içinde yer alacak.

PAGES – Açıkçası bu uygulamada sayfalarımız olacak. Dolayısıyla ilk klasörümüz sayfalar olacak. Bu klasörde sayfalarımızı tutarız. Stil yönetimini nasıl kontrol ettiğinize bağlıdır ancak ben module CSS tercih ediyorum, bu yüzden tüm sayfalarımı ayrı klasörlerde tutuyorum. Örneğin ana sayfanın yolu ‘./src/pages/Home/Home.jsx’ gibi görünür. Diğer sayfaları da bununla aynı şekilde ekleyin.

COMPONENTS — Sayfa içinde bileşenler kullanacağız. Bu yüzden bileşenleri bu klasörde tutabiliriz. Bu klasör şu şekilde birkaç klasör içerebilir;

| — UI UI Butonlar, kartlar, onay kutuları (checkboxes) vb. gibi UI öğelerinizi tutar.

| — layout Layout sayfasında değişmeyen ve birkaç sayfada kullanılan bileşenleri tutabiliriz. app.js dosyasını <Layout> </Layout> ile sarmalayarak children prop’u ile layout’u yerleştirmiş oluruz. Daha fazla bilgi için bu linke bakın.

ASSETS — Uygulamada ikonlara, giflere, yazı tiplerine (fonts), resimlere ve stillere ihtiyacımız var. Dosyalarımızı bunların içinde tutabiliriz.

API — API ile ilgili dosyaları tutar.

MODULES — Global modülleri tutar.

CONTEXT — Uygulamada bazı verileri global bir durumda (state) tutmamız gerekir, eğer context kullanmaya karar verirseniz bu klasöre ihtiyacınız olur.

STORE — Eğer redux tercih ettiyseniz bu klasör kullanışlı olacaktır. Alt klasörler eklenebilir. Bu alan için birden fazla kalıp (pattern) vardır. Daha fazla bilgi için bu güzel makaleye bakın.

| — ACTIONS

| — REDUCERS

TYPES — Bu proje için typescript seçtiğimizi varsayalım, bu klasör tipleri içinde tutar.

UTILS — Her projenin araçlara ihtiyacı vardır. Bu klasör projemiz için bir alet çantasıdır. Örneğin parser’lar, sabitler (constants), dil dosyaları vb.

| — CONSTANTS

| — HOOKS

| — LANGS

TEST — Test dosyalarını tutar.

İşte bu kadar. Uygulamayı sürdürülebilir kılmak için başka klasörler de ekleyebilirsiniz. Ancak çok fazla iç içe geçmeden (nesting) kaçının. Resmi dokümantasyonu okuyun.

Sonuç olarak klasör yapısı şu şekilde görünecektir.

react-app/
├─ node_modules/
├─ public/
│ ├─ favicon.ico
│ ├─ index.html
│ ├─ robots.txt
├─ src/
│ ├─ api/
│ │ ├─ services/
│ ├─ assets/
│ │ ├─ gifs/
│ │ ├─ images/
│ │ ├─ styles/
│ │ ├─ icons/
│ ├─ components/
│ │ ├─ ui/
│ │ ├─ layout/
│ ├─ modules/
│ ├─ pages/
│ │ ├─ Home/
│ │ ├─ Profile/
│ ├─ context/
│ ├─ store/
│ │ ├─ actions/
│ │ ├─ reducers/
│ ├─ types/
│ ├─ utils/
│ │ ├─ contants/
│ │ ├─ langs/
│ │ ├─ hooks/
│ ├─ __tests__/
├─ .gitignore
├─ package.json
├─ README.md
├─ index.css
├─ index.js

Basit tutmak için bu diyagrama dosyaları eklemiyorum.

Umarım yardımcı olmuştur!

Yazar: Mahir Uslu

Tags