11. Basic Routing
Okay, I’ve had enough of the HTML string building. Let’s get some basic routing in on the server so that we can serve files instead. We’ll use Express
for that.
npm install express --save
With Express
installed, we can now get rid of our raw http code, spin up an Express
server instance instead, and then use express.static
to serve our static files. With that in place, we can use a <script src="..."></script>
tag to get our Timestamp.js
file down to the browser. Here’s what index.jsx
looks like after those transformations.
var React = require('react') , HelloWorld = require('./Components/HelloWorld') , express = require('express') , path = require('path') var app = express() app.use('/Components', express.static(path.join(path.join(__dirname, '..'), 'Components'))) app.get('/', function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}) var body = React.renderToString( <body> <HelloWorld from="index.jsx on the server" /> <div id="reactContainer" /> </body>) res.end('<html><head><title>Hello World</title>' + '<script src="//fb.me/react-0.13.1.js"></script>' + '<script src="/Components/Timestamp.js"></script>' + '</head>' + body + '<script>' + 'var timestampInstance = React.createFactory(Timestamp)();' + 'var timestampElement = React.render(timestampInstance, ' + ' document.getElementById("reactContainer"));' + 'setInterval(function() { timestampElement.setState({ ' + ' date: "Updated through setState: " ' + ' + new Date().toString() }) }, 500)' + '</script>' + '</html>' ) }) app.listen(1337) console.log('Server running at http://localhost:1337/')
Notes:
- The
express.static
call is using__dirname
, joined with..
, and then joined withComponents
- This is because the running code is
/lib/index.js
and not the/index.jsx
, so we have to correct the paths - Additionally, we’re serving the static components to the browser to a
/Components
folder
We’re also obviously not yet rid of the HTML string building–let’s do that now.