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:

<h1>Hello World</h1>

React JSX:

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):

React.createElement('h1', null, 'Hello World');

With JSX (Easy to read):

<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:

<img src="photo.jpg">
<br>

In JSX, you MUST close them:

<img src="photo.jpg" />
<br />

2. One Parent Element

Your JSX must have ONE parent element:

❌ Wrong:

return (
  <h1>Hello</h1>
  <p>Welcome</p>
);

✅ Correct:

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"

<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 { }:

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

More Examples:

// 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:

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:

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

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

Or inline:

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

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

Complete Example

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!