Open In App

How JSX works behind the scene ?

Improve
Improve
Like Article
Like
Save
Share
Report

 Learning HTML is easier than React which consists of States, Components, Events, etc. So, to make easy coding react introduced JSX. It is a JavaScript extension where we can embed valid JavaScript objects into HTML elements. JSX makes Code easier to read and understand. Usually, HTML and JavaScript are 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

Steps to Create the 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

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

  "dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

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 = (
    <div>
        <h1 id="h1"> Welcome to GeeksforGeeks </h1>
        <p> Don't stop learning </p>
    </div>
);
ReactDOM.render(ele, document.getElementById('root'));


Output:

jsxWith

Output

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:

jsxWith

Output



Last Updated : 23 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads