React JSX

JSX is how we write HTML inside JavaScript in React. It looks like HTML, but it's actually JavaScript!

What is JSX?

JSX stands for JavaScript XML. It lets you write HTML-like code inside JavaScript.

### Normal HTML: ```html <h1>Hello World</h1> ```

### React JSX: ```javascript const element = <h1>Hello World</h1>; ```

See? It looks the same! But this is actually JavaScript.

Why JSX is Useful

JSX makes React code easier to read and write. Compare these:

### Without JSX (Hard to read): ```javascript React.createElement('h1', null, 'Hello World'); ```

### With JSX (Easy to read): ```javascript <h1>Hello World</h1> ```

Which one is easier? JSX, right?

JSX Rules

JSX has a few simple rules:

### 1. Close All Tags

In HTML, some tags don't need closing: ```html <img src="photo.jpg"> <br> ```

In JSX, you MUST close them: ```javascript <img src="photo.jpg" /> <br /> ```

### 2. One Parent Element

Your JSX must have ONE parent element:

❌ **Wrong:** ```javascript return ( <h1>Hello</h1> <p>Welcome</p> ); ```

✅ **Correct:** ```javascript return ( <div> <h1>Hello</h1> <p>Welcome</p> </div> ); ```

### 3. Use className Instead of class

In HTML you write: `class="big"`

In JSX you write: `className="big"`

```javascript <h1 className="big">Hello</h1> ```

Why? Because "class" is a reserved word in JavaScript.

Putting JavaScript Inside JSX

You can put any JavaScript inside JSX using curly braces `{ }`:

```javascript const name = "John"; const element = <h1>Hello {name}!</h1>; // Shows: Hello John! ```

### More Examples:

```javascript // Math <p>2 + 2 = {2 + 2}</p> // Shows: 2 + 2 = 4

// Variables const age = 25; <p>I am {age} years old</p>

// Functions function getGreeting() { return "Good Morning"; } <h1>{getGreeting()}</h1> ```

JSX with Conditions

You can use conditions in JSX:

```javascript const isLoggedIn = true;

return ( <div> {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please login</h1>} </div> ); ```

This is called a "ternary operator". It's like an if-else in one line.

JSX with Styles

You can add styles in JSX:

```javascript const divStyle = { color: 'blue', backgroundColor: 'lightgray' };

<div style={divStyle}>Hello!</div> ```

Or inline:

```javascript <div style={{color: 'red', fontSize: '20px'}}>Hello!</div> ```

Notice the double braces `{{ }}` - one for JSX, one for the object!

Complete Example

```javascript function App() { const name = "Ahmad"; const age = 20; const isStudent = true;

return ( <div className="container"> <h1>Hello {name}!</h1> <p>You are {age} years old.</p> {isStudent && <p>You are a student.</p>} <img src="photo.jpg" alt="Profile" /> </div> ); } ```

Remember

- JSX looks like HTML but is actually JavaScript - Close all tags - Use `{ }` to put JavaScript inside JSX - Use `className` instead of `class` - Must have one parent element

> Next lesson: We'll learn about Components - the building blocks of React!