JSX in React: Writing HTML Inside JavaScript Explained

What is JSX?

JSX (JavaScript XML) is a syntax extension that allows you to write HTML inside JavaScript. It makes React components more readable and expressive.

JSX Example:

const element = <h1>Hello, JSX!</h1>; 

Why Use JSX?

1. Readable & Intuitive – Looks like HTML inside JavaScript.
2. Prevents XSS Attacks – JSX escapes values automatically.
3. Full JavaScript Power – You can use JavaScript inside JSX.

JSX Syntax Rules

1. Only One Parent Element

✅ Correct:

return ( <div> <h1>Hello</h1> <p>Welcome to React</p> </div> ); 

❌ Incorrect:

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

Fix: Wrap elements inside a <div> or <> (fragment).

2. Use className Instead of class

✅ Correct:

return <h1 className="title">Hello, JSX!</h1>; 

❌ Incorrect:

return <h1 class="title">Hello, JSX!</h1>; 

Why? class is a reserved keyword in JavaScript.

3. Expressions in JSX Must Be Inside {}

✅ Correct:

const name = "React"; return <h1>Welcome to {name}!</h1>; 

❌ Incorrect:

const name = "React"; return <h1>Welcome to name!</h1>; 

4. Self-Closing Tags for Elements Without Children

✅ Correct:

return <img src="logo.png" alt="React Logo" />; 

❌ Incorrect:

return <img src="logo.png" alt="React Logo"></img>; 

Using JavaScript Inside JSX

Example: Dynamic Content in JSX

const age = 25; return <p>{age >= 18 ? "Adult" : "Minor"}</p>; 

Example: Calling Functions in JSX

function getGreeting(name) { return `Hello, ${name}!`; } return <h1>{getGreeting("React")}</h1>; 

JSX Without Babel (Pure React)

Under the hood, JSX compiles into React.createElement().

JSX:

const element = <h1>Hello, JSX!</h1>; 

Compiles to:

const element = React.createElement("h1", null, "Hello, JSX!"); 

JSX just makes writing React easier!

Summary

• JSX lets you write HTML inside JavaScript.
• Must have one parent element.
• Use {} for JavaScript expressions.
• Use className instead of class.
• Self-close elements like <img />.