React for Real

Describe Elements with JSX

JSX is an alternative syntax for React.createElement that doesn’t introduce any new functionality, but makes the code easier to read.

You may be used to describing the user interface in separate template files. React developers came up with an unorthodox solution: a new syntax to describe user interfaces inside JavaScript files. Instead of writing React.createElement by hand, you write the element description in a syntax that’s almost identical to HTML, called JSX. Then, before the application runs, you process your source with a tool called Babel to replace JSX with React.createElement.

When compared to templates, the advantage to this approach is that there are fewer special rules to learn than with a separate template ...