What Is JSX in React? Explained for Beginners

If you have started learning React, you have probably seen code that looks like HTML sitting right inside a JavaScript file. That mix is called JSX, and it can look strange the first time you see it. In plain words: JSX is a special syntax that lets you write HTML-like markup inside your JavaScript code, so you can describe what a piece of your webpage should look like without leaving your JavaScript file. This guide explains what JSX is, why React uses it, and how to write your first JSX code, one small example at a time.

What Is JSX?

JSX stands for JavaScript XML. It is not a separate language. It is an extension to JavaScript that lets you write tags like <div> or <p> directly in your JavaScript code, the same way you would write them in an HTML file. Browsers cannot read JSX directly. A tool called a compiler (usually Babel, working behind the scenes when you use Create React App or Vite) turns your JSX into plain JavaScript before the browser ever sees it.

In short: you write JSX because it is easier for humans to read and write, and the build tools convert it into JavaScript that the browser understands.

Why Does React Use JSX?

React's whole job is to describe what your page should look like, and JSX makes that description easy to write and easy to read. Here is why most React developers prefer it:

• It looks like HTML, so it is easy to picture the layout of your page just by reading the code.
• You can mix markup and JavaScript logic in the same place, instead of jumping between separate files.
• It catches many mistakes early, such as typos in tag names, before your code even runs.
• It is not required. You could write React without JSX, but the alternative is much harder to read, as you will see below.

Your First JSX Example

Here is a tiny JSX example. It creates a heading and a paragraph, and stores them in a variable called greeting.

function Greeting() {
  const greeting = (
    <div>
      <h1>Hello, world!</h1>
      <p>Welcome to your first JSX example.</p>
    </div>
  );
  return greeting;
}

Line by line: function Greeting() defines a React component, which is just a JavaScript function that returns some markup. Inside it, const greeting = (...) stores a block of JSX in a variable, wrapped in parentheses purely so the multi-line code stays readable. The <div> tag wraps everything inside it, because JSX requires a single root element (more on that rule below). The <h1> and <p> tags work exactly like they do in HTML. Finally, return greeting; hands that markup back to React so it can be shown on the page.

The Rules of JSX

JSX looks like HTML, but it has its own strict rules. Beginners usually hit these four first.

1. Every JSX block needs one root element

You cannot return two sibling tags side by side. They must share a single parent.

// This causes an error: two top-level tags
return (
  <h1>Hello</h1>
  <p>Welcome</p>
);

// This works: both tags share one parent
return (
  <div>
    <h1>Hello</h1>
    <p>Welcome</p>
  </div>
);

The first block fails because React cannot return two separate elements at once. The second block fixes this by wrapping both tags inside a single <div>. If you do not want an extra <div> in your final HTML, you can use an empty tag written as <>...</> instead, called a Fragment; it groups elements without adding any extra markup.

2. Every tag must be closed

In plain HTML, tags like <img> or <br> can be left open. In JSX, every tag must close itself, usually by adding a slash before the final angle bracket.

<img src="cat.png" alt="A cat" />
<br />
<input type="text" />

Notice the /> at the end of each tag. That slash tells JSX the tag is self-closing, meaning it has no children and does not need a separate closing tag.

3. Attributes use camelCase

A handful of HTML attributes are renamed in JSX because they clash with reserved JavaScript words or naming conventions.

4. JSX expressions must return one value

A component's JSX ultimately has to evaluate to a single value that React can render, which is exactly why rule 1 (one root element) exists in the first place.

Using JavaScript Inside JSX with Curly Braces

The real power of JSX is that you can drop plain JavaScript into your markup by wrapping it in curly braces { }. Anything inside the braces is treated as JavaScript, not text.

function UserCard() {
  const name = "Amara";
  const age = 27;

  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Next year, {name} will be {age + 1}.</p>
    </div>
  );
}

Here, name and age are normal JavaScript variables defined above the return statement. Inside the JSX, {name} and {age} insert the current value of each variable into the page. The line {age + 1} shows that you can put any JavaScript expression inside the curly braces, including simple math, and JSX will display the result. Note that className is used instead of class, following the rule covered above.

What JSX Turns Into Behind the Scenes

It helps to know that JSX is just a shortcut. Every JSX tag actually compiles down to a plain JavaScript function call named React.createElement(). Here is the same code written both ways.

// What you write with JSX
const element = <h1 className="title">Hello!</h1>;

// What it becomes after compiling (roughly)
const element = React.createElement(
  "h1",
  { className: "title" },
  "Hello!"
);

React.createElement("h1", { className: "title" }, "Hello!") takes three pieces: the tag name ("h1"), an object of attributes ({ className: "title" }), and the content inside the tag ("Hello!"). JSX simply lets you skip writing this function call by hand and use familiar HTML-like tags instead. You do not need to memorize createElement; it is just useful to know that JSX is not magic, it is a shorter way to write regular JavaScript.

Common JSX Mistakes Beginners Make

• Forgetting to wrap sibling elements in one parent tag or a Fragment (<>...</>).
• Writing class instead of className, which React will silently ignore.
• Leaving a tag unclosed, such as <img> instead of <img />.
• Trying to insert a JavaScript object directly into JSX text, like {user}, when you meant {user.name}. React cannot render a plain object and will throw an error.
• Using curly braces for strings you actually want shown as plain text, such as writing {"Hello"} when just writing Hello would do.

Practice: Try It Yourself

You do not need to install anything to experiment. Open an online playground like CodeSandbox or StackBlitz, choose a React template, and try changing the UserCard example above: add a new field, insert a curly-brace expression, or intentionally break one of the JSX rules to see the error message React gives you. Making mistakes on purpose is one of the fastest ways to understand a rule.

JSX can feel unfamiliar for the first day or two, but it quickly becomes second nature: HTML-like tags for structure, curly braces whenever you need real JavaScript. Once it clicks, you will find it faster to read a component's JSX than to imagine the same UI described in separate HTML and JavaScript files.