ReactJS projelerinde klasör adlandırması nasıl olmalıdır?

kontrawolta

src içindeki klasörlerin adlarını küçük harfle başlatıyoruz.

components, pages, assets gibi

peki component klasörlerinin adları nasıl olmalı?

örneğin components altında TextBox adında bir componentimiz var.

bunun klasör adı text-box mı olmalı TextBox mı? içindeki dosyaya zaten index.jsx diyoruz.

KerimCETINBAS

Merhaba;
Çokta şey etmemek lazım. Nodejs tarafından her hangi bir kisitlama yok bu konuda. Tamamen kişisel tercih. isimlendirmeler tamamen sizin tercihinize kalmış nasıl kullanmak daha rahatsa o şekilde kullanmalısınız.

Klasor isimlendirme

bu konuda bende takıntılıyım, kendimin nasıl yaptığımı izah edeyim. Belki sizede yardımı dokunur

Öncelikle klasör ve dosya ismi ne olursa olsun PascalCase yazmayı tercih ediyorum. Sebebi ise o dosyaları sağa sola import ederken PascalCase yazmak kebab-case yazmaktan daha pratik geliyor.

ana dizinleri ise snanakeCase olarak yazıyorum, zaten tsconfıg | jsconfig | webpack | vite vs aracılığı ile bu klasorlere allias veriyorum

import ... from "../../../lib/actions/..."

yazmak baya zahmetli hemde kac dizin yukardasin kac dizin asagidasin bunu hardcode yazmak klasor yapisi değiştiği an zülüme dönüyor.

import ... from "@/Actions"

cok daha basit ve kısa, actions klasorünü lib'in içine taşıdımı düşün. Butun projedeki ../action, ../.././action vs importlari bulup tek tek elle düzeltmek yerine Alliası map ettiğim yerde düzeltmek yetecek

TextBox dıye bir componentımız olsun. Bu componenti index.tsx|jsx te bulunmasi S.O.L.I.D prensiplerinin ilk kavramina ters düşüyor. O component kendi isimi ile ayni bir dosya icinde bulunmasi gerekiyor. TextBox klasoru bir namespace'i temsil ediyor, bir componenti değil

TextBox // Text box klasoru, TexBox ile alakalı her nesneyi barındırıyor

TextBox.Label.tsx - Textboxun kullandıgı label componenti
TextBox.tsx - TextBox componenti
TextBox.module.css // TextBox componentinin kullandıgı css modulu varsa

index.tsx // asıl dışarı aktarılması gereken şeyleri reexport ediyour
ornek;

export { default as TextBox }  from "./TextBox"

Örnek klasor yapısı

- src
  - main.{jsx,tsx} // varsa projenin entrypoint
  - app // next filan kullaniyorsan router dir, react router filan icinde kullanilabilir
  - actions //  react 19 ile gelen server actions, redux ile filan karışmasın
  - http //  fetch / graphql / react query gibi http clientler, 
         //  sonucta actions "use server" veya "server-only" ile 
         //  süslendinden form actions dışında doğrudan client 
         //  componentlerine import edemiyoruz.
         // Ayrıca aynı isteği action içinde tekrar tekrar yazmak yerine 
         // burdan çağırmak daha kolay
  - lib 
     - style //  preprocessor dosyalari scss, sass, less, pcss
     - utils/helpers // yardımcı methodlar
     - constants //  sabitler ve magic stringler
     - providers //  state ile alakali hersey burada, 
                 //  context, mobx, redux, recoil, signals vs
     - ui // butun react componentleri
         - components // paylasilan componentler, 
                      // paylasilmayan componentler kullanildigi yere yakın kalmalı
                      // NavItem.tsx bence layoutsun içinde NavBar.tsx le aynı dizinde bulunmalı
         - layouts
         - hocs
         - hooks
         - pages - // app tarafinda re export etmek istersen 

- types // varsa d.ts dosyaları
- test // src nin aynısı sadece  js, tx yerine .{spec, test}.* dosyalari bulunuyor
  - unit
  - e2e