JSX

In order to make its component API easier to use, React has its own syntax called JSX, which combines JavaScript and HTML. Let's take a look at updating our sample code to use JSX by copying the following code into hello-react.html and refreshing our browser:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Hello React</title> <script src="https://fb.me/react-with-addons-0.14.0.js"></script> <script src="https://fb.me/react-dom-0.14.0.js"></script> <script src="http://fb.me/JSXTransformer-0.13.1.js"></script> </head> <body> <script> var HelloReact = React.createClass({ render: function() { return React.DOM.h1(null, 'Hello React'); } }); ReactDOM.render(React.createElement(HelloReact), document.body); </script> </body> </html> ...

Get Mastering React now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.