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.
Javascript
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
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
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
Share your thoughts in the comments
Please Login to comment...