When we use React, we have an option to use JSX, which gives us a markup-style syntax, which is then compiled to procedural JavaScript code. JSX stands for Syntax Extensions for JavaScript. Consider the following statement:
const helloElement = <h3>Hello, {user.name}</h3>;
It is not pure JavaScript, nor is it pure HTML--it is something in between. It definitely mixes JavaScript and HTML in a very powerful and expressive way. In JSX, you wrap JavaScript inside the XML style markup using curly braces, and you can close your tag with />, as follows:
const userPicture = <img src="{user.imageUrl}"/>;
A React element can have only one root element, but it can have nested elements. When you write JSX, there are some differences to it from HTML; for example, in the attribute names, you can't use attribute class (because it is a reserved name in ECMAScript 6), but, instead, you need to use className, and the attribute names are always...