Chapter 2: JSX Basics
1. What is JSX actually?
JSX stands for JavaScript XML. It’s a syntax extension for JavaScript that lets you write HTML-like code inside JavaScript.
Important: JSX is NOT HTML — it’s just a nicer way to write JavaScript that eventually gets converted into regular JavaScript function calls.
When you write this:
|
0 1 2 3 4 5 6 |
const element = <h1>Hello Webliance!</h1>; |
Behind the scenes, React (actually Babel) transforms it into this plain JavaScript:
|
0 1 2 3 4 5 6 |
const element = React.createElement("h1", null, "Hello Webliance!"); |
So JSX = syntactic sugar — it makes your code look beautiful and readable.
Analogy: JSX is like writing a love letter in beautiful handwriting instead of typing it in plain boring text. The meaning is the same, but it’s much easier and prettier to read.
2. JSX Syntax Rules (very important — follow these always!)
Here are the golden rules every React developer must follow:
| Rule | Correct JSX | Wrong JSX | Explanation |
|---|---|---|---|
| Always return ONE root element | <div><h1>Hello</h1><p>World</p></div> | <h1>Hello</h1><p>World</p> | Use <div>, <Fragment> or <>…</> to wrap multiple elements |
| All tags must be closed | <img src=”logo.png” alt=”logo” /> | <img src=”logo.png” alt=”logo”> | Self-closing tags are mandatory (even for <br>, <input>) |
| Attributes use camelCase | className, onClick, tabIndex | class, onclick, tabindex | Because it’s JavaScript, not HTML |
| JavaScript expressions go inside {} | {user.name} | user.name | Curly braces = escape into JS mode |
| No quotes around curly braces | <p>{2 + 2}</p> | <p>”{2 + 2}”</p> | Curly braces already mean JS |
| Comments are special | {/* this is a comment */} | <!– this won’t work –> | Use JS-style comments inside {} |
| No if, for, while inside JSX | Use ternary or && | <div>{if (true) …}</div> | Use expressions only |
Modern best practice (2026): Use Fragments (<></>) instead of unnecessary <div> wrappers:
|
0 1 2 3 4 5 6 7 8 9 10 11 |
return ( <> <h1>Title</h1> <p>Content</p> </> ) |
3. Embedding Expressions in JSX (this is where the magic happens!)
You can put any valid JavaScript expression inside {}.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
function App() { const name = "Webliance"; const age = 25; const isLearningReact = true; const favoriteColor = "blue"; return ( <div> {/* 1. Simple variable */} <h1>Hello, {name}!</h1> {/* 2. Calculations */} <p>You are {age} years old → next year you'll be {age + 1}!</p> {/* 3. Ternary operator (conditional) */} <p> {isLearningReact ? "You're on the right path! 🚀" : "Time to start React!"} </p> {/* 4. Inline style object */} <p style={{ color: favoriteColor, fontSize: "20px", fontWeight: "bold" }}> My favorite color is {favoriteColor.toUpperCase()} </p> {/* 5. Call a function */} <p>Random number: {Math.floor(Math.random() * 100)}</p> {/* 6. Array methods */} <ul> {["Mumbai", "Delhi", "Bangalore"].map((city) => ( <li key={city}>{city}</li> ))} </ul> </div> ); } |
Important: You cannot put statements like if, for, while, or variable declarations inside {} — only expressions that produce a value.
4. JSX vs HTML – Key Differences
| Feature | HTML | JSX (React) |
|---|---|---|
| Attribute names | class, for, onclick | className, htmlFor, onClick |
| Self-closing tags | Optional <br> | Mandatory <br /> |
| Comments | <!– comment –> | {/* comment */} |
| Inline styles | style=”color: red;” | style={{ color: “red” }} (object) |
| Event handlers | onclick=”handleClick()” | onClick={handleClick} (function ref) |
| Case sensitivity | Not case-sensitive | Case-sensitive (components start with Capital letter) |
| Boolean attributes | <input disabled> | <input disabled={true} /> or just <input disabled /> |
Biggest mind-blow: In JSX, your components must start with a Capital letter!
|
0 1 2 3 4 5 6 7 8 9 10 |
// Correct - this is a component <MyButton /> // Wrong - this is treated as HTML tag <myButton /> // → React will think it's a native HTML element (which doesn't exist) |
Your First JSX Exercise (do this right now!)
Replace everything inside the return of App.tsx with this beautiful example:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
function App() { const name = "Webliance"; const city = "Mumbai"; const temperature = 28; const isRaining = false; return ( <> <h1 style={{ color: "#646cff", textAlign: "center" }}> Hello {name.toUpperCase()} from {city}! 🌆 </h1> <p> Current temperature in {city}: {temperature}°C —{" "} {isRaining ? "It's raining! ☔" : "Perfect weather! ☀️"} </p> <button style={{ padding: "12px 24px", fontSize: "18px", backgroundColor: "#646cff", color: "white", border: "none", borderRadius: "8px", cursor: "pointer", marginTop: "20px" }} > Click me, {name}! </button> {/* Small list example */} <ul style={{ marginTop: "30px" }}> {["React", "Vite", "TypeScript", "Tailwind"].map((skill) => ( <li key={skill} style={{ fontSize: "18px" }}> Learning {skill} right now! 🔥 </li> ))} </ul> </> ); } |
Save the file → see your beautiful personalized page update instantly! 🎉
Summary – Chapter 2 Key Takeaways
- JSX = HTML-like syntax inside JavaScript
- It gets converted to React.createElement() calls
- Must follow strict rules: camelCase attributes, closed tags, one root element, {} for JS expressions
- Use {} to embed any JavaScript expression
- Components start with Capital letter
- JSX is not HTML — it’s more powerful!
