Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How JSX works behind the scene ?

  • Last Updated : 10 Oct, 2021

 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:

Javascript




import React from 'react';
import ReactDOM from 'react-dom';
  
const ele = ( 
  <div> 
    <h1 id="h1"> Welcome to GeeksforGeeks </h1> 
      
<p> Don't stop learning </p>
   
  </div>
);
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:

Javascript




import React from 'react';
import ReactDOM from 'react-dom';
  
const ele = React.createElement(
    "div", { "class": "container" },
    React.createElement(
        "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

Output:

Both the codes produce the following output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!