UI को Components में बांटना
Components को split करना एक giant pizza को manageable pieces में slice करने जैसा है ताकि इसे serve और eat करना आसान हो जाए।
In this page:
Syntax
function ParentComponent() {
return (
<div>
<ChildComponent propName={value} />
</div>
);
}
function ChildComponent({ propName }) {
return <p>{propName}</p>;
}यह पहचानना कि कब Split करें
एक component जो एक साथ बहुत सारे unrelated pieces of UI या logic handle करता है पढ़ना, test करना, और reuse करना hard हो जाता है। एक common signal कि split करने का समय है तब है जब एक component के JSX में multiple clearly separate sections हों, या इसकी logic एक से ज़्यादा concern handle करे।
Note:
अगर आपको यह describe करने में struggle हो कि एक component एक short sentence में क्या करता है, यह probably बहुत ज़्यादा कर रहा है।
Warning:
purely line count से split करना logical responsibility के बजाय awkward, tightly-coupled pieces produce कर सकता है।
उदाहरण: Recognizing When to Split
<!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 UserProfileBig({ name, bio, followers }) {
return (
<div>
<h2>{name}</h2>
<p>{bio}</p>
<p>{followers} followers</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<UserProfileBig name="Sam" bio="Loves React" followers={120} />);
</script>
</body>
</html>Focused Pieces में Split करना
एक ही UI को छोटे components में तोड़ा जा सकता है, हर एक एक clear responsibility handle करते हुए, फिर एक parent component में वापस composed किया जा सकता है। यह हर piece को अपने आप test, reuse, और reason करना आसान बनाता है।
Note:
हर split-out component को exactly वही नाम दें जो यह render करता है, जैसे
UserName या FollowerCount।Warning:
Split करने के बाद, सुनिश्चित करें कि data अब भी props के through correctly flow करे -- एक common mistake एक needed prop को नए छोटे component में pass करना भूल जाना है।
उदाहरण: Splitting into Focused Pieces
<!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 UserName({ name }) { return <h2>{name}</h2>; }
function UserBio({ bio }) { return <p>{bio}</p>; }
function FollowerCount({ count }) { return <p>{count} followers</p>; }
function UserProfile({ name, bio, followers }) {
return <div><UserName name={name} /><UserBio bio={bio} /><FollowerCount count={followers} /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<UserProfile name="Sam" bio="Loves React" followers={120} />);
</script>
</body>
</html>Split करने के बाद Data Pass करना
एक बार एक component split हो जाने पर, pieces को अब भी data share करने की ज़रूरत होती है -- यह entirely props के through होता है, बिल्कुल किसी और parent-child relationship की तरह। Parent component data holds करता है और exactly वह passes down करता है जो हर child को चाहिए।
Note:
Parent component को data gather/hold करने पर focused रखें और rendering details अपने split-out children को delegate करें।
Warning:
Split करने के बाद एक common mistake child component को actually चाहिए वाला एक prop pass करना भूल जाना है, इसे undefined छोड़ते हुए।
उदाहरण: Passing Data After Splitting
<!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 Title({ text }) { return <h2>{text}</h2>; }
function Subtitle({ text }) { return <p>{text}</p>; }
function Header({ title, subtitle }) {
return <div><Title text={title} /><Subtitle text={subtitle} /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Header title="Dashboard" subtitle="Overview of your data" />);
</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. #}
आम गलतियां
- एक component को split करने में बहुत देर करना, इसे एक unmanageable 'god component' में बढ़ने देना।
- एक component को ऐसे pieces में split करना जो इतने tightly coupled हों कि उन्हें independently use नहीं किया जा सकता।
- extremely simple UI के लिए बहुत सारे tiny fragments बनाना, real benefit के बिना overhead add करते हुए।
चैप्टर सारांश
- बड़े components को बढ़ने के साथ छोटे, focused components में split किया जाना चाहिए।
- हर split-out component का ideally एक clear responsibility होना चाहिए।
- Splitting readability, testability, और reuse improve करता है।
- Props और children वे tools हैं जो split-apart components को वापस connect करने के लिए use होते हैं।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- यह एक code organization practice है।
🔒
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: