React Layout (declarative layouts for Facebook React)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
README.md
gulpfile.js
index.html
package.json
webpack.config.js

README.md

React Layout

N.B. this repo is currently in a demo state, where the React Layout is contained within example code.

An experiment with creating declarative composites of React components.

How it works

For each main state of the app, you create a new layout. Common parts of layouts can be included as a 'partial', which is essentially an object (which in this case is defined and required as a module.)

The benefit of using React Layout is that if the same component is already mounted in that location, it will reuse it. This also applies to if a components property changes (such as a title). (So, this all works in a vaguely similar way to React's reconciliation.)

Try it

  1. Install dependencies with npm install
  2. Run gulp, which will boot a webpack-dev-server on http://localhost:8080

Docs

  • ReactLayout instances require the following:
    • An 'app' instance, so that it can set properties from the top level of your application each time (@todo — this may be an anti-pattern)
    • A 'config' object, which is a declarative nested object of your component structure
  • You can only optionally provided a beforeEnter callback

Example

Here is an example of a ReactLayout instance.

// (Make sure you have required all necessary components for this layout)
var layout = new ReactLayout({
	app: app,
	config: {
		component: Outer,
		header: {
			component: Header,
			title: 'Your posts'
		},
		body: {
			component: List,
			onItemClick: function(item) {
				pubsub.publish('postDetailRequested', {
					item: item
				});
			}
		}
	},
	beforeEnter: function(callback) {
		// Immediate render
		callback.call(this);

		// Render again once posts are found
		if(!this.state.body.data) {
			Posts.find(function(posts) {
				this.state.body.data = posts;
				callback.call(this);
			}.bind(this));
		}
	}
});