This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Isomorphic React with react-engine

4:31 React lesson by

Outside of providing an express template engine for JSX, react-engine allows us to utilize the same templates for client side interaction.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Outside of providing an express template engine for JSX, react-engine allows us to utilize the same templates for client side interaction.

Avatar
Dan

Loving these isomorphic tutorials. When can we expect follow up ones?

In reply to egghead.io
Avatar
Deoward

what exactly is the purpose of this code:

require('./views/**/*.jsx', {glob: true});

if you are already returning the correct view in your resolver function?

viewResolver: function(viewName) {
return require('./views/' + viewName);
}

Avatar
Joseph

The short answer: The client side code wont work without it.

The long answer: index.js is the entry point for browserify, but browserify only works on static require statements so this saves us the trouble of requiring every jsx file in our application. The first require with glob:true makes sure that the view is available when the viewResolver is executed.

In reply to Deoward
Avatar
Yariv

Why can't this example run when I use react 14?
I tried replacing "require('node-jsx').install();" with "require('babel/register')({});" and tried using updated packages like
"babel": "^5.8.29",
"browserify": "^12.0.0",
"express": "^4.13.3",
"history": "^1.12.6",
"react": "^0.14.0",
"react-engine": "^2.4.0",
"react-router": "^1.0.0-rc3",
"reactify": "^1.1.1",
"require-globify": "^1.3.0"
As you might guess - it blows up.
What are the chances of you updating your example to use the latest libraries?
Also - do you know of any example using a webpack based workflow with react-engine? their github examples are outdated too and won't work.
Thank you

Avatar
Joel

I updated all of these example code to React 0.14 and they "just worked". The react-router lesson broke.

So, I have no idea what your issue is here ;(

In reply to Yariv

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?