reddit/node-horse-react

Name: node-horse-react

Owner: Reddit

Description: null

Created: 2015-02-26 19:19:46.0

Updated: 2018-03-03 20:44:47.0

Pushed: 2016-05-03 16:02:39.0

Homepage: null

Size: 32

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

horse-react

horse-react is an implementation of the horse application building library, with some helpers to make working with react easily.

Go check out that documentation, then return to see how you'd use it with React a little easier.

New APIs

horse-react exposes pre-built render and error functions that you can hook into, through ClientApp and ServerApp classes. It expects your middleware to attach a layout, body, and props property to the context object during the course of your route handling, and at the end, it will render it out (either with layout, if on the server, or it will mount the body if on the client.)

A Brief Overview

An example usage might be like: (es6 incoming)

routes.es6.js

his is used both client- and server- side, and simply sets up an app with
outes; in this case, returning React elements.

rt Layout from '../layouts/layout.jsx';
rt Index from '../pages/index.jsx';

tion setupRoutes(app) {
p.router.get('/', function *(next) {
this.data = new Map({
  user: db.getUser(1)
});

this.layout = Layout;

this.body = function(props) {
  return <Index {...this.props} />;
});
;


rt default setupRoutes;

server.es6.js

rt koa from 'koa';

rt {ServerReactApp} from 'horse-react';
rt setupRoutes from './setupRoutes';

server = koa();

app = new App();
pRoutes(app);

er.use(ServerReactApp.serverRender(app));

client.es6.js

You'll want to add push state too, but that's outside the scope of our example.

rt React from 'react';
rt {ClientReactApp} from 'horse-react';

rt setupRoutes from './setupRoutes';

rt jQuery as $ from 'jquery';

app = new ClientApp({
untPoint: document.getElementById('app-container')


pRoutes(app);

nction() {
'body').on('click', 'a', function(e) {
e.preventDefault();
app.render(this.href);
;

Additional Notes

If you want to mount a client application directly on the server-rendered markup, add this.staticMarkup to the context before serverRender is called. Your layout should include !!CONTENT!! as the magic word where rendered body markup should be inserted (instead of {this.children}.)