आपका पहला Component
आपका पहला component LEGO bricks से एक पूरा castle बनाना सीखने से पहले अपनी पहली LEGO brick draw करने जैसा है।
In this page:
Syntax
function ComponentName() {
return <element>content</element>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<ComponentName />);एक Function Component लिखना
एक React component बस एक JavaScript function है जिसका नाम एक capital letter से शुरू होता है और जो JSX return करता है यह describe करते हुए कि screen पर क्या दिखना चाहिए।
Note:
अपना बहुत पहला component simple रखें -- शुरू करने के लिए एक single returned element काफी है।
Warning:
एक component function जो lowercase letter से शुरू होता है (welcome की तरह Welcome के बजाय) React द्वारा एक plain HTML tag name के रूप में treat किया जाता है, component के रूप में नहीं -- और fail होगा।
उदाहरण: Writing a Function Component
<!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 Welcome() {
return <h1>Welcome to your first component!</h1>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Welcome />);
</script>
</body>
</html>एक Component को Page पर Render करना
ReactDOM.createRoot(domNode).render(<Component />) वह है जो असल में आपके component के output को real page में डालता है, एक DOM element (आमतौर पर id="root" वाला एक div) को target करते हुए जो HTML में already मौजूद है।
Note:
Target element (id="root") को render() run होने से पहले HTML में मौजूद होना चाहिए, नहीं तो React के पास mount करने के लिए कुछ नहीं है।
Warning:
JSX के बजाय एक plain HTML string के साथ .render() call करना (string के रूप में '<h1>Hi</h1>' जैसा) एक element के रूप में render नहीं होगा -- इसे असली JSX syntax चाहिए।
उदाहरण: Rendering a Component to the Page
<!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 FirstRender() {
return <p>This text appears because of ReactDOM.createRoot(...).render(...).</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<FirstRender />);
</script>
</body>
</html>Reuse के लिए एक Component Export करना
एक component की function declaration के सामने export default जोड़ना दूसरी files को इसे import और use करने देता है, जो है कि components असली project के across कैसे share होते हैं।
Note:
export default exactly एक main component वाली file के लिए सबसे common export style है।
Warning:
एक component export करना भूल जाना मतलब दूसरी files जो इसे import करती हैं उन्हें component के बजाय undefined मिलेगा।
उदाहरण: Exporting a Component for Reuse
<!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">
// Greeting.jsx
// export default Greeting;
function Greeting() {
return <h2>Hello from an exported component!</h2>;
}
// App.jsx
// import Greeting from './Greeting';
function App() {
return <Greeting />;
}
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. #}
आम गलतियां
- Component का नाम lowercase letter से शुरू करना, जो React को इसे एक HTML tag के रूप में treat करने पर मजबूर करता है, component के बजाय।
- Function से JSX return करना भूल जाना -- एक component जो कुछ भी return नहीं करता कुछ भी render नहीं करता।
- Component को ReactDOM से page में असल में render करना भूल जाना।
चैप्टर सारांश
- एक React component बस एक JavaScript function है जो JSX return करता है।
- Component names को एक capital letter (PascalCase) से शुरू होना चाहिए।
- Content को असल में display करने के लिए एक component को कुछ
returnकरना चाहिए। ReactDOM.createRoot(...).render(<Component />)एक component को page पर mount करता है।
ब्राउज़र सपोर्ट
React 18+ `ReactDOM.createRoot()` उपयोग करता है; पहले के versions इसके बजाय `ReactDOM.render()` उपयोग करते थे।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: