7. What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows us to write HTML-like structures directly inside our JavaScript code.

Makes code readable and maintainable.
Looks like HTML but has the power of JavaScript.
Later converted into standard JavaScript by Babel.

<h1>Hello React</h1>

8. JSX Compilation Diagram

JSX CODE

↓

BABEL COMPILER

↓

JAVASCRIPT CODE

↓

BROWSER OUTPUT

Developer writes JSX → Babel converts it to React.createElement() → Browser displays the UI.

9. JSX Rules (Part 1)

Rule 1 — Return One Parent Element

// Correct ✅
return (
  <div>
    <h1>Hello</h1>
    <p>Welcome</p>
  </div>
);

Rule 2 — className vs class

Since class is a reserved keyword in JS, JSX uses className.

<div className="box"></div>

10. JSX Rules (Part 2)

Rule 3 — Close All Tags

All tags must be closed, including self-closing tags like <img /> or <br />.

<img src="logo.png" />

Rule 4 — JS Inside Curly Braces

You can embed any JavaScript expression inside { }.

const name = "John";
<h1>Hello {name}</h1>

11. JSX Basic Syntax

function App() {
  const name = "Ravi";
  return (
    <div>
      <h1>Welcome to React</h1>
      <p>Hello {name}</p>
    </div>
  );
}
export default App;

Output: Welcome to React
Hello Ravi

12. JSX with Expressions

You can perform math or logic directly inside the JSX structure.

function App() {
  const a = 5;
  const b = 3;

  return (
    <h1>Sum = {a + b}</h1>
  );
}

Output: Sum = 8

13. JSX vs HTML

Feature	HTML	JSX
Syntax	Standard Markup	HTML inside JS
Attribute	class	className
Closing	Optional	Required
JS Inside	Not Allowed	Allowed via { }

14. JSX vs JS DOM

Feature	JS DOM	JSX
UI Creation	Manual / Tedious	Declarative / Simple
Code Length	Long	Short
Readability	Hard to follow	Easy (looks like HTML)

// JS DOM
const el = document.createElement("h1");
el.innerText = "Hello";

// JSX
<h1>Hello</h1>

15. Practice Tasks

Task 1: Display "Hello React" and "Welcome to JSX".

Task 2: Create a profile: Name, Age, Course.

Task 3: Show 10 + 5 result using {} braces.

Task 4: Create a list of 3 fruits.

16. JSX Learning Flow

React Setup → Components → JSX (Complete)

↓

Next: Props → State → Hooks