Explaining React JSX in depth.

JSX stands for JavaScript Syntax Extension. It is a syntax for writing JavaScript and HTML codes together, or to be exact, writing HTML codes inside JavaScript code.

JSX is a template language that comes with the full power of JavaScript.

Syntax

const element = <h1>Hello World!</h1>;

As we can see in the above syntax, both HTML and JS code has been written in a single line. It is neither HTML nor JS code, it is JSX, the compilation of both languages in one code.

It is a great practice to write React codes in JSX, but it is not compulsory. We shall see in this article the difference between the two but first, let us discuss why JSX is preferred over the other method?

Advantages of JSX

1. Writing React code in JSX makes it easy to read and understand.
2. As discussed above, we can simply write HTML codes inside JS, and it will be called a React code.
3. Rendering of code is faster when compared to regular JavaScript
4. Writing code in JSX not only makes it clean and understandable but can even help with error sporting.

The main problem with JSX was that the browser cannot read its syntax as it has both HTML and JavaScript in it. To solve this, Babel was introduced in 2014 that help the browsers in reading the JSX code by converting it into plain JS.

Sounds interesting, read the full article here.