18. Rendering Pages with JSX
With this restructuring in place, and with Browserify building /src/Pages/index.jsx
, it seems natural to use JSX for that file too. Looking at gulpfile.js
again, we can see that file is going through the following stages:
- Source file at
/src/Pages/index.jsx
- The ‘jsx’ task transforms it and writes the output to
/bin/Pages/index.js
- The ‘client-scripts’ task runs Browserify on
/bin/Pages/index.js
and overwrites that file with the output
For clear illustration of this, we can temporarily update gulpfile.js
so that the output of the ‘client-scripts’ task goes to /bin/Pages/bundles
. We can then see that the intermediate output is written to /bin/Pages/index.js
and the bundled output goes to /bin/Pages/bundles/index.js
. Now that we get that, we can revert the change though.
Since /src/Pages/index.jsx
is going through the JSX transform though, let’s go ahead and use JSX for it.
var React = require('react') var HelloWorld = require('../Components/HelloWorld') var Timestamp = require('../Components/Timestamp') React.render( <HelloWorld from='index.jsx, transformed, bundled, and running on the client' />, document.getElementById('reactHelloContainer')) var timestampElement = React.render( <Timestamp />, document.getElementById('reactContainer')) setInterval(function() { timestampElement.setState({ date: "Updated through setState: " + new Date().toString() }) }, 500)
Just to make sure this actually worked, the <HelloWorld>
message was changed slightly. But yeah, this worked like a charm!