What are the advantages of using JSX in ReactJS ?
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.
- 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
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:
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.
Step to Run Application: Run the application using the following command from the root directory of the project:
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.