JSX Syntax & Babel in React

What is JSX?

  • JSX = JavaScript + XML-like syntax.

  • It lets developers write UI in a declarative way, combining structure and logic in one place.

  • JSX is not required to use React, but it makes code easier to read and write.

Example (with JSX):

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

What the browser actually understands (without JSX):

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

 JSX is just syntactic sugar for React.createElement().

JSX Syntax Rules

Only One Parent Element

JSX must return a single root element.

 Correct:

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

 Incorrect:

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

Tip: Use <div> or React fragments <> </> to wrap multiple elements.

Use className Instead of class

Since class is a reserved word in JavaScript, JSX uses className.

 
<p className="intro">This is JSX</p>
Use CamelCase for Attributes

HTML attributes like onclick or tabindex become camelCase in JSX.

 
<button onClick={handleClick}>Click Me</button>
Embed JavaScript Expressions with { }

You can embed any JavaScript expression inside {}.

 
const user = "Arvinder"; return <h1>Hello, {user}!</h1>;
JSX Attributes Can Accept Expressions
const link = "https://react.dev";
return <a href={link}>React Docs</a>;
Inline Styling in JSX

Styles are written as an object with camelCased properties.

 
const style = { color: "blue", fontSize: "20px" }; return <p style={style}>Styled Text</p>;
Self-Closing Tags

Just like XML, JSX requires self-closing tags.

 
<img src="logo.png" alt="Logo" /> <input type="text" />

What is Babel?

Now comes the important question: How does JSX work in browsers if they don’t understand it?

This is where Babel comes in.

  • Babel is a JavaScript compiler.

  • It transpiles modern JavaScript and JSX into browser-compatible JavaScript.

  • Without Babel, JSX code would throw an error in the browser.

Example (before Babel):

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

After Babel transpiles:

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

JSX + Babel Workflow

  1. You write JSX inside your React component.

  2. Babel converts JSX into React.createElement() calls.

  3. React builds a Virtual DOM object.

  4. React compares Virtual DOM with the real DOM and updates changes efficiently.

Diagram (explained in words):
JSX Code → Babel Transpilation → React.createElement() → Virtual DOM → Real DOM

Why Use JSX?

  • Readable & Declarative: Looks like HTML, easier for beginners.

  • Mixing Logic with Markup: You can embed JavaScript expressions directly.

  • Component-Based Development: Helps write reusable UI pieces.

Quick Example

JSX Component:

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

What Babel compiles it to:

 
function Greeting(props) { return React.createElement("h1", null, "Hello, ", props.name, "!"); }

FAQ

Q1: Is JSX required in React?
 No. You can use React.createElement() directly, but JSX makes coding easier.

Q2: Do browsers understand JSX?
 No. Browsers only understand JavaScript. JSX must be converted by Babel.

Q3: Can I write JavaScript logic in JSX?
 Yes, but only expressions (inside { }), not full statements like if or for.