React Isomorphic

This is an experimental playground to try and find unobtrusive patterns that might help while building isomorphic web applications using Facebook React.

It supports server-side and client-side rendering of react components. Render a page server-side and carry on client-side. Refresh a client-side route and have the server render the page. Deep link into your application at any point and have the server render the first page. Create your site from many 'single-page-applications', all seamlessly running side-by-side. Great for SEO, non-javascript environments and fast page loading with no app startup delay.

Please feel free to use anything you find here, and to contribute ideas by forking the repository and submitting pull requests.

Client-side

The relevant page's components are rendered again client-side with access to the same props, which have been serialized into a data-props attribute on the document element. React determines from the checksum that it doesn't need to update the DOM. If you have client-side routes declared you can carry on client-side. If you have server-side routes that match, you can refresh a client page and have the server render it for you.

A word about LiveScript

Most people use JSX with React in an attempt to make the markup more HTML-like and therefore designer-friendly. In our experience, designers are clever people who don't like being patronised :-) LiveScript is easy to learn and makes for beautiful react components:

tabs = react.create-class do

display-name: 'Tabs'

render: ->

ul class-name: 'tabs',

li do

class-name: class-set do

left: true

active: @props.color is 'red'

a href: @format-url 'red', 'Red'

li do

class-name: class-set do

right: true

active: @props.color is 'blue'

a href: @format-url 'blue', 'Blue'

We make no apology for using LiveScript throughout this project. Its functional qualities are inherited from Haskell, which alone is a great reason to use it! But if you have a strong opinion either way then please raise an issue.

Building and running

First install LiveScript and Gulp:

npm install -g LiveScript gulp

Then build client-side assets (uses browserify to bundle the compiled JavaScript) and run.

gulp

lsc .

You can rebuild automatically when files change by using gulp dev.

If you use npm start instead of lsc . it will run under supervisor, restarting the app when files are changed.