JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows developers to write UI components in a syntax similar to HTML, making code more readable and maintainable. JSX is not required in React, but it’s widely used because it simplifies UI development.

---

What is JSX?

JSX lets you write HTML-like code inside JavaScript. Under the hood, it gets compiled into standard JavaScript function calls.

Example: JSX vs. JavaScript

✅ JSX (Common in React)

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

❌ Without JSX (Using React.createElement)

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

JSX makes it easier to structure UI components visually, instead of writing raw JavaScript functions.

---

How JSX Works

JSX is not valid JavaScript—it must be compiled by a tool like Babel before the browser can understand it. Babel transforms JSX into React.createElement() calls.

For example, this JSX:

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

Compiles to:

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

This creates a JavaScript object representing the DOM structure, which React uses for efficient updates.

---

JSX Rules & Best Practices

1️⃣ JSX Must Return a Single Parent Element

return (
  <div>
    <h1>Title</h1>
    <p>Some text</p>
  </div>
);

If multiple elements are needed, wrap them inside a <div> or use fragments (<>...</>):

return (
  <>
    <h1>Title</h1>
    <p>Some text</p>
  </>
);

2️⃣ Embedding JavaScript Expressions in JSX

Use curly braces {} to insert JavaScript inside JSX:

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

3️⃣ Adding Attributes in JSX

JSX uses camelCase for attributes instead of HTML-style attributes.

<img src="image.png" alt="Description" />

4️⃣ Conditional Rendering in JSX

Using ternary operators:

const isLoggedIn = true;
const message = <h1>{isLoggedIn ? "Welcome back!" : "Please log in"}</h1>;

Using && (short-circuit evaluation):

{isLoggedIn && <p>You have new messages</p>}

---

JSX vs. HTML: Key Differences

JSX	HTML
className="btn"	class="btn"
{expression} for JavaScript	No JavaScript inside HTML
Self-closing tags required (<img />)	Self-closing tags optional (<img>)
CamelCase attributes (onClick)	Lowercase (onclick)

---

Summary

• JSX lets you write UI code in a familiar, HTML-like syntax within JavaScript.
• It compiles to React.createElement() calls for React to process efficiently.
• JSX requires a single parent element and follows JavaScript syntax rules.
• You can embed JavaScript expressions and conditionally render elements using JSX.

References

1. React Docs – JSX
2. Understanding JSX in React
3. Babel JSX Compiler