JSX – a JavaScript syntax extension
It can be quite verbose to define each element using the React.createElement function – even when we alias to a shorter variable name. The verbosity is exacerbated when we start building larger components.
When using React, we can use JSX to build the HTML elements instead. JSX stands for JavaScript XML since both JavaScript and XML are written in the same file. For example, consider the following code in which we are creating a button using the render method:
return React.createElement('button', { onClick: … },
'Button Text')
Instead of this, we can return its HTML directly, as follows:
return <button onClick={…}>Button Text</button>;
Note that the HTML is not quoted and returned as a string. That is, we are not doing this:
return '<button onClick={…}>Button Text</button>';
Since JSX is an unusual syntax (a combination of HTML...
