JSX Syntax and Rules

⚛️ What is JSX?

JSX stands for JavaScript XML. It's a syntax extension for JavaScript commonly used with React to describe what the UI should look like. Instead of using traditional React.createElement() calls, JSX lets you write HTML-like code inside your JavaScript—making your components more readable and expressive.

🧠 JSX is Not HTML

It may look like HTML, but it’s not the same. JSX gets compiled into JavaScript under the hood. That’s why it has some quirks and rules that are slightly different from HTML.

📄 JSX Basic Syntax

Here’s a simple example of JSX in action:

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

This is equivalent to:

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

📌 JSX Syntax Rules

1️⃣ Return a Single Parent Element

JSX must return one single enclosing tag. You can wrap multiple elements using a <div> or a React Fragment:

// ❌ Invalid
return (
  <h1>Title</h1>
  <p>Subtitle</p>
);

// ✅ Valid using a wrapper div
return (
  <div>
    <h1>Title</h1>
    <p>Subtitle</p>
  </div>
);

// ✅ Valid using Fragment
return (
  <>
    <h1>Title</h1>
    <p>Subtitle</p>
  </>
);

2️⃣ Use camelCase for Attributes

Unlike HTML, JSX uses camelCase for most attributes.

// HTML: <div class="container">
// JSX:  <div className="container">

Other examples:

• onClick instead of onclick
• tabIndex instead of tabindex
• htmlFor instead of for

3️⃣ JavaScript Expressions in Curly Braces

You can embed any JavaScript expression inside JSX by wrapping it in { }.

const name = "Aditya";
const element = <h2>Welcome, {name}! 👋</h2>;

Valid expressions include:

• Variables
• Function calls
• Math operations
• Conditional (ternary) operators

4️⃣ Self-Closing Tags

Just like XML, all tags that don’t have children must be self-closed:

// ✅ Correct
<img src="logo.png" alt="Logo" />

// ❌ Incorrect
<img src="logo.png">

5️⃣ JSX Comments

Want to comment inside JSX? You’ll need to use this syntax:

return (
  <div>
    {/* This is a JSX comment */}
    <p>Visible text</p>
  </div>
);

6️⃣ Conditions in JSX

You can’t use if statements directly in JSX, but you can use:

{loggedIn ? <h2>Welcome!</h2> : <h2>Please Log In</h2>}

{cart.length > 0 && <p>Items in cart: {cart.length}</p>}

🖼️ Styling JSX Elements

You can use inline styles by passing an object to the style attribute:

const styles = {
  color: "white",
  backgroundColor: "blue",
  padding: "10px",
};

<div style={styles}>Styled Box</div>

🧪 JSX Under the Hood

Remember: JSX gets compiled into React.createElement() calls. So this:

<h1>Hello</h1>

Turns into:

React.createElement("h1", null, "Hello");

This means JSX is not required for React—but it sure makes your code prettier and more intuitive ✨.

✅ Wrapping Up

JSX is an essential part of React development. While it looks deceptively like HTML, it’s powered by JavaScript and comes with its own set of rules. Once you understand the quirks and syntax, JSX becomes a powerful tool for writing expressive, clean UI code.

Whether you're building components or full apps, JSX is the bridge between logic and layout. Keep practicing, and you'll be writing elegant JSX in no time! 💻⚛️