JSX (JavaScript XML)

When learning React, one of the first new concepts you will come across is JSX. At first glance, JSX may look like HTML, but it is actually a special syntax that allows you to write HTML-like code inside JavaScript.

JSX makes React code easier to read, write, and understand. Instead of creating HTML elements using long JavaScript functions, developers can write code that looks very similar to normal HTML.

Although JSX is not required to use React, almost every React project uses it because it makes development much simpler.

What is JSX?

JSX stands for JavaScript XML.

It is a syntax extension for JavaScript that lets you write HTML-like elements directly inside your JavaScript code.

For example, instead of writing complicated JavaScript to create an h1 element, JSX allows you to write it in a much cleaner way.

Without JSX

const heading = React.createElement(
  "h1",
  null,
  "Welcome to React"
);

With JSX

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

Both examples create the same heading, but the JSX version is much easier to read.

Why Do We Use JSX?

Imagine you are building a webpage with many headings, buttons, images, cards, and forms.

Writing everything using plain JavaScript would make the code long and difficult to understand.

JSX solves this problem by making your code look similar to HTML while still allowing you to use JavaScript whenever needed.

Benefits of JSX

• Easy to read
• Simple to write
• Looks like HTML
• Supports JavaScript expressions
• Makes UI development faster
• Reduces code complexity

How JSX Works

Even though JSX looks like HTML, browsers cannot understand it directly.

Before your application runs, React converts JSX into regular JavaScript using a tool called Babel.

The process looks like this:

JSX Code
     ↓
Babel converts it
     ↓
JavaScript Code
     ↓
Browser displays the webpage

As a developer, you simply write JSX, and React handles the conversion automatically.

Writing Your First JSX

Here is a simple JSX example.

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

export default App;

Output

Hello, React!

The return statement displays the heading on the webpage.

Embedding JavaScript in JSX

One of the best features of JSX is that you can use JavaScript inside it. To write JavaScript in JSX, use curly braces.

function App() {
  const name = "John";

  return <h1>Welcome, {name}!</h1>;
}

Output

Welcome, John!

Anything inside curly braces is treated as JavaScript.

You can display variables, numbers, mathematical calculations, function results, and expressions.

function App() {
  return <p>10 + 20 = {10 + 20}</p>;
}

Output

10 + 20 = 30

JSX Must Return One Parent Element

A React component must return only one parent element.

Incorrect Example

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

This will produce an error because there are two top-level elements.

Correct Example

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

Here, the div acts as the single parent element.

Using Fragments Instead of div

Sometimes you do not want an extra div in your HTML. React provides Fragments for this purpose.

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

Fragments group multiple elements without adding extra HTML to the page.

JSX Attributes

JSX attributes are similar to HTML attributes, but a few names are different because JSX follows JavaScript rules.

For example:

HTML

<label class="title">React</label>

JSX

<label className="title">React</label>

Notice that class becomes className in JSX.

Another common example is htmlFor instead of for.

<label htmlFor="username">Username</label>

These changes help avoid conflicts with JavaScript keywords.

Comments in JSX

Comments inside JSX are written using curly braces.

function App() {
  return (
    <div>
      {/* This is a JSX comment */}
      <h1>Learning React</h1>
    </div>
  );
}

This comment will not appear on the webpage.

Real-World Example

Imagine you are building an online shopping website. Instead of manually creating every product card, JSX allows you to create reusable layouts like this:

function Product() {
  return (
    <div className="product">
      <h2>Wireless Mouse</h2>
      <p>₹999</p>
      <button>Buy Now</button>
    </div>
  );
}

You can reuse this component for multiple products, making your code cleaner and easier to maintain.

Common JSX Rules

When writing JSX, remember these rules:

• Always return one parent element.
• Close every HTML tag.
• Use className instead of class.
• Write JavaScript inside curly braces.
• Use camelCase for most attribute names.
• Keep JSX clean and readable.

Following these rules helps prevent common errors.

Summary

JSX is one of the most important features of React because it makes building user interfaces much easier. It combines the simplicity of HTML with the power of JavaScript, allowing developers to create clean, readable, and reusable code.

Although browsers cannot understand JSX directly, React automatically converts it into JavaScript behind the scenes. Once you understand JSX, writing React components becomes much more natural and enjoyable.

Key Takeaways

• JSX stands for JavaScript XML.
• JSX lets you write HTML-like code inside JavaScript.
• It makes React code easier to read and maintain.
• JavaScript expressions are written inside curly braces.
• A component must return one parent element.
• Use className instead of class in JSX.
• React converts JSX into JavaScript before it runs in the browser.
• JSX is the standard way to build user interfaces in React applications.