How to use JSX In ReactJS
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 w3wiki </h1> <p> Don't stop learning </p> </div>);ReactDOM.render(ele, document.getElementById('root')); |
Output:
Output
How JSX works behind the scene ?
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