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>Helloh1>
    <p>Welcome to Reactp>
  div>
);

❌ Incorrect:

return (
  <h1>Helloh1>
  <p>Welcome to Reactp>
);

Fix: Wrap elements inside a

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 .