How JSX Works in React

Learn JSX in React with practical examples. Understand JSX syntax, expressions, attributes, fragments, conditional rendering, and how JSX works behind the scenes.

JSX in React: What It Is and How It Works

If you've started learning React, you've probably seen code that looks like HTML inside JavaScript files.

Example:

  function App() {
  return (
    <h1>Hello React</h1>
  );
}
  

At first glance, this looks like HTML.

However, it isn't actually HTML.

This syntax is called JSX.

JSX is one of the most important concepts in React because almost every React component uses it.

In this guide, you'll learn what JSX is, why React uses it, and how to write JSX correctly.

Prerequisites

Before learning JSX, make sure you understand:

• React.js Introduction
• React Setup and Folder Structure
• JavaScript Variables
• JavaScript Functions

These concepts will help you understand JSX more easily.

What is JSX?

JSX stands for:

  JavaScript XML
  

JSX is a syntax extension for JavaScript that allows developers to write HTML-like code inside JavaScript.

Example:

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

This makes React code easier to read and understand.

Why Does React Use JSX?

Without JSX:

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

With JSX:

  <h1>Hello World</h1>
  

Both produce the same result.

However, JSX is much easier to read and write.

This is why most React developers prefer JSX.

How JSX Works Behind the Scenes

Many beginners think browsers understand JSX directly.

They don't.

React tools convert JSX into regular JavaScript.

Example:

  <h1>Hello World</h1>
  

becomes:

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

This conversion happens automatically during development.

Returning JSX from Components

React components return JSX.

Example:

  function App() {
  return (
    <h1>
      Welcome to React
    </h1>
  );
}

export default App;
  

The JSX returned by the component is rendered on the screen.

Writing Multiple Elements

This will cause an error:

  function App() {
  return (
    <h1>Title</h1>
    <p>Description</p>
  );
}
  

React requires a single parent element.

Correct example:

  function App() {
  return (
    <div>

      <h1>Title</h1>

      <p>Description</p>

    </div>
  );
}
  

Using React Fragments

Sometimes you don't want unnecessary HTML elements.

Example:

  function App() {
  return (
    <>

      <h1>Title</h1>

      <p>Description</p>

    </>
  );
}
  

This is called a React Fragment.

Fragments group elements without creating additional DOM nodes.

Embedding JavaScript in JSX

One of JSX's biggest advantages is the ability to use JavaScript directly inside markup.

Example:

  function App() {

  const name = "Sachin";

  return (
    <h1>
      Hello {name}
    </h1>
  );
}
  

Output:

  Hello Sachin
  

Curly braces allow JavaScript expressions inside JSX.

Using Variables

Example:

  const course = "React";

return (
  <h1>
    Learn {course}
  </h1>
);
  

Using Expressions

Example:

  const age = 20;

return (
  <h1>
    {age + 5}
  </h1>
);
  

Output:

  25
  

Rendering Arrays

Example:

  const skills = [
  "HTML",
  "CSS",
  "JavaScript"
];

return (
  <ul>

    {skills.map(skill => (
      <li>{skill}</li>
    ))}

  </ul>
);
  

This is commonly used for rendering dynamic lists.

JSX Attributes

JSX supports attributes similar to HTML.

Example:

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

However, some HTML attributes use different names.

Class vs ClassName

HTML:

  <div class="card">
</div>
  

JSX:

  <div className="card">
</div>
  

React uses:

  className
  

instead of:

  class
  

because class is a reserved JavaScript keyword.

HTML vs JSX Differences

These differences are important to remember.

Self-Closing Tags

HTML often allows:

  <input>
  

In JSX:

  <input />
  

Self-closing tags are required.

Examples:

  <img />

<input />

<br />

<hr />
  

Conditional Rendering in JSX

Example:

  const isLoggedIn = true;

return (
  <h1>
    {
      isLoggedIn
        ? "Welcome"
        : "Login First"
    }
  </h1>
);
  

JSX works seamlessly with JavaScript conditions.

Real-World Example

A simple profile card:

  function Profile() {

  const name = "Sachin";

  return (

    <div className="card">

      <h2>
        {name}
      </h2>

      <p>
        MERN Developer
      </p>

    </div>

  );
}
  

This combines HTML-like structure with JavaScript data.

Common Beginner Mistakes

Using Class Instead of ClassName

Incorrect:

  <div class="card">
</div>
  

Correct:

  <div className="card">
</div>
  

Returning Multiple Root Elements

Always wrap JSX inside a parent element or Fragment.

Forgetting Self-Closing Tags

Incorrect:

  <input>
  

Correct:

  <input />
  

Using Statements Inside JSX

This will not work:

  {
  if (true) {
    return "Hello";
  }
}
  

Only expressions can be used inside JSX.

Watch Full JSX Tutorial

If you prefer video learning, watch the complete tutorial below where we explore JSX syntax, JavaScript expressions, attributes, fragments, and real-world examples.

Watch the Full JSX Tutorial

This tutorial demonstrates how JSX works behind the scenes and how it's used in React applications.

React vs Next.js

React provides the UI library.

Next.js provides a complete framework built on top of React.

If React is the engine, Next.js is the complete car.

Understanding JSX is important because both React and Next.js use it extensively.

Build Something

Practice JSX by creating:

• Profile Card
• Product Card
• Blog Card
• User Dashboard Header
• Portfolio Hero Section

These projects will help reinforce JSX concepts.

Production Tip

Professional React developers usually:

• keep JSX clean and readable
• avoid deeply nested structures
• create reusable components
• use meaningful variable names
• separate logic from UI when possible

Readable JSX makes applications easier to maintain.

Why JSX Matters

JSX helps developers:

• write UI faster
• combine JavaScript and markup
• improve code readability
• create reusable components
• build scalable applications

It is one of the core building blocks of React development.

Conclusion

JSX is a syntax extension that allows developers to write HTML-like structures inside JavaScript.

It makes React applications easier to build, read, and maintain while still providing the full power of JavaScript.

Once you're comfortable with JSX, learning components, props, state, and other React concepts becomes much easier.