JSX in React.js

If you simply google about JSX, google gives us a vaguely rough definition such as: JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
But, in this post, we are going to learn more about JSX.

Introduction

JSX enables us to construct HTML elements with JavaScript and insert them into the DOM without using the createElement() or appendChild() methods. It only transforms HTML tags into react elements. You are not obliged to utilise JSX, although it makes writing React apps easier.

Why does React utilise className rather than the class attribute?

The sole reason for this is because the class is a reserved keyword in JavaScript, and because we use JSX in React, which is an extension of JavaScript, we must use className instead of the class attribute.

Why can't browsers read JSX?

Browsers cannot read JSX because it lacks an intrinsic implementation that allows browser engines to read and interpret it. JSX is not meant to be implemented by engines or browsers; rather, it is meant to be utilised by different trans pilers to convert JSX into legitimate JavaScript code.

JSX - Summary

• When developing big pieces of code, JSX assists us in keeping our code concise and elegant.
• According to the React documentation, most users use it as a visual assist while dealing with UI within JavaScript code.
• With JSX, React can display more informative error and warning messages.
• It is relatively simple to utilise JSX while constructing a React application if one is familiar with HTML.
• Faster than normal JavaScript as it performs optimization while translating to regular JavaScript.