How to use JSX In Web Technology

Steps to Create the React Application And Installing Module:

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:

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.