React JSX

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 lets you 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 lets you 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.

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.