JSX का परिचय
JSX आपको एक webpage कैसा दिखना चाहिए यह अपने JavaScript के अंदर ही लिखने देता है, अपनी to-do list के अंदर directly एक picture draw करने जैसा।
Syntax
function ComponentName() {
return (
<div className="class-name" onClick={handler}>
<child>content</child>
</div>
);
}JSX कैसा दिखता है
JSX एक syntax extension है जो आपको JavaScript के अंदर directly HTML-like tags लिखने देता है। पीछे से, हर JSX tag एक React.createElement() call तक compile होता है -- JSX बस वह लिखने का एक friendlier तरीका है।
Note:
JSX खुद plain JavaScript के रूप में valid नहीं है -- यह browser में run होने से पहले compile (Babel या एक bundler द्वारा) होना चाहिए।
Warning:
return के बाद multi-line JSX को parentheses में wrap करना भूल जाना JavaScript की automatic semicolon insertion को आपका return short cut करने का कारण बना सकता है।
उदाहरण: What JSX Looks Like
<!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 Hello() {
return <p>This is JSX -- it looks like HTML but is JavaScript.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Hello />);
</script>
</body>
</html>एक Single Root Element
एक component का JSX exactly एक top-level element return करना चाहिए -- आप दो sibling tags को एक parent में wrap किए बिना side by side return नहीं कर सकते।
Note:
इस rule को satisfy करने के लिए sibling elements को एक single <div> (या एक Fragment, आगे cover किया गया) में wrap करें।
Warning:
<p>One</p><p>Two</p> को directly return करना (दो siblings, कोई wrapper नहीं) JSX में एक syntax error है।
उदाहरण: A Single Root 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 TwoLines() {
return (
<div>
<p>First line</p>
<p>Second line</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<TwoLines />);
</script>
</body>
</html>JSX Attributes camelCase Use करते हैं
onclick और tabindex जैसे HTML attributes JSX में onClick और tabIndex बन जाते हैं, HTML के lowercase convention के बजाय JavaScript के camelCase convention को follow करते हुए।
Note:
जब कुछ सही दिखे लेकिन कुछ न करे, double-check करें कि attribute correctly camelCased है।
Warning:
JSX में onClick के बजाय onclick (lowercase) उपयोग करना error नहीं देता -- यह बस silently कुछ नहीं करता, क्योंकि React इसे एक event handler prop के रूप में recognize नहीं करता।
उदाहरण: JSX Attributes Use camelCase
<!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 ClickNote() {
return <button onClick={() => alert('Clicked!')}>Click me</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ClickNote />);
</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. #}
आम गलतियां
- JSX को एक function के बाहर लिखना जो इसे return करता है, यह उम्मीद करते हुए कि यह automatically display होगा।
- यह भूल जाना कि JSX को exactly एक root element चाहिए जो सब कुछ return किया गया wrap करे।
- CSS classes के लिए
classके बजायclassNameउपयोग करना, क्योंकिclassJavaScript में एक reserved word है।
चैप्टर सारांश
- JSX एक syntax extension है जो आपको JavaScript के अंदर HTML-like markup लिखने देता है।
- यह (Babel के through) regular JavaScript function calls में compile हो जाता है।
- JSX expressions को एक single root element return करना चाहिए।
- JSX
classNameऔरonClickजैसे camelCase attribute names उपयोग करता है।
ब्राउज़र सपोर्ट
JSX खुद कभी directly browser में run नहीं होता -- इसे पहले compile किया जाना चाहिए, या तो build time पर (Babel/Webpack/Vite) या quick demos के लिए Babel standalone CDN के through।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: