Chapter 2React Tutorial~1 min read
JSX — HTML in JavaScript
JSX म्हणजे काय आणि कसे लिहायचे?
JSX (JavaScript XML) म्हणजे JavaScript मध्ये HTML सारखा code लिहायची syntax. हे valid JavaScript नाही पण Babel tool हे regular JavaScript मध्ये convert करतो. React मध्ये UI लिहायचा primary way JSX आहे.
Marathi Analogy
JSX म्हणजे HTML आणि JavaScript चे लग्न! HTML सारखे दिसते, पण JavaScript चे powers आहेत. एखाद्या document मध्ये Marathi आणि English दोन्ही लिहिण्यासारखे — दोन्हींचे best एकत्र!
JSX Basic Syntax
JSX — expressions आणि rules
jsx
// JSX मध्ये HTML सारखे tags
function Greeting({ name }) {
const city = "Pune";
const isLoggedIn = true;
return (
// {} मध्ये JavaScript expressions लिहितात
<div>
<h1>Hello {name}!</h1>
<p>City: {city}</p>
<p>2 + 3 = {2 + 3}</p>
<p>{isLoggedIn ? "Welcome back!" : "Please login"}</p>
</div>
);
}JSX चे Rules
- ▸एकच root element — सगळे elements एका parent मध्ये असावेत
- ▸<> </> Fragment — extra div नको असेल तर
- ▸Self-closing tags — <img /> <br /> <input /> (/ mandatory)
- ▸class नाही, className वापरा — class हे JS keyword आहे
- ▸style object — style={{color: "red"}} (double curly braces)
- ▸{} मध्ये फक्त expressions — statements (if, for) थेट नाही
JSX Rules — do's and don'ts
jsx
// ✅ CORRECT
function Card() {
const color = "blue";
return (
<> {/* Fragment — extra div नको */}
<img src="/photo.jpg" alt="Photo" /> {/* Self-closing */}
<p className="text-lg">Hello</p> {/* className, not class */}
<p style={{ color: color, fontSize: "18px" }}>Styled</p>
</>
);
}
// ❌ WRONG
function Bad() {
return (
// Multiple root elements — Error!
<h1>Title</h1>
<p>Para</p>
);
}Declarative vs Imperative
React declarative way
jsx
// ❌ Imperative (Vanilla JS) — step-by-step कसे करायचे
const div = document.createElement('div');
div.className = 'card';
const h2 = document.createElement('h2');
h2.textContent = user.name;
div.appendChild(h2);
document.body.appendChild(div);
// ✅ Declarative (React) — काय दाखवायचे ते सांगा
function UserCard({ user }) {
return (
<div className="card">
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
);
}✅ Key Points — लक्षात ठेवा
- ▸JSX = JavaScript मध्ये HTML-like syntax
- ▸{} — JavaScript expression embed करतो
- ▸एकच root element (किंवा Fragment <> </>)
- ▸className (not class), htmlFor (not for)
- ▸Self-closing: <img />, <input />, <br />
0/12 chapters पूर्ण