What are the advantages of using JSX in ReactJS ?

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.

// 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>
    );
}

// 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;

// 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: