...
Now, here is the same component converted to use JSX syntax - note that the browser can no longer directly interpret this code, which must be compiled or "transpiled" using Babel or something similar. Since we will need to compile the JSX down to CommonJS anyways, we can safely use ES6 syntax (such as the "let" keyword or arrow functions) without worrying about browser support, since the compiler should translate these shorthands to their equivalent CommonJS representation.
Notice that we are no longer passing around the values returned from React.createElement ... in fact, we don't even call explicitly call React.createElement at all:
...
The result of the compilation might look as follows - Note that the compiler has replaced the JSX parts in the code below have been replaced with nested calls to React.createElement() by the compiler.
This compiled output can be then immediately consumed by your browser:
...