When I first saw JSX, I thought, “Oh cool, HTML in JavaScript.” Then I tried adding a class attribute, and React was like, “How dare you.” JSX looks like HTML, but the minute you treat it like HTML, it bites. Hard. I’ve lost hours to silly mistakes—forgetting curly braces, messing up attribute names, trying to loop like I was writing plain JavaScript. But once you get the feel for JSX (and make peace with its quirks), it becomes one of the reasons React is so fun to write. This lesson is your survival guide for JSX. Let’s dig into it.

JSX Isn’t HTML, But It’s Close Enough

React’s JSX syntax might look like HTML, but it’s not the same beast. Think of it more like HTML flavored JavaScript. You’re not writing markup—you’re writing function return values that look like markup.

          return <h1>Hello, world!</h1>;
        

Under the hood, that’s getting transformed by a compiler (like Babel) into something like:

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

So yeah, JSX is syntactic sugar. Sweet, useful, necessary sugar. But here’s the catch: since it’s JavaScript, it plays by JS rules. You can’t use reserved HTML words like class. Instead, it’s className. Want to style something inline? That’s a JS object now.

If you’re curious about how this compilation works, Babel’s live REPL is an awesome place to see JSX in action.

Embedding JavaScript in JSX: `{}` My Old Friend

One of JSX’s superpowers is how seamlessly you can embed JavaScript. You just wrap expressions in {}. No weird syntax. No templating languages. Just good ol’ JS.

          const name = "React";
return <h1>Hello, {name}!</h1>;
        

Simple, right? But beware: only expressions work. That means no if statements, no loops, no assignments. I once tried to write an if statement directly inside JSX. React was... not amused.

Instead, you use ternaries, short-circuiting, and mapping:

          {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
        

          {items.map(item => <li key={item.id}>{item.name}</li>)}
        

JSX makes your UI dynamic, and curly braces are your entry ticket. But keep it readable. Nesting ternaries inside maps inside components? That’s how React dreams turn into maintenance nightmares.

Common JSX Mistakes (And How I Made All of Them)

Let’s do a quick rundown of rookie mistakes I’ve made (and how you can avoid them):

Using `class` instead of `className`* Old habits from HTML die hard. JSX wants className.

Forgetting to return JSX from functions* If you forget a return in an arrow function, React just renders undefined. No error. Just silence.

Trying to render objects* JSX can’t render raw objects. If you do this:

            <p>{user}</p>
        

You’ll get [object Object], which is just React’s polite way of saying, “Try again.”

Putting logic in the wrong place* JSX is for rendering, not decision-making. Keep the logic in your component functions. Don’t write JavaScript essays inside your return statements.

Mistakes are part of the learning curve. The good news? Once you trip over these a few times, they become second nature. And you start catching them with a kind of sixth sense.

Next, we’ll dive into the real engine behind React’s data flow: **Props and the “Data Down” Philosophy**. It’s how components talk to each other—and it’s sneakily powerful.