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 = Hello, JSX!; Why Use JSX? Readable & Intuitive – Looks like HTML inside JavaScript. Prevents XSS Attacks – JSX escapes values automatically. Full JavaScript Power – You can use JavaScript inside JSX. JSX Syntax Rules 1. Only One Parent Element ✅ Correct: return ( Hello Welcome to React ); ❌ Incorrect: return ( Hello Welcome to React ); Fix: Wrap elements inside a or (fragment). 2. Use className Instead of class ✅ Correct: return Hello, JSX!; ❌ Incorrect: return Hello, JSX!; Why? class is a reserved keyword in JavaScript. 3. Expressions in JSX Must Be Inside {} ✅ Correct: const name = "React"; return Welcome to {name}!; ❌ Incorrect: const name = "React"; return Welcome to name!; 4. Self-Closing Tags for Elements Without Children ✅ Correct: return ; ❌ Incorrect: return ; Using JavaScript Inside JSX Example: Dynamic Content in JSX const age = 25; return {age >= 18 ? "Adult" : "Minor"}; Example: Calling Functions in JSX function getGreeting(name) { return `Hello, ${name}!`; } return {getGreeting("React")}; JSX Without Babel (Pure React) Under the hood, JSX compiles into React.createElement(). JSX: const element = Hello, JSX!; 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 .

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

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

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

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

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

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

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

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

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

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

function getGreeting(name) {
  return `Hello, ${name}!`;
}

return <h1>{getGreeting("React")}h1>;

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

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