What is JSX"

What is JSX?

JSX stands for JavaScript XML. It's a syntax extension for JavaScript that lets you write HTML-like code inside your JavaScript files.

React uses JSX to describe what the UI should look like. Instead of separating HTML and JavaScript into different files, React combines
them — because the logic and the markup are tightly connected.

A Simple Example

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

This looks like HTML, but it's actually JavaScript. Babel (a tool that runs during your build) transforms it into:

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

You never have to write React.createElement yourself — JSX does it for you.

JSX is an Expression

JSX expressions produce values, just like any other JavaScript expression. That means you can:

• Assign JSX to variables
• Return JSX from functions
• Use JSX inside if statements and loops

function getGreeting(name) { if (name) { return <h1>Hello, {name}!</h1>; }
return <h1>Hello, stranger!</h1>; }

Embedding JavaScript in JSX

Use curly braces {} to embed any JavaScript expression inside JSX:

const name = "Code350"; const element = <h1>Welcome to {name}</h1>;

You can put any valid JavaScript expression inside the braces — math, function calls, ternaries:

<p>2 + 2 = {2 + 2}</p> <p>{isLoggedIn ? "Welcome back!" : "Please sign in"}</p> <p>Today is {new Date().toLocaleDateString()}</p>

Key Rules of JSX

1. Return a single root element. Wrap multiple elements in a <div> or a fragment <>...</>:

// ✅ This works
return (
<> <h1>Title</h1> <p>Paragraph</p> </> );

// ❌ This breaks
return ( <h1>Title</h1>
<p>Paragraph</p>
);

2. Close all tags. Self-closing tags like <img> and <input> must end with />:

<img src="photo.jpg" alt="A photo" /> <input type="text" />

3. Use className instead of class. Since class is a reserved word in JavaScript:

<div className="container">Hello</div>

4. Use camelCase for attributes. HTML attributes like onclick become onClick, tabindex becomes tabIndex:

<button onClick={handleClick}>Click me</button>

JSX is Not HTML

It looks like HTML, but there are differences. JSX is closer to JavaScript, so it follows JavaScript conventions:

┌────────────────────┬──────────────────────────┐
│ HTML │ JSX │
├────────────────────┼──────────────────────────┤ │ class │ className │ ├────────────────────┼──────────────────────────┤ │ for │ htmlFor │ ├────────────────────┼──────────────────────────┤ │ onclick │ onClick │ ├────────────────────┼──────────────────────────┤
│ tabindex │ tabIndex │ ├────────────────────┼──────────────────────────┤
│ style="color: red" │ style={{ color: "red" }} │
└────────────────────┴──────────────────────────┘

Try It Yourself

In the editor on the right, create a component that renders:

• Your name in an <h1>
• A short bio in a <p> tag
• Use at least one JavaScript expression with {}

export default function AboutMe() { const name = "Your Name"; const hobby = "building cool stuff";

return (
  <div>                                                                                                                                 
    <h1>Hi, I'm {name}</h1>                             
    <p>I love {hobby}.</p>
  </div>
);

}

Recap

• JSX lets you write UI markup inside JavaScript
• Use {} to embed JavaScript expressions
• Always return a single root element
• Use className instead of class
• Close all tags, including self-closing ones

You now know the foundation of every React component. Next up, we'll build a real component from scratch.