React Fundamentals: JSX – Introduction & Rules

Introduction

JSX is one of the core fundamentals of React. When you start learning React, JSX is the first thing you notice because it looks like HTML written inside JavaScript.

Many beginners get confused when they see JSX for the first time—but once you understand its rules and purpose, JSX becomes very easy and powerful.

In this article, we will learn what JSX is, why React uses it, its syntax rules, and common mistakes.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript used in React.

It allows developers to write HTML-like code directly inside JavaScript.

Example:

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

Although it looks like HTML, JSX is not HTML. It is converted into JavaScript using React.createElement() behind the scenes.

Why Does React Use JSX?

JSX makes React code:

• Easier to read
• More expressive
• Closer to UI logic

Without JSX, the same code would look like this:

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

JSX improves developer experience and reduces complexity.

How JSX Works Internally

JSX is transpiled by Babel into normal JavaScript.

Example JSX:

<h1>Hello</h1>

Converted JavaScript:

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

This is why JSX must follow JavaScript rules.

JSX Rules You Must Follow

1. JSX Must Have One Parent Element

JSX expressions must return a single parent element.

❌ Incorrect:

<h1>Title</h1>
<p>Description</p>

✅ Correct:

<div>
  <h1>Title</h1>
  <p>Description</p>
</div>

OR using React Fragment:

<>
  <h1>Title</h1>
  <p>Description</p>
</>

2. JSX Uses className Instead of class

Since class is a JavaScript keyword, JSX uses className.

❌ Incorrect:

<div class="box"></div>

✅ Correct:

<div className="box"></div>

3. JSX Attributes Use camelCase

JSX follows JavaScript naming conventions.

❌ Incorrect:

<input onclick="handleClick" />

✅ Correct:

<input onClick={handleClick} />

4. JavaScript Expressions Must Be Inside {}

You can embed JavaScript expressions using curly braces {}.

Example:

const name = "React";

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

You cannot use statements like if, for directly inside JSX.

5. Self-Closing Tags Must End with /

All tags must be properly closed.

❌ Incorrect:

<img src="logo.png">

✅ Correct:

<img src="logo.png" />

6. JSX Allows Conditional Rendering (Using Expressions)

You can use ternary operators for conditions.

Example:

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

7. Inline Styles Use Objects

JSX styles are written as JavaScript objects.

Example:

<div style={{ color: "blue", fontSize: "18px" }}>
  React JSX
</div>

JSX vs HTML – Key Differences

Common JSX Mistakes Beginners Make

• Forgetting to close tags
• Using class instead of className
• Writing JS statements instead of expressions
• Not wrapping multiple elements

JSX – Interview Quick Answer

What is JSX in React?

JSX is a JavaScript syntax extension used in React that allows writing HTML-like code inside JavaScript, making UI code easier to read and maintain.