Home » JSX Syntax & Babel in React

JSX Syntax & Babel in React

Welcome to this important step in your React learning journey! So far, you’ve worked with HTML (structure) and JavaScript (logic) separately. But React introduces something new called JSX, which allows you to combine both in a clean and powerful way. Instead of writing complex JavaScript to create UI elements, JSX lets you write code that looks like HTML but works inside JavaScript. In this session, you’ll understand how JSX works, why React uses it, and how Babel acts as a translator to convert JSX into browser-friendly JavaScript.

What is JSX?

Definition

JSX (JavaScript XML) is a syntax used in React that allows you to write HTML-like code inside JavaScript.

Simple Analogy

Think of JSX as a blueprint or template for your UI.

    • HTML → Structure
    • JavaScript → Logic
    • JSX → Combines both into one clean system

Why JSX?

Without JSX, React code becomes harder to read.

 Plain JavaScript (Without JSX)

const element = React.createElement(
  "h1",
  null,
  "Hello World"
);
JSX Version (Much Cleaner)
const element = <h1>Hello World</h1>;

JSX makes your code:

  • Easier to read
  • Easier to write
  • More similar to HTML

JSX Syntax Rules (Very Important)

Let’s go step-by-step.

Rule 1: Must Have One Parent Element

Wrong

return (
  <h1>Hello</h1>
  <p>Welcome</p>
);

Error: Adjacent elements must be wrapped

 Correct

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

Rule 2: Use className Instead of class

 Wrong

<h1 class=“title”>Hello</h1>

Correct

<h1 className=“title”>Hello</h1>
 

Because class is a reserved keyword in JavaScript

Rule 3: Use {} for JavaScript

const name = “Jam”;

<h1>Hello {name}</h1>

 

 Rule 4: Self-Closing Tags

Wrong

 
<img src=“image.jpg”>

Correct

<img src=“image.jpg” />
 

Rule 5: Component Names Must Start with Capital Letter

Wrong

<mycomponent />

Correct

<MyComponent />

Embedding JavaScript in JSX

Concept

JSX allows you to use JavaScript inside {}.

Analogy

Think of {} as a dynamic placeholder, like filling values in a form.

Example

 
const user = "Arvinder";
const age = 25;

<h1>
  Hello {user}, you are {age} years old
</h1>

Using Expressions

const num = 5;

<h2>{num * 2}</h2>  // Output: 10

Not Allowed

<h1>{if (true) {}}</h1>  // ❌ Error

Only expressions, not full statements

What Is Babel?

Definition

Babel is a JavaScript compiler that converts modern JavaScript (including JSX) into code browsers can understand.

 Analogy

Think of Babel as a language translator:

  • You write → JSX (React language)
  • Babel translates → Browser-friendly JavaScript

Why Needed?

Browsers do NOT understand JSX directly.

Flow

 
JSX → Babel → JavaScript → Browser

How JSX Works Behind the Scenes

What Happens Internally?

When you write:

const element = <h1>Hello</h1>;
 

Babel Converts It Into:

 
const element = React.createElement( 
“h1”,
null,
“Hello”
);
 

Flow Explanation

  • You write JSX
  • Babel converts JSX
  • React creates element
  • Browser displays UI

Simple Flow

 
JSX
↓
Babel
↓
React.createElement()
↓
Browser UI

Real-Life Example: Simple React Component

Goal: Display User Name

function App() {
  const user = "Arvinder";

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

Why JSX Helps?

  • Looks like HTML → easy to understand
  • Supports JavaScript → dynamic content
  • Cleaner than traditional DOM manipulation

Common Beginner Mistakes in JSX

Mistake 1: Multiple Parent Elements

 Fix: Wrap inside <div> or <> </>

 Mistake 2: Using class

Fix: Use className

 Mistake 3: Missing Closing Tags

 
<img src=“img.jpg”> // 
Fix:
<img src=“img.jpg” />
 

Mistake 4: Writing Statements Inside {}

Fix: Use expressions only

Mistake 5: Lowercase Component Names

Fix: Always use capital letters

When and Why JSX Is Used in React

Role of JSX

JSX is used to design UI components in React.

 Why JSX is Better

Without JSXWith JSX
Complex codeClean code
Hard to readEasy to read
More linesLess code

Benefits

  • Faster development
  • Better readability
  • Easier debugging
  • Combines logic + UI

FAQ

What is JSX in simple terms?

Answer:
JSX is a syntax in React that lets you write HTML-like code inside JavaScript. It helps you design UI in a way that is easy to read and understand.

Why do we use JSX instead of normal JavaScript?

Answer:
JSX makes code cleaner, shorter, and easier to understand compared to using React.createElement() directly. It improves developer productivity.

What is Babel and why is it important?

Answer:
Babel is a JavaScript compiler that converts JSX into browser-compatible JavaScript, because browsers cannot understand JSX directly.

What are the most important JSX rules?

Answer:

  • Only one parent element
  • Use className instead of class
  • Close all tags properly
  • Use {} for JavaScript expressions

Can we write JavaScript logic inside JSX?

Answer:
Yes, but only expressions (like variables, calculations, ternary operators) inside {}.
Full statements like if-else are not allowed directly.

Scroll to Top