What is JSX and why do we use JSX in React ?

Have you ever wondered what actually is JSX in React and how it works behind the scene? If you want to know and deep dive about JSX then you are at the right place. Let's start it :

What is JSX ?

In a nutshell, JSX is the combination of JavaScript and HTML. It stands for JavaScript XML. With the help of JSX, we can write HTML and JavaScript in React.

Have you ever written HTML in JavaScript ?

For example :

const heading = <h1>I am Using React CDN</h1>
console.log(heading);

So far we haven't used HTML like this in our JavaScript code. But writing this way HTML is wrong or correct ?

If we talk about JavaScript, it'll throw an error.
If we talk about JSX, then this is correct.

Let's see how this code is correct in React :

We are using React and Babel CDN here so we have just created a single file i.e. index.html

<!-- React and ReactDOM CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.js"></script>

<!-- JSX -->

    <script type="text/babel">

        const root = document.querySelector('.root');
        const heading = <h1>I am JSX</h1>

        ReactDOM.render(heading,root)

    </script>

We have created a single file index.html and inside it we have put only a single div with class root that's it.

  <div class="root"></div>

Now, please have a look at out JSX code. Below after CDN Link, we created two variable.

const root = document.querySelector('.root');

Here we have accessed our div which is inside HTML file with class root

const heading = <h1>I am JSX</h1>;

Inside heading variable, we have written HTML

You must have felt it confusing but this is acceptable with our JSX. As we have already told you that JSX is the combination of HTML and JavaScript so here we have used it both.

I hope you understand it. Now let's try to print it :

In the next line, we have rendered a method ReactDOM.render() and here we have passed our variables.

Keep in mind one thing that order is important in ReactDOM.render().

First, we want to print I am JSX so we pass heading as a first argument.

Second, we want to show it in our root class and we have already accessed it and stored in our variable. So here we pass root as a second argument.

This will be output for our JSX Code :

Have you understood how we have used JSX here? If you don't, then no worry because the next example will definitely solve your all doubts.

But before, a question might pop in your mind that how JSX works here ? Let's understand it :

How JSX works in React ?

To understand it, let's add some more HTML in our previous example :

 <script type="text/babel">

        const root = document.querySelector('.root');
        const heading = (
            <div>
             <h1>I am JSX</h1>
            <h2>I am Learning it here</h2>
            <h3>I wil become master in React</h3>

            </div>

            )



        ReactDOM.render(heading,root)

    </script>

// Output : I am JSX
// I am Learning it here
// I wil become master in React

We have just added two more HTML Elements in it which is h2 and h3

If you want to render multiple elements in JSX, then wraps it inside a div

Now I bet you that you'll understand how JSX works in just 3 steps :

Copy the entire JSX code from above example

Please open a website Babeljs.io

Paste the copied code in left side of website.

As soon as you paste your code(JSX), it'll return the same code but with pure JavaScript. Evertything is done by Babel

A Babel is a transpiler which converts one language code to another language.

Here is the difference from the same Code :

Using JSX :

Above code looks clear and simpler.

Using JavaScript :

What's happening here ??

I hope you understand that how our code converts from JSX to JavaScript, thanks to Babel.

Now let's see one more powerful feature of JSX which is JavaScript Expression :

What is JavaScript Expression ?

In JSX, JavaScript Expression allow us to write JavaScript code inside HTML.

Can you you please let me know what will be the output of below code ?

<h2>{2+2}</h2>

If this was our HTML file, it would print the same {2+2}. Now let's try to print the same code but with JSX :

Have you noticed the magic ? This time it prints 4. This is the power of JSX. Inside the curly brackets, you can write your JavaScript Variable, property or object or any other valid JavaScript Expressions. JSX will execute the result and return the output.

Here we pass the variable. Let's see with example :

   const root = document.querySelector('.root');

        const myName = "Ravi"
        const country = "India";
        const heading = (
            <div>

            <h1>My name is {myName}</h1>
            <h2>I am from {country}</h2>


            </div>

            )



        ReactDOM.render(heading,root)

// My name is Ravi
// I am from India.

Even you can access the Object here :

 const root = document.querySelector('.root');


        const obj = {

            vehicle: "car",
            model: "Hyundai Verna"

        }
        const heading = (
            <div>

                <h2>I have {obj.model}</h2>


            </div>

        )



        ReactDOM.render(heading, root)

// I have Hyundai Verna

Summary

So far what we have understand about JSX :

JSX stands for JavaScript XML
JSX is combination of JavaScript and HTML.
HTML code must be wrapped in one top level element.
Every JSX code must have an closing tag as JSX follows XML code.

If you are giving class to an element, then replace it with className keyword as class is reserved keyword in JavaScript.

If you really love ❤️ this article, please hit a like ✅ or drop a comment. I'll keep posting the articles related to JavaScript and Front End development.

Ravi Rathore's Blog