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.
Example
Server-side
Included is an embryonic view engine for express lib/react-view-engine.ls which allows us to res.render
a react component into a single jade view views/layout.jade:
(from routes/index.ls)
routes.get '/:page' (req, res) ->res.locals.title = "Title"props = page: req.params.page# 'app0' is a react component at components/app0.lsres.render 'app0', props: props
Plug in the view engine like this:
(from app.ls)
app.set 'views', path.join __dirname, 'components'app.set 'view engine', 'ls'app.engine 'ls' react-view-engine dolayout: jade.compile dofs.read-file-sync dopath.join __dirname, 'views/layout.jade''utf8'
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.
(from components/index.ls)
require! 'react'get = document.document-element~get-attributeprops-json = get 'data-props'props = JSON.parse props-json if props-jsoncomponents =# needed for browserify's static analysis'app0': -> require './app0.ls''app1': -> require './app1.ls'exports.start = ->mount-point = document.get-element-by-id \contentif mount-point?component = components[mount-point.className]!instance = component propsreact.render-component instance, mount-point
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 dodisplay-name: 'Tabs'render: ->ul class-name: 'tabs',li doclass-name: class-set doleft: trueactive: @props.color is 'red'a href: @format-url 'red', 'Red'li doclass-name: class-set doright: trueactive: @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.
gulplsc .
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.
Navigate to http://localhost:3000/app0/page1
License
React Isomorphic is licensed under the permissive WTFPL license.
Contributing
Please contribute code, comments, issues, suggestions and ideas. Even better, fork the repo and submit pull requests.