Open In App

What are the advantages of using JSX in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

JavaScript XML or JSX is an extension of the JavaScript language syntax. The React library is an extension to write XML-like code for elements and components. JSX tags have a tag name, attributes, and children. 

Although JSX is not a necessity to write React applications, it is extremely beneficial as it makes React code simpler and elegant. 

Syntax:

{/* Using JSX*/}
<div className="App">GeeksforGeeks</div>;

// Without JSX
React.createElement(
"div",
{ className: "App" },
"GeeksforGeeks"
);

Advantages of using JSX in React JS :

  • JSX helps us keep our code simpler and elegant when writing large pieces of code.
  • According to the React docs, most people find it helpful as a visual aid when working with UI inside the JavaScript code.
  • JSX also allows React to show more useful error and warning messages.
  • If one is familiar with HTML, it is quite easy to use JSX when building React application
  • Faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app example

Step 2: After creating your project folder i.e. example, move to it using the following command:

cd example

Project Structure:

Example: This example implements two same components using one with JSX and other without JSX.

Javascript




// Filename - App.js
 
import React from "react";
import Jsx from "./Components/Jsx";
import Nojsx from "./Components/Nojsx";
 
export default function App() {
    return (
        <div className="App">
            <Jsx />
            <Nojsx />
        </div>
    );
}


Javascript




// Filename - Components/Nojsx.js
 
import React from "react";
 
const Nojsx = () => {
    return React.createElement(
        "div",
        { id: "Nojsx", className: "GfgClass" },
        React.createElement("h1", null, "Welcome to GFG")
    );
};
 
export default Nojsx;


Javascript




// Filename - Components/Jsx.js
 
import React from 'react'
 
const Jsx = () => {
    return (
        <div className ='GfgClass'>
        <h1>Welcome to GFG</h1>
        </div>
    )
}
 
export default Jsx


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Output



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