JSX Attributes और className
JSX attributes उन labels जैसे हैं जो आप अपने HTML elements पर चिपकाते हैं, लेकिन HTML के तरीके के बजाय JavaScript के तरीके से लिखे गए।
In this page:
Syntax
<element className="class-name" attributeName={expression} />
<element style={{ camelCaseProperty: "value" }} />class के बजाय className Set करना
क्योंकि class JavaScript में एक reserved word है, JSX एक element पर CSS class apply करने के लिए HTML के class attribute के बजाय className उपयोग करता है।
Note:
ज़्यादातर editors JSX tag के अंदर class type करना शुरू करते ही correctly className autocomplete कर देते हैं।
Warning:
JSX में className="box" के बजाय class="box" लिखना error throw नहीं करता, लेकिन class rendered element पर silently कभी apply नहीं होता।
उदाहरण: Setting className Instead of class
<!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 StyledBox() {
return (
<div className="box" style={{border: '2px solid #333', padding: '8px'}}>
Styled with className
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<StyledBox />);
</script>
</body>
</html>Dynamic Attribute Values Pass करना
कोई भी JSX attribute curly braces उपयोग करके एक dynamic value ले सकता है, जैसे src={imageUrl} या disabled={isLoading}, एक fixed string के बजाय।
Note:
एक boolean attribute जैसे disabled={true} attribute को enable करता है; disabled={false} इसे पूरी तरह remove कर देता है -- React on/off logic आपके लिए handle करता है।
Warning:
एक dynamic attribute value को quotes में wrap करना, जैसे src="{imageUrl}", इसे variable evaluate करने के बजाय literal string '{imageUrl}' में बदल देता है।
उदाहरण: Passing Dynamic Attribute Values
<!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 DynamicButton() {
const isLoading = true;
return <button disabled={isLoading}>{isLoading ? 'Loading...' : 'Submit'}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<DynamicButton />);
</script>
</body>
</html>style Attribute एक Object लेता है
HTML के विपरीत, JSX का style attribute एक JavaScript object लेता है जिसमें camelCased CSS properties होती हैं, एक semicolon-separated string नहीं।
Note:
Inline styles को style={{ color: blue }} के रूप में लिखें -- outer braces JSX हैं, inner braces object literal हैं।
Warning:
एक style object के बजाय style="color: blue;" (एक HTML-style string) लिखना एक React warning throw करता है और style apply नहीं होती।
उदाहरण: The style Attribute Takes an Object
<!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 InlineStyled() {
return <p style={{ color: 'blue', fontWeight: 'bold' }}>Styled inline</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<InlineStyled />);
</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. #}
आम गलतियां
classNameके बजायclassउपयोग करना, जो JSX में silently कुछ नहीं करता।- Dynamic attribute values को quotes के बजाय curly braces में wrap करना भूल जाना।
- label elements पर
htmlForके बजायforउपयोग करना।
चैप्टर सारांश
- JSX attributes camelCase names उपयोग करते हैं, lowercase HTML attributes के विपरीत।
classNameclassकी जगह लेता है;htmlForforकी जगह लेता है।- Static attribute values quotes उपयोग करती हैं; dynamic values curly braces उपयोग करती हैं।
onClickजैसे event handler attributes एक function reference लेते हैं, string नहीं।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- attribute naming एक JSX convention है, कोई runtime feature नहीं।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: