Open In App

Why can’t browsers read JSX ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Prerequisites:

Steps to Create the React Application And Installing Module:

Step 1: Create a react application using the following command.

npx create-react-app foldername

Step 2: Change your directory to the newly created folder by using the following command.

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",
"rxjs": "^7.8.1",
"web-vitals": "^2.1.4",
}

Using JSX

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 GeeksforGeeks </p>
 
    </div>
);
 
ReactDOM.render(ele, document.getElementById('root'));


Step to Run the Application: Open the terminal and type the following command.

npm start

Output:

outputJSX

Output

Without Using JSX

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(Without JSX).

Javascript




import React from 'react';
import ReactDOM from 'react-dom';
 
const ele = React.createElement("div", {
    className: 'page',
    style: { textAlign: 'center' }
},
    React.createElement("h1", { id: 'head' }, "Never Stop Learning!!!"),
    React.createElement("h2", { style: { color: 'green' } },
        "Because life never stops teaching"),
    React.createElement('p', null, "From GeeksforGeeks")
);
 
ReactDOM.render(ele, document.getElementById('root'));


Step to Run the Application: Open the terminal and type the following command.

npm start

Output:

outputJSX

Output



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