JSX

JSX is React's template domain-specific language (DSL), allowing you to write the user interface in code next to its logical code. This is the part where non-React developers often cringe, especially those used to MVC-style programming. React follows the notion that components can (and should) be hard-wired with its template. Arguably, it is indicated that this is actually more productive, since one rarely needs the same logic with completely different templates, and thus having it in one piece should be more easily maintainable.

JSX is not really mandatory. As part of the build process, JSX is compiled to plain JavaScript code behind the scenes. Therefore, it is possible to use the underlying JavaScript API to construct the Virtual DOM, rather than using JSX. Despite that, the use of JSX is certainly encouraged as it increases the speed and productivity of development, as well as the manageability of the code.

 

Using JSX

Basically, JSX allows you to use HTML-like syntax along with code...