Reusable Component Patterns बनाना
Reusable components एक stamp जैसे हैं जो आप एक बार design करते हैं, फिर जहां भी वह shape चाहिए print करने के लिए use करते हैं।
In this page:
Syntax
function ReusableComponent({ variant, children }) {
return <element className={variant}>{children}</element>;
}
<ReusableComponent variant="value">content</ReusableComponent>Reuse Opportunities Identify करना
जब आप notice करते हैं कि same JSX pattern कई जगहों पर सिर्फ छोटे differences के साथ दिख रहा है, यह एक sign है कि इसे एक reusable component बनना चाहिए।
इसे एक बार extract करना और differences को props के रूप में pass करना everywhere same markup duplicate करने से बचाता है।
Note:
एक अच्छा rule of thumb: अगर आप JSX को दो बार से ज़्यादा copy-paste करते हैं, तो एक component extract करने का समय है।
Warning:
एक component को बहुत early extract करना, असल में एक second use case होने से पहले, unnecessary abstraction add कर सकता है।
उदाहरण: Identifying Reuse Opportunities
<!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 Badge({ label, color }) {
return <span style={{background: color, padding: "2px 8px", borderRadius: "4px"}}>{label}</span>;
}
function App() {
return (
<div>
<Badge label="New" color="lightgreen" />
<Badge label="Sale" color="orange" />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Props के साथ Parameterize करना
एक component को genuinely reusable बनाने के लिए, identify करें कि उसके use cases के बीच क्या varies होता है और उन्हें props में बदलें। यह component की internal structure fixed और consistent रखता है जबकि हर usage को exactly वह customize करने देता है जिसकी उसे ज़रूरत है।
Note:
Props को clear, descriptive names दें ताकि यह obvious हो कि हर usage क्या customize कर रहा है।
Warning:
बहुत सारे unrelated props वाला एक component correctly use करना hard हो जाता है -- अगर ऐसा हो तो इसे split करने पर विचार करें।
उदाहरण: Parameterizing with Props
<!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 Alert({ message, type }) {
const colors = { error: "red", success: "green", info: "blue" };
return <div style={{color: colors[type], border: `1px solid ${colors[type]}`, padding: "8px"}}>{message}</div>;
}
function App() {
return (
<div>
<Alert message="Something went wrong" type="error" />
<Alert message="Saved successfully" type="success" />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Flexibility और Simplicity को Balance करना
एक reusable component real variations cover करने के लिए flexible होना चाहिए, लेकिन इतना configurable नहीं कि use करना confusing हो जाए। Balance का एक अच्छा sign: ज़्यादातर callers को सिर्फ एक या दो props pass करने की ज़रूरत होती है, बाकी sensible defaults पर rely करते हुए।
Note:
अगर एक component को basic usage configure करने के लिए पांच या ज़्यादा props चाहिए पड़ने लगें, विचार करें कि इसे दो ज़्यादा focused components में split किया जाना चाहिए या नहीं।
Warning:
props के through हर possible detail को configurable बनाना एक simple component को ऐसे में बदल सकता है जो correctly use करना rewrite करने से भी harder हो।
उदाहरण: Balancing Flexibility and Simplicity
<!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 Tag({ text, color = "gray" }) {
return <span style={{background: color, color: "white", padding: "2px 6px", borderRadius: "3px"}}>{text}</span>;
}
function App() {
return <div><Tag text="Default" /><Tag text="Urgent" color="red" /></div>;
}
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. #}
आम गलतियां
- Specific text या values को props के रूप में expose करने के बजाय एक component के अंदर hardcode करना।
- इसे parameterize करने के बजाय एक component के JSX को थोड़ा अलग version बनाने के लिए copy-paste करना।
- props के through कोई customization allow न करके एक component को बहुत rigid बनाना।
चैप्टर सारांश
- Reusable components कई जगहों पर अलग data के साथ काम करने के लिए designed होते हैं।
- Props एक component को configurable और reusable बनाने का main tool हैं।
- Well-designed reusable components एक app भर में code duplication कम करते हैं।
- एक अच्छा reusable component flexibility को simplicity के साथ balance करता है।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- यह एक component design practice है, runtime feature नहीं।
🔒
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: