Odanızı uzun süre toplamadığınızda eşyalarınızı bulamadığınız veya bilgisayarınızın masaüstünü hunharca kullandığınızda istediğiniz dosyayı dakikalarca aradığınız olmuştur 🤔. Aynı durumu yazılım geliştirirken de yaşayabiliyoruz. Yüzlerce dosya veya klasör arasından istediğimizi bulmak bazen gereksiz zaman kaybına yol açabiliyor.

Bu yazıda react.js projesi özelinde klasör yapısının (folder structure) nasıl olması gerektiğine dair bazı bilgiler vermeye çalışacağım.

Klasör Ve Dosya Düzenine Neden Dikkat Etmeliyim?

Çalıştığınız projede ufak bir bug çözmeniz gerektiğini düşünelim. Çalıştığınız projede klasör ve dosya yapısında belirli bir standart bulunmuyorsa değişiklik yapacağınız dosyayı bulmak çözeceğiniz bug'dan daha fazla zaman alabilir. Bu gibi durumları en aza indirmek için dosya ve klasörleri belirli bir standarta uygun oluşturmanız gerekiyor. Böylece hem aradığınız dosyayı bulmak kolaylaşacak hem de yeni takım arkadaşlarınız projeye daha kolay adapte olacaklardır.

React Projelerinde Klasör Yapısı

Bir React projesi büyüklüğüne göre yüzlerce dosya veya klasöre sahip olabilir. Bu dosyalar arasında kolayca gezebilmek ve aradığımız dosyayı bulabilmek için tutarlı bir klasör yapısına ihtiyaç duyarız. Projenin büyüklüğüne göre klasör yapımız farklılık gösterebilir.

Örneğin basit bir proje için ayrı ayrı klasörleme yapmak çok da mantıklı değildir. Diğer yandan büyük ölçekli bir projede de 20 - 30 tane dosyanın aynı klasörde olması yukarıda anlattığım problemlere neden olabilir. Hem basit ve orta ölçekli hem de büyük ölçekli projeler için klasör yapısının nasıl olması gerektiğini anlatacağım.

Basit Ve Orta Ölçekli Projeler İçin Klasör Yapısı

Bu tip projelerde derin klasör yapıları uygulamayı basitleştirmekten ziyade karmaşıklaştıracaktır. Bu yüzden daha basit ve iç içe klasörlerin az olduğu bir yapı tercih edilmelidir.

src
├── components
│   ├── Footer
│   │   ├── Footer.js
│   │   ├── index.js
│   │   └── index.scss
│   ├── Header
│   │   ├── Header.js
│   │   ├── index.js
│   │   └── index.scss
├── containers
│   ├── Login
│   │   ├── Login.js
│   │   └── index.js
│   ├── Movies
│   │   ├── Movies.js
│   │   └── index.js
├── context
│   ├── AuthContext.js
│   └── MoviesContext.js
├── hooks
│   ├── useAuth.js
│   └── useRequest.js
├── pages
│   ├── Home.js
│   ├── Login.js
│   └── Movies.js
├── utils
│   ├── getMovieRating.js
│   └── getUserInfo.js
└── index.js

Basit ve orta ölçekli projelerinizde yukarıdaki gibi bir yapı izleyebilirsiniz.

Büyük Ölçekli Projeler İçin Klasör Yapısı

Bu tip projelerde ise daha belirgin ve daha organize bir klasör yapısı büyük kolaylık sağlayacaktır. Her bir feature için veya her bir sayfa için ayrı bir klasörleme yapabilirsiniz.

src
├── config
│   └── api.js
├── hooks
│   ├── useAuth.js
│   └── useRequest.js
├── Login
│   ├── components
│   │   ├── SubmitBtn
│   │   │   ├── SubmitBtn.js
│   │   │   ├── index.js
│   │   │   └── index.scss
│   ├── containers
│   │   │   └── Form.js
│   ├── redux
│   │   ├── modules
│   │   │   └── login.js
│   │   ├── selectors.js
│   │   └── validations.js
│   └── index.js
├── Movies
│   ├── components
│   │   ├── CommentItem
│   │   │   ├── CommentItem.js
│   │   │   ├── index.js
│   │   │   └── index.scss
│   ├── containers
│   │   │   └── Comments.js
│   ├── redux
│   │   ├── modules
│   │   │   └── comments.js
│   │   └── selectors.js
│   └── index.js
├── pages
│   ├── Home.js
│   └── Movies.js
├── Shared
│   ├── Button
│   │   ├── Button.js
│   │   ├── index.js
│   │   └── index.scss
│   ├── Input
│   │   ├── Input.js
│   │   ├── index.js
│   │   └── index.scss
├── utils
│   ├── getMovieRating.js
│   └── getUserInfo.js
└── index.js

Konu hakkında öneri, eleştiri ve yorumlarınızı aşağıdan bırakabilirsiniz 😇.