Function Components का परिचय
In this page:
function ComponentName(props) {
return <element>{props.propName}</element>;
}
<ComponentName propName="value" />एक Basic Function Component लिखना
एक function component बस एक JavaScript function है जिसका नाम एक capital letter से शुरू होता है और जो JSX return करता है। React इस function को तब call करता है जब भी उसे जानना हो कि क्या display करना है। यह React में सबसे simple possible building block है।
उदाहरण: Writing a Basic 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 React!</h1>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Welcome />);
</script>
</body>
</html>एक Function से JSX Return करना
एक function component से return किया गया JSX यह describe करता है कि page पर क्या दिखना चाहिए, लेकिन यह असली HTML नहीं है -- यह behind the scenes function calls में convert हो जाता है।
Multi-line JSX को return के ठीक बाद parentheses में wrap करना चाहिए ताकि JavaScript एक invisible semicolon insert न करे।
return के ठीक बाद parentheses में wrap करें ताकि accidental blank returns से बचा जा सके।return को अपनी ही line पर रखना और JSX को next line पर unwrapped शुरू करना JavaScript को undefined return करने का कारण बनता है।उदाहरण: Returning JSX from a Function
<!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 Profile() {
return (
<div>
<h2>Jane Doe</h2>
<p>Frontend Developer</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Profile />);
</script>
</body>
</html>एक Component को Element जैसे Call करना
एक बार defined हो जाने पर, एक function component JSX में exactly built-in HTML tag की तरह use होता है, लेकिन एक capital letter और angle brackets के साथ: <Welcome />।
React यह देखता है और आपके function को call करता है यह पता लगाने के लिए कि वहां क्या render करना है, फिर वही हर दूसरे component के लिए करता है जो उसे मिलता है।
Welcome() जैसे call करना <Welcome /> के बजाय React के rendering process को skip कर देता है और bugs का कारण बन सकता है।उदाहरण: Calling a Component Like an Element
<!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 Greeting() {
return <p>Hello there!</p>;
}
function App() {
return (
<div>
<Greeting />
<Greeting />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Component के नाम को capitalize करना भूल जाना, जिससे React इसे एक component के बजाय HTML tag मानता है।
- Function से JSX
returnकरना भूल जाना, जिससे कुछ भी render नहीं होता। - Multi-line JSX के
returnऔर opening parenthesis के बीच एक semicolon या अन्य code जोड़ना, जो automatic semicolon insertion को तोड़ता है।
- एक function component एक plain JavaScript function है जो JSX return करता है।
- यह React components लिखने का standard, modern तरीका है।
- Function components एक single
propsargument accept कर सकते हैं। - वे ज़्यादातर use cases के लिए class components से simpler और ज़्यादा concise हैं।
Hooks के साथ Function components को React 16.8+ चाहिए; Hooks के बिना वे किसी भी React version में काम करते हैं।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: