How to use JSX In Web Technology
The below code is converted into JavaScript as shown below using Babel compiler, because JSX is not supported by browsers it converts the JSX code into JavaScript.
Example: Below shown code is a converted code of JSX i.e. JavaScript code(With JSX).
Javascript
import React from 'react' ; import ReactDOM from 'react-dom' ; const ele = ( <div className= 'page' style={ { textAlign: 'center' } }> <h1 id= 'head' > Never Stop Learning!!! </h1> <h2 style={ { color: 'green' } }> Because life never stops teaching </h2> <p> From w3wiki </p> </div> ); ReactDOM.render(ele, document.getElementById( 'root' )); |
Step to Run the Application: Open the terminal and type the following command.
npm start
Output:
Why can’t browsers read JSX ?
React, a JavaScript library for web applications utilizes JSX—a syntax extension allowing JavaScript objects within HTML elements, enhancing code clarity. JSX isn’t directly supported by browsers, requiring conversion by tools like Babel to transform JSX into valid JavaScript. This transpilation ensures browsers can interpret and execute the JSX-embedded code in React applications.