JSX in React: A Complete Beginner’s Guide

When learning ReactJS, one of the first concepts you will come across is JSX. At first, it may look confusing because it appears to mix HTML inside JavaScript. But once you understand JSX, building React applications becomes much easier, faster, and more organized. In this guide, you will learn everything about JSX (JavaScript XML)—what it is, how it works, why it is used, rules, benefits, examples, differences from HTML, and more.

Let’s begin.

What Is JSX (JavaScript XML)?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript used in React to describe what the UI should look like. Example below :

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

In the above example it looks like HTML, but it is not HTML. It is JSX, a way of writing UI markup directly inside JavaScript.

Why is JSX powerful?

• It makes UI code easier to read
• It allows you to embed dynamic values
• You can write HTML-like code inside JavaScript
• React transforms JSX into JavaScript using Babel

Essentially JSX = JavaScript + HTML-like syntax

Why Did React Create JSX?

React uses components, and each component returns UI.Without JSX, your code would look like this:

const element = React.createElement(
  "h1",
  null,
  "Hello World"
);

With JSX the code becomes like this:

const element = <h1>Hello World</h1>;

JSX solves many problems like:

• Makes UI structure visible
• Reduces code complexity
• Improves developer productivity
• Helps React create Virtual DOM efficiently

This is why almost all React projects use JSX.

How JSX Works (Behind the Scenes)

Your browser cannot understand JSX directly so React uses Babel, a JavaScript compiler, which converts JSX into regular JavaScript.The below code is written in JSX:

<h1>Hello</h1>;

Babel converts above code to :

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

So JSX is not mandatory, but it makes coding easier.

Embedding Expressions in JSX

One of the best parts of JSX is that you can embed JavaScript expressions inside it using curly braces {}.

Example for JSX Using variables

const name = "Dipti";
const element = <h1>Hello, {name}</h1>;

Example for JSX using functions

function greet() {
  return "Welcome to React";
}
const element = <p>{greet()}</p>;

Example for JSX Calculations

const element = <p>Total: {10 + 20}</p>;

Example for Conditional expressions

const loggedIn = true;
const element = (
  <h2>{loggedIn ? "You are logged in" : "Please login"}</h2>
);

Anything inside {} must return a value.

JSX Rules You Must Know

JSX looks like HTML, but it has strict rules.

• One parent element: You must return only ONE parent element.

The below code will not work as it is not wrapped inside div or React Fragment (<>)

return (
  <h1>Hi</h1>
  <p>Welcome</p>
);

The below code works as it is wrapped inside <div> or React Fragment:

return (
  <>
    <h1>Hi</h1>
    <p>Welcome</p>
  </>
);

• camelCase Attributes : JSX attributes use camelCase.Below in table you can compare what JSX attributes we have in comparison to HTML attributes.

Below is the example of JSX attributes:

<div className="box"></div>
<label htmlFor="name"></label>
<button onClick={showAlert}>Click</button>

• Use of {} for JS expressions :J avaScript expressions go inside {}

<h1>{5 + 10}</h1>
<p>{user.name}</p>

• Properly closed JSX tags : JSX must be closed properly.These are self-closing tags:

<img />
<input />
<br />

• JSX without quotes : No quotes around JavaScript expressions.

Below code is wrong as using quotes around JavaScript expressions.

<h1>"{title}"</h1>

Below code is correct as not using quotes around JavaScript expressions.

<h1>{title}</h1>

JSX vs HTML — Key Differences

JSX looks similar to HTML, but it has important differences.

Below is the example of JSX code :

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

Below is the example of HTML code :

<button onclick="handleClick()">Click</button>

How to Write Comments in JSX

Comments in JSX also follow different rules.

• In a component (inside JSX) : Use {/ comment /}

Eample for above code :

return (
  <div>
    {/ This is a JSX comment /}
    <h1>Hello</h1>
  </div>
);

• In JavaScript part use regular JavaScript comments:

Below is the example :

// This is a JS comment
const name = "React";

JSX Allows Conditional Rendering

JSX makes conditions easy by using ternary operator and using && operator. Below are the codes which make the conditional rendering easy.

Example of using ternary operator for conditional rendering :

const isLoggedIn = false;
return (
  <p>{isLoggedIn ? "Welcome" : "Please Login"}</p>
);

Example of using && operator for conditional rendering :

const show = true;
return (
  <div>
    {show && <p>Visible now!</p>}
  </div>
);

JSX Allows Looping with .map()

React uses JavaScript’s .map() to loop inside JSX . This is better than using loops in HTML.Below is the example

const items = ["Apple", "Banana", "Mango"];

return (
  <ul>
    {items.map((item) => (
      <li>{item}</li>
    ))}
  </ul>
);

JSX in Functional Components

A simple React component using JSX:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
export default Welcome;

Example of using the Component

<Welcome name="Dipti" />

JSX Makes UI Declarative

JSX focuses on what UI should look like, not how to update the DOM.Below is the example :

<div>
  <h1>Welcome</h1>
  <p>This is JSX</p>
</div>

React takes care of updating Virtual DOM, rendering changes, updating only the required parts, improving performance

JSX Makes Code Cleaner and Maintainable

JSX keeps HTML structure, JavaScript logic, styles, events all inside a component.

Example:

function UserCard({ name, age }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <button onClick={() => alert(name)}>Show Name</button>
    </div>
  );
}

This makes React components reusable, readable, organized.

Advantages of JSX

• Looks like HTML – easy to learn
• Embeds JavaScript easily
• Helps create dynamic UI
• Works perfectly with React components
• Helps create cleaner code
• Converts to fast, optimized JavaScript
• Supports conditional rendering
• Makes loops and logic easier
• Allows writing UI and logic in one place
• JSX is one of the main reasons React is so popular.

Disadvantages of JSX

• Beginners find the syntax confusing
• Requires a build setup (Babel, Webpack, Vite)
• Cannot run directly in the browser without compilation

JSX is a fundamental concept in ReactJS that makes building user interfaces cleaner, faster, and more efficient.
Although it looks similar to HTML, it follows JavaScript rules and provides the powerful ability to embed expressions, conditions, loops, and component structures.

By understanding:

• What JSX is
• Why React uses JSX
• JSX rules
• Differences between JSX and HTML
• How to write comments
• How to embed JavaScript expressions
• How to use JSX with components

—you now have a strong foundation to build real-world React applications.

If you are learning React, mastering JSX is your first major step.