Skip to content
Related Articles
Open in App
Not now

Related Articles

How JSX works behind the scene ?

Improve Article
Save Article
  • Last Updated : 10 Oct, 2021
Improve Article
Save Article

 Learning HTML is easy than React which consists States, Components, Events, etc. So, to make easy coding react introduced JSX. It is an JavaScript extension where we can embed valid JavaScript objects into HTML elements. JSX makes Code easier to read and understand. Usually, HTML and JavaScript is written separately but react creates components that contain both HTML and JavaScript. So, if you are familiar with HTML you can easily modify your code using JSX.

const age = 20;
const ele = <h1> I'm {age} years old </h1>;

How JSX works behind the scenes:

 Most of the users use JSX as it is easy to learn and easy to implement and could find errors easily. Whenever a code is written in JSX, babel transcompile the code into JavaScript code.

JSX converting to JavaScript

Create a react application

Follow the below steps to create a react application:

Step 1: Create a react application using the following command.

npx create-react-app foldername


Step 2: Change the directory into newly created folder.

cd foldername

It creates a project structure as shown below:

Project Structure

Step 3: Now inside index.js, write down the following code and check the code with both JSX and without JSX.

The code that is written in JSX looks like the following code:


import React from 'react';
import ReactDOM from 'react-dom';
const ele = ( 
    <h1 id="h1"> Welcome to GeeksforGeeks </h1> 
<p> Don't stop learning </p>
ReactDOM.render(ele, document.getElementById('root'));

Without using JSX: The code that is written in JSX converts into react code using babel compiler as shown below:


import React from 'react';
import ReactDOM from 'react-dom';
const ele = React.createElement(
    "div", { "class": "container" },
        "h1", { id: "h1" }, "Welcome to GeeksforGeeks"),
    React.createElement("p", null, "Don't stop learning"));
ReactDOM.render(ele, document.getElementById('root'));

Step to run the application: To run the application, enter the following command.

npm start


Both the codes produce the following output:

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!