Skip to content
Related Articles

Related Articles

Improve Article

What are the advantages of using JSX in ReactJS ?

  • Last Updated : 21 Jun, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :