Writing JavaScript to define a tree-like structure and attributes while building UI using React is difficult and also makes it difficult to understand the UI. So, the React team came up with an alternative syntax to write React code, which is easier to write and understand. This alternate syntax is called JSX. JSX stands for JavaScript syntax extension. It looks similar to XML. Files that contain JSX code have the.jsx extension.
Of course, browsers and server-side engines cannot understand and interpret JSX; therefore, we need to compile JSX into pure JavaScript before using it.
There are various open source JSX compilers. You can find the list at https://github.com/facebook/react/wiki/Complementary-Tools#build-tools. The most popular and recommended compiler for JSX is Babel. Babel can be installed (https://babeljs.io/docs/setup/), we can use the Babel compiler online (https://babeljs.io/repl/), and we can also embed the Babel compiler in our HTML page...