How JSX works in React ?

One of the most important properties of React JS is the use of JSX to render content on User Interface. JSX stands for JavaScript XML. In more simpler way, HTML inside JavaScript. It certainly has made our life easier by allowing us to directly write HTML in React unlike Vanilla JavaScript. Let's have a look how we would have written the same HTML in vanilla JavaScript to understand better why React is so special.

import React from "react";


const Content=()=>
{
    return (

        <h1>Hello World !!</h1>

    );
}

export default Content;

As you can see, I just wrote a very simple functional component with minimal JSX consisting of a simple header.

Now, I will write the same HTML in Vanilla JavaScript.

const header = document.createElement('h1');
header.textContent = 'Hello World';
document.getElementById('root').append(header);

Although it will work just fine, but it is a lot cumbersome for just a simple header element and while creating some complex UI it may create problems for us.

So we got to know why JSX is better, now we will see how exactly JSX works under the hood. Though, JSX is an integral part of React JS but it is not supported by browser. JSX is nothing but syntactic sugar to make it more readable but under the hood during compilation JSX is translated to pure JavaScript because our browser does not understand JSX.

Open any React JS application on Google chrome and go to the Developer tools by right clicking on it. There in the source section, inside js files, you can see how there is no trace of any JSX syntax but pure JavaScript. Although, that may be a little too hard for us to understand, we can definitely see how JSX in converted to pure JavaScript step by step.

Let's take another example and see what it is converted to-

import React from "react";


const Content=()=>
{ 
    return (
        <div>
        <h1>Let's Go! </h1>
        <Cart items={expenses}/>
        </div>

    );
}

So we just took another functional component that returned a div consisting of a header element and a custom HTML element named Cart. We will see the actual implementation of it behind the scenes.

import React from "react";
import Cart from "./Cart"

const Content=()=>
{
    return React.createElement(
        'div',
        {},
        React.createElement('h1',{},"Let's Go!"),
        React.createElement(Cart,{items:expenses})
    );
}

export default Content;

Here we can see, createElement function has been used on React object imported from "react" library. This is why we use to import React whenever there is JSX involved. createElement always takes three arguments, the first one is the element that we are going to render , 'div' in this case. Second one is the object that configures the former element, to simply state the attribute of previous element and third one is the elements inside the first one.

If it is not a custom HTML element, we write it inside inverted comma otherwise we simply write the element name.

So this is the actual implementation of JSX behind the scenes.

Well, this was all about JSX for today. Hope it helped. If you have any questions or confusions regarding this, please feel free to comment it out below.

Until next time, Toodles!!

Thank you. 😊