React Project की Folder Structure
एक React project के folders एक घर के rooms जैसे हैं -- हर एक का एक काम है, ताकि आपको पता हो चीज़ें कहां ढूंढनी हैं।
In this page:
एक Typical src Folder Layout
ज़्यादातर React projects src/ को components/ (reusable UI pieces), pages/ (route से जुड़े top-level views), और hooks/ (custom hooks) जैसे subfolders में organize करते हैं -- हालांकि exact layout project size के साथ बदलता है।
Note:
छोटे projects एक flat src/ folder से शुरू हो सकते हैं और crowded लगने पर subfolders में split कर सकते हैं -- day one पर over-organize करने की ज़रूरत नहीं।
Warning:
एक बड़े, complex project की folder structure को एक brand-नई छोटी app में copy करना अभी बिना benefit के overhead जोड़ता है।
उदाहरण: A Typical src Folder Layout
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>;
}
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<h2>Component from src/components/Button.jsx</h2>
<Button label={`Clicked ${count} times`} onClick={() => setCount(count + 1)} />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Files को Colocate करना
एक common pattern है एक component की JSX, styles, और tests को एक ही folder में रखना (जैसे Button/Button.jsx, Button/Button.css, Button/Button.test.js) ताकि UI के उस piece से related सब कुछ एक साथ रहे।
Note:
Files को colocate करना clear बना देता है कि component हटाते समय क्या delete करना है -- सब कुछ एक folder में है।
Warning:
एक component की styles को एक giant global CSS file में फैलाना यह बताना मुश्किल बना देता है कि कौन से rules किस component के हैं।
उदाहरण: Colocating Related Files
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Button/Button.jsx and Button/Button.css live in the same folder
function Button() {
return (
<div>
<style>{`.btn { background: #4a90d9; color: white; padding: 8px 16px; border: none; }`}</style>
<button className="btn">Colocated Button</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Button />);
</script>
</body>
</html>Files के लिए Naming Conventions
Component files आमतौर पर उनके component से match करने के लिए named होती हैं (Header.jsx Header export करता है), filename के लिए PascalCase उपयोग करते हुए बिल्कुल component के नाम की तरह।
Note:
Consistent file naming एक component को सिर्फ इसका नाम search करके ढूंढना आसान बनाता है।
Warning:
एक file को header.jsx (lowercase) नाम देना जबकि component खुद Header है Linux-based deployment servers पर case-sensitivity import errors का कारण बन सकता है भले ही यह locally Windows पर काम करे।
उदाहरण: Naming Conventions for Files
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Header.jsx -- PascalCase filename matches the PascalCase component
function Header() {
return <h2>My Site</h2>;
}
// App.jsx
// import Header from './Header';
function App() {
return <Header />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- Project बढ़ने पर सभी components को किसी organization के बिना एक giant folder में डंप करना।
- यह न जानना कि
publicfolder की files as-is serve होती हैं,srcकी files के विपरीत। - असली source files के बजाय directly
node_modulesedit करना।
चैप्टर सारांश
src/आपके application का source code रखता है -- components, styles, और logic।public/static files रखता है जो as-is serve होती हैं, जैसे HTML shell और favicon।node_modules/installed dependencies रखता है और इसे कभी directly edit नहीं करना चाहिए।package.jsondependencies list करता है और project के लिए npm scripts define करता है।
ब्राउज़र सपोर्ट
Applicable नहीं -- project structure एक development-time convention है, कोई runtime concern नहीं।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: