There are a number of isomorphic tutorials out there, but they all seemed rather complicated and overwhelming to me (and included things more relevant to larger apps, like additional routing and state management libraries). I wanted to make a simple “hello world” like example of an isomorphic React app. So here goes:
0. Initial set-up
$ git clone https://github.com/brendansudol/isomorphic-react-demo.git $ cd isomorphic-react-demo $ npm install
1. The shared, React component:
Nothing fancy here. All this component does is say ‘hi’ (to a name passed in as a
prop) and counts the number of button clicks.
2. The server:
And the view (which uses EJS for templating):
I’m using Express, a minimal and popular Node.js web application framework.
There’s only one route. It checks for a
name URL parameter and passes it to the React component which gets rendered to a string and shipped down to the view (and added within
3. The client:
The client-side JS picks up where the server left off. React notices the component already on the page and simply attaches event handlers to the relevant elements and handles future UI changes.
4. Sharing state
window.__STATE__), and then consume this variable on the client.
I added a few npm scripts to kick off the web server (as well as watch for changes and run tests).
npm start or
npm run serve, open http://localhost:3000/?name=Bob and marvel at your new isomorphic app 😊