Dosya Yapısı

React projelerini yapılandırmak için önerilen bir yol var mı?

React dosyalarını klasörlere nasıl yerleştireceğinize dair genel bir kanaat bulunmamaktadır. Ancak dikkate almak isteyebileceğiniz ve ekosistemde popüler birkaç yaygın yaklaşım bulunmaktadır.

Özelliklere veya rotalara göre gruplandırma

Projeleri yapılandırmak için kullanılan yaygın yöntemlerden biri; CSS, JS ve testleri özellik veya rotalara göre gruplanan klasörlerin içine beraber koymaktır.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

“Özellik” tanımı evrensel değildir ve ayrıntı derecesini seçmek size bırakılmıştır. Eğer bir üst düzey klasörler listesi ortaya çıkaramazsanız, kullanıcılarınıza ürününüzün hangi ana bölümlerden oluştuğunu sorabilir ve akıllarındaki modeli bir taslak olarak kullanabilirsiniz.

Dosya türüne göre gruplandırma

Projeleri yapılandırmanın bir diğer popüler yöntemi ise benzer dosyaları birlikte gruplandırmaktır. Örneğin;

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

Bazı insanlar daha da ileri gidip, bileşenleri uygulamadaki rollerine göre farklı klasörlere ayırmayı tercih ederler. Örneğin Atomic Design, bu ilkeye dayalı bir tasarım metodolojisidir. Bu tür metodolojilerin takip edilmesi gereken katı kurallardan ziyade, yardımcı örnekler olarak değerlendirilmesi daha verimli olacaktır.

Çok fazla iç içe koymaktan kaçının

Javascript projelerinde klasörleri derinlemesine iç içe koymanın çok fazla zararlı noktası bulunmaktadır. Klasörler arası bağıl import’lar yazmak veya dosyalar taşındığında bu import’ları güncellemek git gide zorlaşır. Derinlemesine bir dizin yapısı kullanmak için çok zorlayıcı bir nedeniniz olmadığı sürece, kendinizi tek bir proje için en fazla üç ya da dört iç içe klasör kullanmakla sınırlamayı düşünebilirsiniz. Tabii ki bu sadece bir öneridir ve sizin projeniz için uygun olmayabilir.

Çok fazla düşünmeyin

Eğer bir projeye henüz yeni başlıyorsanız, dizin yapısı üzerine beş dakikadan daha fazla zaman harcamayın. Yukarıdaki yaklaşımlardan herhangi birini seçin (veya kendi yönteminizi getirin) ve kod yazmaya başlayın! Biraz gerçek kod yazdıktan sonra bu husus hakkında muhtemelen yeniden düşünmek isteyeceksinizdir.

Eğer tamamen çıkmaza girdiyseniz, tüm dosyaları tek bir klasörde tutarak başlayın. Eninde sonunda projeniz bazı dosyaları diğerlerinden ayırmak isteyeceğiniz kadar büyüyecek. O zamana kadar hangi dosyaları çoğu kez birlikte düzenlediğinizi söylemeye yetecek kadar bilginiz olacaktır. Genel olarak, sıklıkla birlikte değiştirilen dosyaları birbirlerine yakın tutmak iyi bir fikirdir. Bu prensip, “ortak yerleşim” olarak adlandırılır.

Projeler büyüdükçe, pratikte yukarıdaki yaklaşımların her ikisinin de bir karışımı uygulanır. Yani başlangıçta “doğru” olanı seçmek çok önemli değil.