Isomorphic React with react-engine

Share this video with your friends

Send Tweet

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

Deoward
Deoward
~ 9 years ago

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); }

Joe Maddalone
Joe Maddalone(instructor)
~ 9 years ago

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.

Yariv
Yariv
~ 9 years ago

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

Joel Hooks
Joel Hooks
~ 9 years ago

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 ;(