How React JSX Gets Transformed Into JavaScript Behind the Scenes

Kashif Ullah — Mon, 23 Sep 2024 09:45:20 +0000

When you're writing React, you'll often see JSX – a syntax that looks like HTML within your JavaScript code. But have you ever wondered how this code runs in the browser?

Here's the magic: JSX is not valid JavaScript! Browsers can’t understand it directly. Behind the scenes, a tool like Babel steps in to convert (or "transpile") JSX into regular JavaScript.

The Process:

1.You write JSX – It looks like HTML but lives within your React components. For example:

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

2.Babel transforms it – During the build process, Babel converts the JSX into pure JavaScript using React.createElement:

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

3.JavaScript in the browser – Finally, this standard JavaScript is what the browser executes, building the DOM dynamically.

How does Babel work?

Babel is a powerful JavaScript compiler that enables you to use the latest JavaScript features (including JSX in React) while ensuring compatibility across different browsers and environments. Here's a breakdown of how Babel works:
1.Parsing
Babel starts by parsing your modern JavaScript or JSX code into an Abstract Syntax Tree (AST). The AST is a detailed tree-like structure that represents the code in a way that's easy for Babel (and other tools) to analyze and manipulate. During this step, Babel reads the code but doesn’t change it yet.
For example, Babel takes this JSX code:

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

And generates an AST, which represents the structure of this code.
2.Transforming
Next, Babel applies a series of plugins to the AST. Each plugin is responsible for transforming specific parts of the AST according to the rules it defines. These transformations can include converting modern JavaScript syntax (like arrow functions or async/await) into older, browser-compatible versions.
For JSX, Babel transforms:

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

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

3. Code Generation
Once all transformations are done, Babel generates JavaScript code from the transformed AST. This is the final step where the human-readable output is produced, which the browser or Node.js can execute.

Lets Conclude...

Why It Matters:

JSX allows you to write more intuitive, component-based UI code, but it's Babel and the JavaScript runtime that bring it to life. Understanding this conversion helps you troubleshoot better and write more optimized React apps.

DEV Community: Kashif Ullah

How React JSX Gets Transformed Into JavaScript Behind the Scenes

The Process:

How does Babel work?

Why It Matters: