Skip to content
Related Articles
Open in App
Not now

Related Articles

What are the advantages of using JSX in ReactJS ?

Improve Article
Save Article
  • Last Updated : 21 Jun, 2021
Improve Article
Save Article

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.


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


import React from 'react'
const Nojsx = () => {
    return React.createElement(
        {id:'Nojsx',className : 'GfgClass'},
        React.createElement('h1',null, 'Welcome to GFG')
export default Nojsx


import React from 'react'
const Jsx = () => {
    return (
        <div className ='GfgClass'>
        <h1>Welcome to GFG</h1>
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:


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. 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!