React Mastery / Introduction to React

JSX, Babel

🧩 What is JSX (JavaScript XML)?

JSX is a syntax extension for JavaScript used with React.

It allows you to write HTML-like code inside JavaScript.

✅ Why JSX?

  • Makes code more readable and expressive

  • Allows UI structure to be written in a familiar HTML style

  • Helps in visualizing component structure directly inside JavaScript

📝 Example:

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

This looks like HTML, but it’s not — it’s JSX!

Behind the scenes, it gets compiled into:

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

✅ Features of JSX:

  • Can embed JavaScript expressions using {}

    const name = "xyz";
const greeting = <h1>Hello, {name}!</h1>;

  • Must return a single root element

  • Uses camelCase for attributes (className instead of class, htmlFor instead of for)

🔧 What is Babel?

Babel is a JavaScript compiler and transpiler.

✅ What it does:

  • Converts modern JavaScript (ES6+) and JSX into backward-compatible JavaScript that browsers can understand.

  • Helps in supporting older browsers by transpiling features they don’t support.

💡 Without Babel, JSX and ES6+ code wouldn’t work directly in browsers.

🔁 How JSX + Babel work together:

  1. You write JSX in your React component.

  2. Babel converts JSX into regular JavaScript using React.createElement().

  3. The browser runs the converted code.

🔍 Example: How Babel transforms JSX

Input (JSX):

const greeting = <h1>Hello, World!</h1>;
const greeting = React.createElement("h1", null, "Hello, World!");

🛠️ Summary

Term

Meaning

JSX

JavaScript XML – lets you write HTML in React components

Babel

A compiler that converts JSX and modern JS to browser-compatible JS