JavaScript XML or JSX is an extension to 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, but it is extremely beneficial as it makes React code simpler and elegant.
JSX has the following advantages:
- JSX helps us in keeping 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.
Creating 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
-
Step 3: Create a new folder called Components and create files Nojsx.js and Jsx.js.
Project Structure: The project structure will look like the following.
Implementation: Write down the following code in App.js, Nojsx.js, and Jsx.js files.
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> ); } |
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 |
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
Conclusion: Both the Components will produce the same result. We can conclude that writing component code with JSX is much simpler than writing it without JSX.
Reference: https://reactjs.org/docs/introducing-jsx.html
