Scalable Folder Architecture बनाना
In this page:
छोटे Apps के लिए Simple Structure
एक छोटे app के लिए, एक flat structure — एक components/ folder, एक hooks/ folder, शायद एक utils/ folder — अक्सर काफी sufficient और navigate करना आसान होता है।
ज़रूरत पड़ने से पहले ज़्यादा elaborate structure जोड़ना real benefit के बिना friction जोड़ सकता है।
- Simple शुरू करें।
- आप हमेशा बाद में एक ज़्यादा elaborate structure में reorganize कर सकते हैं जब app की असली shape clear हो जाए।
उदाहरण: Creating a Flat Folder Structure
$ mkdir -p src/components src/hooks src/utils
$ ls src
components hooks utils App.jsx main.jsx⚠️ Run this in your own terminal or Node.js environment.
बड़े Apps के लिए Feature-Based Structure
जैसे एक app बढ़ता है, files को FEATURE के हिसाब से group करना (एक shopping cart के सारे components, hooks, और logic एक features/cart/ folder में साथ) file TYPE के हिसाब से करने के बजाय related code को physically close रखता है, एक साथ किसी feature से relevant सब कुछ ढूंढना आसान बनाते हुए।
उदाहरण: Creating a Feature-Based Folder Structure
$ mkdir -p src/features/cart/components src/features/cart/hooks
$ ls -R src/features/cart
src/features/cart:
components hooks cartSlice.js CartPage.jsx
src/features/cart/components:
CartItem.jsx CartSummary.jsx⚠️ Run this in your own terminal or Node.js environment.
Perfection से ज़्यादा Consistency
कोई single universally correct folder structure नहीं है — अलग teams और frameworks अलग conventions successfully favor करते हैं। जो सबसे ज़्यादा मायने रखता है वह ONE approach चुनना और उसे consistently apply करना है, ताकि team का कोई भी (या future you) predict कर सके कि कोई given file कहां मिलेगी या add करनी है।
- Purely file TYPE के हिसाब से organize करना (एक giant components folder, एक giant hooks folder) FEATURE के हिसाब से करने के बजाय, related files को दूर-दूर scattered बनाते हुए।
- एक tiny app के लिए folder structure over-engineer करना जिसे अभी इसकी ज़रूरत नहीं।
- कोई consistent convention न होना बिल्कुल भी, हर contributor को files अलग-अलग organize करने देना।
- छोटे apps simple रह सकते हैं: एक flat components/ folder अक्सर काफी है।
- बड़े apps अक्सर feature-based folders (features/cart/, features/auth/) से फायदा उठाते हैं जो related components, hooks, और logic को साथ group करते हैं।
- Consistency किसी एक correct structure से ज़्यादा मायने रखती है — एक convention चुनें और इसे uniformly apply करें।
- Folder structure को app के साथ evolve करना चाहिए; premature over-organization early on friction जोड़ सकता है।
कोई React-version restriction नहीं — यह एक project organization convention है, कोई API नहीं।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first:
- Error Boundaries
- React Portals
- Modals using Portals (practical use)
- React Suspense
- Code Splitting with React.lazy
- Introduction to Server Components
- Introduction to Next.js (server-side React)
- Using React with TypeScript
- Scalable Folder Architecture
- Common React Design Patterns
- Component Documentation with Storybook
- Accessibility (a11y) in React
- i18n with react-i18next
- React Security Best Practices