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 neveropen </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 neveropen"), 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:
