React enables us to write isomorphic applications that pre-render on the server and then respond to user interaction on the client side.

Introduction to Isomorphic React

[00:00] When we're rendering with React on the server side using something like renderToString, we get our output, everything's fine, but what we are lacking is any interaction on the client side.

[00:11] To illustrate that, I'm going to go ahead and convert our H1 to a button, I'm going to give it an onClick of clickHandler, that should be this.clickHandler, go ahead and create that method here in our component. All we're going to do is alert our property of message.

[00:36] Save that, and if we reload over here we've got our button, but again we have no client-side interaction. Again, that's because we don't have any JavaScript in the browser itself. Let's create a new file here, we're going to call it browser.js, just going to build that up really quick.

[00:53] We're going to bring in React, we're going to bring in our component, and then that's going to be react.createFactory and require our component.

[01:10] I'm also going to create a method here, or function here call renderApp on the global object, on the window. This will be more clear in a moment, but basically we want a way to render our component with the exact same properties as we have on the server side component.

[01:29] First I'm going to render that out to document.getElementByID, we'll just call this root. We could implement a templating system here, but rather than doing that and making things more complicated I'm just going to use regular old HTML.

[01:48] So here's our HTML page, I'll call that reactiso, and I'm going to create our target DIV here with an id of "Root." I'm just creating this string, this triple@string, it's going to be our placeholder, we're going to end up replacing that rather than using a template system.

[02:05] I've got a second target here with three # symbol. In order to create this bundle.js, we're going to need browserify, I'm also going to install watchify. Save that to our DIV dependencies.

[02:25] Once that's done, we are going to jump over here and we're going to create our very simple build process. It's going to be start, it's going to use watchify to watch our browser.js, then we're going to output bundle.js. Let's go ahead and get that running, [inaudible] start. Cool, so that is now running. We can see our bundle file right here, this is going to have react, and our component, and all that good stuff.

[03:01] We're going to jump over here to our Express application, going to set up a couple variables here. First one is going to be for bundle, we're just going to read that from the file system. That will be bundle.js, and you know what we're going to need to require the file system from node, so require fs and then on this .js file we're also going to set its encoding to UTF-8, copy that, and we're going to create one more for our template.

[03:39] Again, we could be using Jade, or EJS, or HandleBars or something, but just to keep it simple, we're simply going to read in our index.html and then we'll replace those target values that I set in there. We're going to set up a new route for the bundle.js, just to make sure that that comes through, so bundle.js, and you get our request and our response, and then we're simply going to send bundle.js.

[04:12] Here in our Home method, we're going to go ahead and set up this page = template and we're going to replace that triple @ symbol with our component, which we have here. Copy that and drop it right there. That's going to get replaced with our react.html, then we're going to replace that triple # tag with our call, so we're going to drop in a script and we're going to call our renderApp method so we can pass in the exact same message value as we have on the server side.

[04:44] So renderApp it's going to be a string, we'll just drop in message right here. Finally our response.send is just going to be that variable of page. We'll reload this over here, and we've got our bundle, we've got our renderApp call, and when we click on it we've got our client-side interaction. Let's go ahead and update this to .cf, re-rendered everything, and we've got again our client-side interaction.

[05:13] Now I did mention that we want this to be the same props that we get from the server side as we have on the client side, so I'm going to update this to triple X, reload here, and we are going to get this message that basically establishes that the server-side props are different than the client-side props, but if we go out and set that back, reload, we get our [inaudible] . Everything's working just fine, we'll go out and jump back to the home page, we get our "Hello," and we've got our client interaction in our isomorphic app.

Introduction to Isomorphic React

Share this video with your friends