How JSX Parsing Works ?

JSX (JavaScript XML) is a key feature of React that lets developers write HTML-like code inside JavaScript. It makes building UI components easier and more intuitive. In this blog post, we'll explain how JSX parsing works and how it turns your code into something the browser can understand.

What is JSX ?

JSX is a syntax extension for JavaScript, introduced by React, that allows developers to write HTML-like code within their JavaScript files.

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

How Does JSX Get Transformed?

1. Writing jsx

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

2. Babel Transpilation

A tool called Babel converts JSX into JavaScript. This step is necessary because browsers don’t understand JSX directly.

Why do we use babel ?

Babel is a JavaScript compiler that allows you to use next-generation JavaScript today. It helps in transforming JSX into a format that browsers can understand. Modern JavaScript features and JSX are not natively supported by all browsers, especially older versions. Babel transpiles this code into a version of JavaScript that can run in any browser. By using Babel, you ensure that your React code is compatible across different environments, making your applications more robust and widely accessible. Babel also enables other transformations, such as converting ES6+ syntax to ES5, which further broadens compatibility. Learn more about Babel.

3. Transformend JavaScript

Babels changes the JSX to :

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

Here, React.createElement is a function call that creates a React element.

What Does React.createElement Do?

React.createElement takes three arguments:

Type: The type of the element (e.g., 'div', 'h1').

Props: An object with the element’s properties (or attributes).

Children: The child elements or text inside the element.

Example :

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