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.

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: