What Is JSX in React? A Beginner's Explanation

Quick Answer

JSX is a syntax extension for JavaScript that lets you write HTML-like tags inside your React code. It is not a separate language; a build tool converts every JSX tag into a plain React.createElement() call before it runs. JSX makes your UI code far easier to read, and it lets you drop real JavaScript values into markup using curly braces.

What Is JSX in React?

If you have started learning React, one of the first things you notice is code that looks like HTML sitting right inside a JavaScript file. That is JSX. So what is JSX? It is a syntax extension for JavaScript that lets you describe what your user interface should look like using tags such as <div> and <h1>, mixed freely with normal JavaScript.

JSX is not HTML, and it is not a brand-new language you have to learn from scratch. It is a friendlier way to create React elements. Before your code runs in the browser, a build tool converts every JSX tag into a plain JavaScript function call. In this guide we will see exactly what that call looks like, how to put values into your markup, and the small differences that trip up beginners.

JSX Is Syntactic Sugar for React.createElement

People call JSX syntactic sugar. That means it does not add any new power to the language; it just makes existing code shorter and easier to read. Under the hood, React builds the screen using a function called React.createElement. JSX is simply a nicer way to write those same calls.

Here is a small component written the hard way, without JSX:

function Welcome() {
  return React.createElement(
    'div',
    { className: 'greeting' },
    React.createElement('h1', null, 'Hello, React!'),
    React.createElement('p', null, 'Made without JSX.')
  );
}

And here is the exact same component written with JSX:

function Welcome() {
  return (
    <div className="greeting">
      <h1>Hello, React!</h1>
      <p>Made with JSX.</p>
    </div>
  );
}

Both versions produce identical output. The JSX version is easier to read, and the gap grows as your components get bigger. A tool such as Babel does the translation for you, turning every tag back into a React.createElement call before the browser ever sees it.

Embedding JavaScript with Curly Braces

JSX becomes powerful when you drop real JavaScript into your markup. You do this with curly braces { }. Anything between the braces is treated as a JavaScript expression, and its result is placed into the output.

function Greeting() {
  const name = 'Aarav';
  const hour = new Date().getHours();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>2 + 2 = {2 + 2}</p>
      <p>{hour < 12 ? 'Good morning' : 'Good day'}</p>
    </div>
  );
}

Notice the word expression. You can put a variable, a sum, a function call, or a ternary inside the braces because each of those produces a value. You cannot put a full statement such as an if block or a for loop directly inside JSX, because those do not return a value. We will handle those cases with a couple of tricks further down.

Attribute Differences: className, htmlFor and camelCase

JSX looks like HTML, but a few attribute names are different. This is because JSX is really JavaScript, and some HTML attribute names are reserved words or use spelling that JavaScript does not like. The two you will meet first are class and for.

function LoginField() {
  return (
    <div>
      <label htmlFor="email" className="field-label">Email</label>
      <input id="email" type="email" onClick={() => console.log('clicked')} />
    </div>
  );
}

A good rule of thumb: if an HTML attribute has more than one word, it usually becomes camelCase in JSX. Plain single-word attributes like id, type, src and href stay exactly the same.

Rendering Lists with map and keys

Real apps show lists: courses, products, chat messages. In JSX you turn an array into elements using the JavaScript map method, all inside curly braces.

function CourseList() {
  const courses = ['HTML', 'CSS', 'React'];

  return (
    <ul>
      {courses.map((course) => (
        <li key={course}>{course}</li>
      ))}
    </ul>
  );
}

See the key attribute? React needs a unique key on each list item so it can track which items changed, were added, or were removed. Skipping keys still renders the list, but React prints a warning and updates can behave oddly. Use a stable, unique value such as a database id. Avoid using the array index as the key when the list can reorder, because that can cause the wrong items to update.

Showing Things Conditionally

Because you can only use expressions inside braces, React developers rely on two patterns for conditional UI: the ternary operator and the logical && operator.

function Status({ isLoggedIn, messageCount }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
      {messageCount > 0 && <p>You have {messageCount} new messages.</p>}
    </div>
  );
}

The ternary (condition ? a : b) is for either/or choices. The && pattern shows something only when the condition is true, and renders nothing when it is false. One gotcha: with &&, a number like 0 will actually print on screen, so compare to get a real boolean, for example messageCount > 0 && ... rather than just messageCount && ....

Common JSX Gotchas for Beginners

A handful of small rules cause most early confusion. Keep this short checklist handy:

• Return one root element. A component must return a single parent. Wrap siblings in a <div> or an empty fragment <>...</>.
• Close every tag. Even self-closing tags need a slash: <img />, <br />, <input />.
• Comments use braces. Inside JSX write {/* like this */}, not regular HTML comments.
• Inline styles are objects. Use style={{ color: 'red', fontSize: '16px' }} with camelCase property names, not a plain string.
• className, not class. This is the single most common beginner typo, and the browser will silently ignore class in JSX.

Should You Use JSX? A Clear Recommendation

Yes. You can technically build React apps by calling React.createElement by hand, but almost nobody does. JSX is the standard: every tutorial and real codebase uses it, and modern build tools set it up for you automatically. Learning it is not optional if you want to work with React.

The good news is that JSX is mostly just HTML plus a few rules: curly braces for JavaScript, className instead of class, camelCase attributes, and map plus key for lists. Once those click, JSX feels natural. If you want a structured, hands-on path from your first component to full projects, work through our free React course. Make sure your JavaScript basics are solid first, since JSX is really JavaScript in disguise.

Frequently Asked Questions