Isomorphic React with react-engine

[00:01] In addition to providing us a way to use JSX as a templating engine, in Express, React Engine also gives us a method for creating client-side code from the same JSX. Here, in our index component, I'm going to create a button, innerHTML of click.

[00:19] On the click of that button, I want to call something I'm going to call "this.clickHandler." Let's go ahead and create that method here, clickHandler. Of course, it's going to be a function. All we want to do here is alert this.props.title.

[00:38] Save that out. We will reload that in the browser. We've got our button. Of course, when we click on it, nothing's going to happen because we have no client-side code.

[00:48] Let's go ahead and create this new file in public. We're going to call it "index.js." This is going to be specifically for Browserify to build our client-side code. The first thing we're going to do is create a variable called "Client." We're going to require react-engine/lib/client.

[01:08] We're also going to require all of the JSX files from within our views directory. Browserify won't do this on its own, so we're going to use something called "Require-globify." Into this require statement, we're going to pass an object with glob equals true.

[01:25] We're going to create this options object, which is going to be passed into the client method. It's going to have a key of view resolver. It's going to be a function that takes in the view name and simply returns the path to that view. This tells the client-side code which view we're trying to present. Views plus view name.

[01:52] Now we're going to create an event listener, document.addEventListener. This is going to be on the DOM content loaded event. When that occurs, we're going to call this callback function, which is called "onLoad." We're just going to call client.boot. We're going to pass in that options object.

[02:22] To get this to work, we're going to need to install a few npm libraries. Zoom this in a little bit. We're going to npm install. First off, we're going to need Browserify. We're going to need Reactify to transform all that JSX. We're going to use Watchify so we can watch any of the files that update.

[02:44] We're also going to require-globify. We're going to install require-globify. Let's go ahead and save that to our package.json. Once all that's installed, we'll jump over here to our package.json.

[02:59] There we go. We're going to go ahead and strip out this test command. We're going to use the start command to run our Browserify build process. We're going to run Watchify. We're going to pass in transformer of Reactify. We're also going to pass in an additional transformer of require-globify.

[03:33] Our entry point is going to be public/index.js, the file we just created. Our output is going to be public/bundle.js. You know what? Let me make it so we can see all this. We've got our Watchify transform with Reactify and also Globify. Our entry point is index.js. Our output is bundle.js.

[03:56] We're going to jump over here, to our page.jsx. We're going to drop in a script service to our bundle.js. We'll go ahead and run our npm start, which has created our bundle.js, which, when we refresh, is now available on the client. We can see we've got our alert page title. If we want to pass in a message parameter called "Something," click on that. We get an alert of something.