Component Naming की Conventions
In this page:
function ComponentName() {
return <div>...</div>;
}
// Used as a JSX tag with the same PascalCase name
<ComponentName />PascalCase क्यों Required है
JSX यह decide करने के लिए capitalization उपयोग करता है कि एक tag एक built-in HTML element को refer करता है या एक custom component को: lowercase मतलब HTML tag, capitalized मतलब component।
यह सिर्फ एक style preference नहीं है -- <greeting /> और <Greeting /> JSX में completely अलग तरीके से behave करते हैं।
function greeting() (lowercase) के रूप में defined एक component जो <greeting /> के रूप में used है आपका function call करने के बजाय silently एक unknown HTML element के रूप में render होगा।उदाहरण: Why PascalCase Is Required
<!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 ValidComponent() {
return <p>Correctly named component (PascalCase)</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ValidComponent />);
</script>
</body>
</html>Descriptive Names चुनना
एक component का नाम वह UI describe करना चाहिए जो यह represent करता है -- UserAvatar, NavigationBar, PriceTag -- किसी vague जैसे Box1 या Thing के बजाय।
Clear names एक codebase को बढ़ने के साथ navigate करना कहीं ज़्यादा आसान बनाते हैं, क्योंकि developers सिर्फ इसके नाम से guess कर सकते हैं कि एक component क्या करता है।
BlueBoxWithText के बजाय PrimaryButton prefer करें)।Wrapper या Container जैसे overly generic names एक बार किसी project में कई अलग files में scattered होने पर confusing बन जाते हैं।उदाहरण: Choosing Descriptive Names
<!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 ProductCard({ name, price }) {
return <div><h4>{name}</h4><p>${price}</p></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ProductCard name="Coffee Mug" price="12" />);
</script>
</body>
</html>File Names को Component Names से Match करना
एक component export करने वाली file को component के नाम पर रखना (जैसे UserAvatar.jsx जो UserAvatar export करता है) एक बड़े project में code locate करना कहीं तेज़ बनाता है। यह convention असली-world React codebases भर में almost universally follow किया जाता है।
उदाहरण: Matching File Names to Component Names
<!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">
// File: WelcomeBanner.jsx (matches the component name below)
function WelcomeBanner() {
return <div style={{background: "#e0f7fa", padding: "10px"}}>Welcome!</div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<WelcomeBanner />);
</script>
</body>
</html>- एक descriptive नाम के बजाय
ThingयाComp1जैसा एक generic, unclear नाम उपयोग करना। - mandatory PascalCase capitalization rule भूल जाना, JSX recognition को तोड़ते हुए।
- एक file को इसके export किए component से अलग नाम देना, जिससे इसे बाद में ढूंढना harder हो जाता है।
- Component names PascalCase (capitalized) में होने चाहिए ताकि JSX उन्हें HTML tags से distinguish कर सके।
- अच्छे names describe करते हैं कि component क्या represent करता है, न कि यह कैसे implemented है।
- File name को component name से match करना larger projects में navigation आसान बनाता है।
- Consistent naming conventions एक codebase को teams के साथ काम करने के लिए आसान बनाती हैं।
कोई browser-specific restrictions नहीं -- PascalCase naming हर React version में एक JSX parsing requirement है।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: