This is an experimental playground to try and find unobtrusive patterns that might help while building isomorphic web applications using Facebook React.
Please feel free to use anything you find here, and to contribute ideas by forking the repository and submitting pull requests.
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:
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'
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.
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
You can rebuild automatically when files change by using
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
React Isomorphic is licensed under the permissive WTFPL license.
Please contribute code, comments, issues, suggestions and ideas. Even better, fork the repo and submit pull requests.