SERIES FOR REACT ARCHITECTURE
React Örnek Proje Mimarisi — 1 (Klasör ve Dosya İsimlendirme Kuralları)
Bundan önceki yazımda proje yapısı, yani klasör ve bu klasörleri hangi mantıkta bölümlediğimden bahsetmiştim. Bu yazıda da bunları nasıl isimlendirdiğim konusuna değineceğim
Bundan önceki yazımda 2024 yılında React Proje Yapısını nasıl oluşturduğumu aşağıda yazıda anlattım.
Bu yazıda bu klasör ve dosyaları nasıl isimlendirdiğimiz üzerine duracağım.
Bu konuda React’ın kabul görmüş bazı kuralları bulunuyor bunlara uyarak bir isimlendirme yapmayı düşündüm.
Klasör İsimlendirme
Klasörler eğer bir grup bileşen veya mantıksal modül için kullanılıyorsa burada kebap-case isimlendirme kullanıyorum. Örneğin;
- authentication
- utils
- services
- page-components
Ama diyelimki bileşene özel bir gruplama ise, yeni bir React bileşeni için onun styling, stories, test, module vb grupluyor ise PascalCase isimlendirme kullanıyorum. Örneğin;
- MyComponent
- SideMenu
Dosya İsimlendirme
Dosyada konusunda da eğer üzerinde uğraştığımız React bileşenine özel bir dosya ise PascalCase isimlendirme kullanılıyorum. Örneğin;
- MyComponent.jsx
- MyComponent.styles.jsx
- MyComponent.scss
- MyComponent.test.jsx
- MyComponent.stories.jsx
Eğer bu bir CustomHook ise lowerCamelCase isimlendirme kullanıyorum. Örneğin ;
- useMouse.js
- useEventListener.js
- useGeolocation.js
- useNetwork.js
Eğer bu bir servis, util ise bunlarda da kebap-case isimlendirme kullanıyorum.
- array-util.js
- object-util.js
- axios-client.js
- index.js, main.js
- main.scss, index.css
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
