If you are new to React, JSX is probably one of the first things you notice.

You may see code like this:

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

At first glance, it looks like HTML written inside JavaScript. But JSX is not HTML, and browsers do not directly understand JSX.

JSX is a syntax that allows React developers to describe the user interface in a familiar and readable way. Before your application runs in the browser, JSX is transformed into JavaScript that React can understand.

In this article, we’ll understand what JSX is, how it works, why React uses it, and the most important JSX rules every React developer should know.

---

What Is JSX?

JSX stands for JavaScript XML.

It is a syntax extension for JavaScript that allows you to write UI-like code inside JavaScript files.

For example:

const title = <h1>Welcome to React</h1>;

JSX makes React components easier to read because the structure of the UI is visible directly in the component code.

Without JSX, describing the same UI would be more verbose.

A simple way to think about JSX is:

JavaScript + UI-like Syntax = JSX

JSX is commonly used with React, but it is important to remember:

JSX itself is not HTML and is not directly understood by the browser.

---

Why Does React Use JSX?

React applications are built by combining JavaScript logic and UI.

For example, a component may contain:

• Variables
• Functions
• Event handlers
• Conditional logic
• Data
• UI structure

JSX allows these things to work naturally together.

React Component
      │
      ├── JavaScript Logic
      │
      └── JSX
            │
            ▼
          UI

This makes it easier to keep the logic responsible for a UI close to the UI itself.

Instead of separating HTML and JavaScript into completely different places, a React component can contain both the UI structure and the logic needed to render it.

---

JSX Looks Like HTML, but It Is Not HTML

Consider this JSX:

<h1>Hello World</h1>

It looks very similar to HTML.

However, JSX is written inside JavaScript and follows JavaScript and React rules.

For example, HTML uses:

<div class="container">

But JSX uses:

<div className="container">

Similarly, some HTML attributes have different names in JSX because JSX is transformed into JavaScript.

A better way to think about JSX is:

HTML-like Syntax
      +
JavaScript Expressions
      ↓
JSX

---

How Does JSX Actually Work?

Browsers understand JavaScript, HTML, and CSS. They do not understand JSX directly.

So JSX must be transformed into regular JavaScript before it reaches the browser.

The process looks like this:

JSX Code
   │
   ▼
Compiler / Build Tool
   │
   ▼
JavaScript
   │
   ▼
Browser

For example, this JSX:

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

is transformed into JavaScript instructions that create a React element.

Conceptually:

JSX
 │
 ▼
React Element Description
 │
 ▼
React Uses It to Build the UI

Modern React projects usually handle this transformation automatically through tools such as Vite, Next.js, and other build systems.

---

JSX Is a Description of the UI

When you write JSX, you are describing what the UI should look like.

For example:

function Profile() {
  return (
    <section>
      <h1>Manjeet</h1>
      <p>React Developer</p>
    </section>
  );
}

Conceptually, this describes:

Profile
   │
   └── section
        ├── h1
        │    └── Manjeet
        │
        └── p
             └── React Developer

React uses this description as part of its rendering process.

---

JavaScript Expressions Inside JSX

One of the most useful features of JSX is that you can insert JavaScript expressions using curly braces.

For example:

const name = "Manjeet";

<h1>Hello, {name}</h1>

The result will display:

Hello, Manjeet

The flow is:

JavaScript Value
      │
      ▼
    {value}
      │
      ▼
Displayed in JSX

You can use expressions such as:

• Variables
• Function calls
• Calculations
• Ternary operators
• Array methods such as map()

For example:

<h1>{user.name}</h1>

<p>{price * quantity}</p>

<p>{isLoggedIn ? "Welcome" : "Please log in"}</p>

---

Statements Cannot Be Written Directly Inside JSX

JSX accepts JavaScript expressions, not regular statements.

For example, this is not valid directly inside JSX:

{
  if (isLoggedIn) {
    return <Dashboard />;
  }
}

Instead, you can use a ternary expression:

{isLoggedIn ? <Dashboard /> : <Login />}

Or handle more complex logic before the return statement:

function App() {
  let content;

  if (isLoggedIn) {
    content = <Dashboard />;
  } else {
    content = <Login />;
  }

  return <main>{content}</main>;
}

This keeps JSX easier to read when the logic becomes more complex.

---

JSX Must Return a Single Parent Structure

A React component needs to return a single root structure.

This is invalid:

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

The elements need to be grouped:

return (
  <div>
    <h1>Hello</h1>
    <p>Welcome</p>
  </div>
);

Conceptually:

div
├── h1
└── p

However, sometimes you do not want to add an unnecessary <div> to the DOM. In that case, you can use a React Fragment.

---

Using Fragments in JSX

A Fragment allows you to group multiple elements without adding an extra DOM element.

For example:

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

Conceptually:

React Component
├── h1
└── p

Fragments are useful when you need to return multiple sibling elements without adding extra markup.

---

JSX Elements Must Be Properly Closed

JSX is stricter than HTML in this area.

Elements must be properly closed.

For example:

<img src="/logo.png" alt="Logo" />
<input type="text" />
<br />

Notice the / at the end of self-closing elements.

For normal elements, both opening and closing tags are required:

<button>Click Me</button>

---

className Instead of class

In HTML, you use:

<div class="card">

In JSX, you use:

<div className="card">

This is one of the most common differences developers notice when moving from HTML to React.

So remember:

HTML       → class
JSX        → className

The value still represents the CSS class applied to the element.

---

JSX Attributes Use JavaScript Naming Conventions

Some JSX attributes use camelCase naming.

For example:

HTML              JSX
--------------------------------
onclick           onClick
tabindex          tabIndex
readonly          readOnly

React event handlers also follow this convention:

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

The event name uses camelCase, and the JavaScript function is passed inside curly braces.

---

Inline Styles in JSX

Inline styles in JSX are written as JavaScript objects.

For example:

<h1 style={{ fontSize: "24px", marginTop: "10px" }}>
  Hello
</h1>

The syntax can initially look confusing because there are two sets of curly braces:

style={{

The outer braces indicate that JavaScript is being used inside JSX.

The inner braces represent a JavaScript object.

Conceptually:

JSX Expression
      │
      ▼
JavaScript Object

CSS property names usually use camelCase:

CSS                 JSX Style
--------------------------------
font-size           fontSize
background-color    backgroundColor
margin-top          marginTop

---

Rendering Lists with JSX

JSX works naturally with JavaScript array methods.

For example:

const users = ["Alice", "Bob", "Charlie"];

You can use map() to create UI elements:

<ul>
  {users.map((user) => (
    <li>{user}</li>
  ))}
</ul>

Conceptually:

Array
  │
  ▼
map()
  │
  ▼
JSX Elements
  │
  ▼
Rendered List

When rendering lists, React also needs a stable key for each item.

A better example would be:

users.map((user) => (
  <li key={user}>{user}</li>
))

In real applications, a unique ID is often the best choice for a key.

---

Conditional Rendering with JSX

JSX allows you to display different UI based on conditions.

A common approach is the ternary operator:

{isLoggedIn ? <Dashboard /> : <Login />}

The flow looks like:

Condition
   │
   ├── true  → Dashboard
   │
   └── false → Login

For conditions where you only need to show something when a value is true, logical && can also be useful:

{isAdmin && <AdminPanel />}

If isAdmin is true, the component is rendered.

If it is false, React does not render that part.

---

Comments in JSX

You cannot write normal JavaScript comments directly inside JSX markup.

Instead, use a JSX comment:

{
  /* This is a JSX comment */
}

For example:

return (
  <div>
    {/* User profile information */}
    <h1>{user.name}</h1>
  </div>
);

This is useful when you need to document a complex section of JSX.

---

JSX and Components

One of the most important features of JSX is that it allows you to use React components like HTML elements.

For example:

function Header() {
  return <header>My Website</header>;
}

You can use the component like this:

function App() {
  return (
    <main>
      <Header />
    </main>
  );
}

Conceptually:

App
 │
 └── Header
      │
      ▼
   header element

Custom React component names should begin with a capital letter.

For example:

<Header />
<UserProfile />
<ProductCard />

A lowercase name is treated differently because lowercase JSX tags generally represent built-in HTML elements.

<div />
<section />
<button />

---

JSX Is Not a Template Language

JSX can look like a template language, but it is much more closely integrated with JavaScript.

For example, you can:

Use Variables
Use Functions
Use Expressions
Map Arrays
Apply Conditions
Pass Props
Handle Events

all within the same component.

A simple mental model is:

JavaScript Logic
       +
JSX UI Description
       ↓
React Component

This is one reason JSX is powerful and widely used in React development.

---

JSX and Props

JSX is also used to pass data to components through props.

For example:

<UserCard name="Manjeet" role="React Developer" />

The component can receive these values:

function UserCard({ name, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

Conceptually:

Parent Component
       │
       │ Props
       ▼
Child Component
       │
       ▼
Render UI

JSX makes component composition easy to read because components can be nested visually.

---

JSX and Children

JSX also supports nested content inside components.

For example:

<Card>
  <h2>React JSX</h2>
  <p>Understanding JSX is important for every React developer.</p>
</Card>

The content inside <Card> can be received as children.

Conceptually:

Card
 │
 └── children
      ├── h2
      └── p

This pattern is commonly used for reusable UI components.

---

A Complete JSX Example

Here is a simple component that combines several JSX concepts:

function UserProfile({ user, isLoggedIn }) {
  return (
    <section className="profile">
      <h1>{user.name}</h1>

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

      {isLoggedIn && (
        <button onClick={() => console.log("Clicked")}>
          View Profile
        </button>
      )}
    </section>
  );
}

This example includes:

• JSX elements
• Props
• JavaScript expressions
• className
• Conditional rendering
• Event handling

The overall flow is:

Props + State
      │
      ▼
JavaScript Logic
      │
      ▼
JSX
      │
      ▼
React UI Description
      │
      ▼
Rendered Interface

---

Common JSX Mistakes

Using class Instead of className

Incorrect:

<div class="container">

Correct:

<div className="container">

---

Forgetting to Close Tags

Incorrect:

<img src="/logo.png">

Correct:

<img src="/logo.png" />

---

Returning Multiple Elements Without Grouping

Incorrect:

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

Correct:

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

---

Using Statements Directly Inside JSX

Incorrect:

{
  if (loggedIn) {
    return <Dashboard />;
  }
}

Use an expression instead:

{loggedIn ? <Dashboard /> : <Login />}

Or move the logic outside the JSX.

---

Forgetting Curly Braces for JavaScript Values

Incorrect:

<h1>name</h1>

This displays the word name.

Correct:

<h1>{name}</h1>

This displays the value stored in the name variable.

---

How JSX Fits Into the React Rendering Process

Here is a simplified flow of what happens when React renders a component:

Component Function
       │
       ▼
JSX Returned
       │
       ▼
JSX Transformed
       │
       ▼
React Element Description
       │
       ▼
React Reconciliation
       │
       ▼
Required DOM Updates
       │
       ▼
Browser Displays UI

When state or props change, React can run the component again and produce a new UI description.

React then compares the new result with the previous UI and determines what needs to change.

This is why JSX is closely connected to concepts such as:

• React rendering
• Re-rendering
• Virtual DOM
• Reconciliation
• Component updates

---

Best Practices for Writing JSX

Keep JSX Readable

Avoid putting too much complex logic directly inside the markup.

If a calculation or condition becomes difficult to read, move it into a variable or helper function.

---

Use Meaningful Components

Instead of creating one very large JSX structure, break your UI into reusable components.

For example:

Dashboard
├── Header
├── Sidebar
├── Statistics
└── ProductList

This makes the code easier to understand and maintain.

---

Use Semantic HTML

When appropriate, use meaningful elements such as:

header
main
nav
section
article
footer

This can improve the structure, accessibility, and readability of your application.

---

Keep Conditional Rendering Simple

Ternaries and && are useful for simple conditions.

For more complex conditions, calculate the result before returning JSX.

This prevents deeply nested and difficult-to-read markup.

---

Use Stable Keys for Lists

When rendering dynamic lists, use a stable unique identifier whenever possible.

Conceptually:

Best:
key={user.id}

Avoid for changing lists:
key={index}

Keys help React correctly identify items between renders.

---

Final Thoughts

JSX is one of the core concepts of React.

It allows developers to describe the UI using a syntax that looks similar to HTML while keeping JavaScript logic close to the interface it controls.

The most important thing to remember is:

JSX is not HTML and browsers do not understand JSX directly. It is transformed into JavaScript that React can use to describe the UI.

The basic flow looks like this:

JavaScript + JSX
       │
       ▼
React Component
       │
       ▼
UI Description
       │
       ▼
React Rendering
       │
       ▼
Browser DOM Updates
       │
       ▼
User Interface

Once you understand JSX, writing React components becomes much easier.

You can combine:

• UI elements
• JavaScript expressions
• Props
• Conditional rendering
• Lists
• Event handlers
• Components

inside a clear and readable structure.

The simplest way to remember JSX is:

JSX is a convenient syntax for describing what your React user interface should look like using JavaScript.