What is JSX, and why is it used in React?

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like code in React components.

const greeting = <h1>Hello, React!</h1>;

Under the hood, this is converted by Babel into:

const greeting = React.createElement('h1', null, 'Hello, React!');

✅ Why JSX?

• Makes components more readable.
• Helps catch syntax errors early.
• Keeps logic + markup in one place (component scope).

⚠️ Note

JSX isn’t mandatory, but it’s the most common way to define React UIs.