JSX is nothing, but, in simple words, it is just an extension of JavaScript syntax. Also, if you observe the syntax or structure of JSX, you will find that it's similar to XML coding. JSX is doing preprocessor footstep, which adds XML syntax to JavaScript. Though you can certainly use React without JSX, JSX makes react a lot more neat and elegant. Similar to XML, JSX tags are having tag name, attributes, and children and, in that, if an attribute value is enclosed in quotes, that value becomes a string.

JSX works similar to XML, with balanced opening and closing tags, and it helps make large trees at ease to read than “function calls” or “object literals”.

Advantages of using JSX in React:

• JSX is very simple to understand and think about than JavaScript functions
• Markup of JSX is more acquainted to designer and the rest of your team
• Your markup becomes more semantic, structured and more meaningful

How is it easy to visualize?

As I said, the structure/syntax is easy to visualize/notice, which is intended to be more clear and readable in the JSX format as compared to JavaScript.