require in client side implementation isomorphic javascript with react not recognized

Question

I was following this simple tutorial on how to implement an isomorphic javascript app using node.js and react. The server side rendering is clear to me since it is just rendering the component to a string.

However, I do not understand how I could attach the functionality defined in the components on the client side. The tutorial has the following content inside the main.js file:

var React = require('react');
var ReactApp = require('./components/ReactApp');

var mountNode = document.getElementById("react-main-mount");

React.render(new ReactApp({}), mountNode);

But this uses the require function, and simple including the script inside the html, like the tutorial does, gives an error since this require function cannot be used.

It is really frustrating how all the tutorials I can find are about the server side rendering of these components, but seem to ignore how on the client side one also could include the react component. Is it really that obvious and am I missing something really simple?

Thanks for your help.

Answer 1

They don't actually explain it in the article, but you need to bundle the app for the browser. If you look at the link to the "completed code" you can see they're browserifying the app (like @AaronDufour spoke of).