What is JSX in React? Understanding React’s Syntax

If you’re learning React, then it’s essential to learn about JSX in React. JSX is a powerful feature of React which allows you to write HTML-like syntax in JavaScript. It makes React components more readable and maintainable.

In this post, you’ll learn everything about JSX, from its syntax to best practices.

Before we get started, don’t forget to subscribe to my newsletter!
Get the latest tips, tools, and resources to level up your web development skills, delivered straight to your inbox. Subscribe here!

Now let’s jump right into it!🚀

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML inside JavaScript. It makes code cleaner compared to using React.createElement().

Example without JSX:

return (
  React.createElement("h1", {}, "Hello, World!");
);

Example with JSX:

return (
  <h1>Hello, World!</h1>;
);

Now you can see how JSX makes code more clean and readable.

Important JSX Rules

To write better JSX, keep these rules in mind:

1. One Parent Element is Required

It’s a must to wrap multiple elements inside a single parent element.

Incorrect:

return (
  <h1>Hello</h1>
  <p>Welcome to React!</p>
);

Always wrap the elements in a <div> or <React.Fragment>.

Correct:

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

Or you can use short syntax (React Fragment <></>):

return (
  <>
    <h1>Hello</h1>
    <p>Welcome to React!</p>
  </>
);

2. Write JavaScript Expressions inside {}

If you want to write any expression of JavaScript inside JSX, then wrap the JavaScript expression inside {}.

For example:

const name = "Shefali";

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

This will render "Hello, Shefali!".

Note: You cannot use statements like if-else directly inside {}.

3. Attribute Names Must Use CamelCase

In JSX, you can’t write HTML-style attributes. Instead, you have to use camelCase format.

For example: You can’t write onclick, instead write onClick.

// Incorrect:
return (
  <button onclick="handleClick()">Click Me</button>  // HTML-style syntax
);

// Correct:
return (
  <button onClick={handleClick}>Click Me</button>
);

4. Inline Styles are JavaScript Objects

In JSX, the style attribute uses an object with camelCase properties.

For example:

const styleObj = { color: "blue", fontSize: "20px" };
return (
  <p style={styleObj}>Styled Text</p>;
);

// OR
return (
  <p style={{ color: "blue", fontSize: "20px" }}>Styled Text</p>;
);

Note: Always use camelCase properties. For example, use backgroundColor not background-color.

5. Conditional Rendering in JSX

Use ternary operators or && for conditions.

Using a Ternary Operator:

const isLoggedIn = true;

return <h1>{isLoggedIn ? "Welcome Back!" : "Please Sign In"}</h1>;

Using && Operator:

const showMessage = true;

return <>{showMessage && <p>Hello, User!</p>}</>;

6. Rendering Lists in JSX

Use .map() to render lists, and always provide a key prop.

For example:

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

return (
  <ul>
    {names.map((name) => (
      <li key={name}>{name}</li>
    ))}
  </ul>
);

7. class Attribute is className in JSX

In HTML, you use class, but in JSX, it’s className.

return <h1 className="heading">Hello, JSX!</h1>;

8. Self-Closing Tags Must Have /

Self-closing elements like <img> and <input> must have a / in JSX.

return <img src="image.jpg" alt="Example" />;

JSX Compilation Process

JSX doesn’t directly run in the browser. The Babel compiler converts JSX code into React.createElement().

JSX code:

return (
  <h1>Hello, JSX!</h1>;
);

Babel converts it like this:

return (
  React.createElement("h1", {}, "Hello, JSX!");
);

This proves that JSX is just syntactic sugar, making writing React code easier.

Why is Compilation Needed?

• Browsers don’t understand JSX, but they understand JavaScript.
• Babel translates JSX into React function calls, ensuring compatibility.
• This optimizes performance by converting JSX into efficient JavaScript.

Using JSX in Functional Components

You can use JSX inside functional components.

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

And this can be used in other components like this:

<Welcome name="Shefali" />

This will render "Hello, Shefali!".

JSX vs Traditional JavaScript

🎯Wrapping Up

That’s all for today!

I hope this guide helps you.

If you found this post helpful, here’s how you can support my work:
☕ Buy me a coffee – Every little contribution keeps me motivated!
📩 Subscribe to my newsletter – Get the latest tech tips, tools & resources.
𝕏 Follow me on X (Twitter) – I share daily web development tips & insights.

Keep coding & happy learning!