commit 6e4c438c4d02e2b6cdfa135dda8df50fc29ae147
parent 6b09b64800f5ff891db5cb3138c72154760a1d32
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Mon, 13 Oct 2014 19:41:27 +0400
Reactor page layouts
Diffstat:
6 files changed, 111 insertions(+), 92 deletions(-)
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Facebook React Starter Kit
+# React / Flux Starter Kit
[](http://travis-ci.org/kriasoft/react-starter-kit)
[](https://david-dm.org/kriasoft/react-starter-kit)
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
{
- "name": "react-seed",
+ "name": "react-starter-kit",
"private": true,
"version": "0.0.0",
- "description": "Facebook React Starter Kit",
+ "description": "React / Flux Starter Kit",
"repository": "https://github.com/kriasoft/react-starter-kit",
"license": "MIT",
"dependencies": {
@@ -29,7 +29,7 @@
"gulp-load-plugins": "^0.7.0",
"gulp-minify-css": "^0.3.10",
"gulp-plumber": "^0.6.6",
- "gulp-render": "0.0.3",
+ "gulp-render": "^0.0.4",
"gulp-replace": "^0.4.0",
"gulp-size": "^1.1.0",
"gulp-uglify": "^1.0.1",
diff --git a/src/app.js b/src/app.js
@@ -1,24 +1,41 @@
+/*!
+ * Facebook React Starter Kit | https://github.com/kriasoft/react-starter-kit
+ * Copyright (c) KriaSoft, LLC. All rights reserved. See LICENSE.txt
+ */
+
'use strict';
var React = require('react');
+var copyProperties = require('react/lib/copyProperties');
var {Router} = require('director');
var AppDispatcher = require('./AppDispatcher');
var ActionTypes = require('./constants/ActionTypes');
-var HomePage = require('./pages/Index.jsx');
// Export React so the dev tools can find it
(window !== window.top ? window.top : window).React = React;
-function render(component) {
- React.renderComponent(component(), document.body);
- document.title = component.defaultProps.title || HomePage.defaultProps.title;
+/**
+ * Check if Page component has a layout property; and if yes, wrap the page
+ * into the specified layout, then mount to document.body.
+ */
+function render(page) {
+ var child, props = {};
+ while (page.defaultProps.layout) {
+ child = page(props, child);
+ copyProperties(props, page.defaultProps);
+ page = page.defaultProps.layout;
+ }
+ React.renderComponent(page(props, child), document.body);
+ document.title = props.title;
}
+// Define URL routes
var routes = {
- '/': () => render(HomePage),
+ '/': () => render(require('./pages/Index.jsx')),
'/privacy': () => render(require('./pages/Privacy.jsx'))
};
+// Initialize a router
var router = new Router(routes).configure({html5history: true}).init();
AppDispatcher.register(function(payload) {
diff --git a/src/layouts/DefaultLayout.jsx b/src/layouts/DefaultLayout.jsx
@@ -13,6 +13,12 @@ var DefaultLayout = React.createClass({
title: React.PropTypes.string,
breadcrumb: React.PropTypes.component
},
+ getDefaultProps() {
+ return {
+ title: 'React.js Starter Kit',
+ description: 'A skeleton for an isomorphic web application (SPA) built with React.js and Flux'
+ };
+ },
render() {
var header = this.props.breadcrumb ? (
<div className="container">
diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx
@@ -11,43 +11,41 @@ var HomePage = React.createClass({
getDefaultProps() {
return {
title: 'React.js Starter Kit',
- description: 'A skeleton for a web application built with Facebook\'s React.js Library'
+ layout: DefaultLayout
};
},
render() {
return (
- <DefaultLayout title={this.props.title}>
- <div className="container">
- <div className="row">
- <div className="col-sm-4">
- <h3>Runtime Components</h3>
- <dl>
- <dt><a href="https://facebook.github.io/react/">React</a></dt>
- <dd>A JavaScript library for building user interfaces, developed by Facebook</dd>
- <dt><a href="https://github.com/flatiron/director">Director</a></dt>
- <dd>A tiny and isomorphic URL router for JavaScript</dd>
- <dt><a href="http://getbootstrap.com/">Bootstrap</a></dt>
- <dd>CSS framework for developing responsive, mobile first interfaces</dd>
- </dl>
- </div>
- <div className="col-sm-4">
- <h3>Development Tools</h3>
- <dl>
- <dt><a href="http://gulpjs.com">Gulp</a></dt>
- <dd>JavaScript streaming build system and task automation</dd>
- <dt><a href="http://webpack.github.io/">Webpack</a></dt>
- <dd>Compiles front-end source code into modules / bundles</dd>
- <dt><a href="http://www.browsersync.io/">BrowserSync</a></dt>
- <dd>A lightweight HTTP server for development</dd>
- </dl>
- </div>
- <div className="col-sm-4">
- <h3>Fork me on GitHub</h3>
- <p><a href="https://github.com/kriasoft/react-starter-kit">github.com/kriasoft/react-starter-kit</a></p>
- </div>
+ <div className="container">
+ <div className="row">
+ <div className="col-sm-4">
+ <h3>Runtime Components</h3>
+ <dl>
+ <dt><a href="https://facebook.github.io/react/">React</a></dt>
+ <dd>A JavaScript library for building user interfaces, developed by Facebook</dd>
+ <dt><a href="https://github.com/flatiron/director">Director</a></dt>
+ <dd>A tiny and isomorphic URL router for JavaScript</dd>
+ <dt><a href="http://getbootstrap.com/">Bootstrap</a></dt>
+ <dd>CSS framework for developing responsive, mobile first interfaces</dd>
+ </dl>
+ </div>
+ <div className="col-sm-4">
+ <h3>Development Tools</h3>
+ <dl>
+ <dt><a href="http://gulpjs.com">Gulp</a></dt>
+ <dd>JavaScript streaming build system and task automation</dd>
+ <dt><a href="http://webpack.github.io/">Webpack</a></dt>
+ <dd>Compiles front-end source code into modules / bundles</dd>
+ <dt><a href="http://www.browsersync.io/">BrowserSync</a></dt>
+ <dd>A lightweight HTTP server for development</dd>
+ </dl>
+ </div>
+ <div className="col-sm-4">
+ <h3>Fork me on GitHub</h3>
+ <p><a href="https://github.com/kriasoft/react-starter-kit">github.com/kriasoft/react-starter-kit</a></p>
</div>
</div>
- </DefaultLayout>
+ </div>
);
}
});
diff --git a/src/pages/Privacy.jsx b/src/pages/Privacy.jsx
@@ -11,62 +11,60 @@ var DefaultLayout = require('../layouts/DefaultLayout.jsx');
var PrivacyPage = React.createClass({
getDefaultProps() {
return {
- title: 'Privacy Policy'
+ title: 'Privacy Policy',
+ layout: DefaultLayout,
+ breadcrumb: (
+ <ol className="breadcrumb">
+ <li><Link to="/">Home</Link></li>
+ <li className="active">Privacy</li>
+ </ol>
+ )
};
},
render() {
- var breadcrumb = (
- <ol className="breadcrumb">
- <li><Link to="/">Home</Link></li>
- <li className="active">Privacy</li>
- </ol>
- );
-
return (
- <DefaultLayout title={this.props.title} breadcrumb={breadcrumb}>
- <div className="container">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat tortor fermentum mi
- fermentum dignissim. Nullam vel ipsum ut ligula elementum lobortis. Maecenas aliquam, massa laoreet
- lacinia pretium, nisi urna venenatis tortor, nec imperdiet tellus libero efficitur metus. Fusce
- semper posuere ligula, et facilisis metus bibendum interdum. Mauris at mauris sit amet sem pharetra
- commodo a eu leo. Nam at est non risus cursus maximus. Nam feugiat augue libero, id consectetur
- tortor bibendum non. Quisque nec fringilla lorem. Nullam efficitur vulputate mauris, nec maximus leo
- dignissim id.
- </p>
- <p>
- In hac habitasse platea dictumst. Duis sagittis dui ac ex suscipit maximus. Morbi pellentesque
- venenatis felis sed convallis. Nulla varius, nibh vitae placerat tempus, mauris sem elementum ipsum,
- eget sollicitudin nisl est vel purus. Fusce malesuada odio velit, non cursus leo fermentum id. Cras
- pharetra sodales fringilla. Etiam quis est a dolor egestas pellentesque. Maecenas non scelerisque
- purus, congue cursus arcu. Donec vel dapibus mi. Mauris maximus posuere placerat. Sed et libero eu
- nibh tristique mollis a eget lectus. Donec interdum augue sollicitudin vehicula hendrerit. Vivamus
- justo orci, molestie ac sollicitudin ac, lobortis at tellus. Etiam rhoncus ullamcorper risus eu
- tempor. Sed porttitor, neque ac efficitur gravida, arcu lacus pharetra dui, in consequat elit tellus
- auctor nulla. Donec placerat elementum diam, vitae imperdiet lectus luctus at.
- </p>
- <p>
- Nullam eu feugiat mi. Quisque nec tristique nisl, dignissim dictum leo. Nam non quam nisi. Donec
- rutrum turpis ac diam blandit, id pulvinar mauris suscipit. Pellentesque tincidunt libero ultricies
- risus iaculis, sit amet consequat velit blandit. Fusce quis varius nulla. Nullam nisi nisi, suscipit
- ut magna quis, feugiat porta nibh. Sed id enim lectus. Suspendisse elementum justo sapien, sit amet
- consequat orci accumsan et. Aliquam ornare ullamcorper sem sed finibus. Nullam ac lacus pulvinar,
- egestas felis ut, accumsan est.
- </p>
- <p>
- Pellentesque sagittis vehicula sem quis luctus. Proin sodales magna in lorem hendrerit aliquam.
- Integer eu varius orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
- cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
- Curae; Ut at mauris nibh. Suspendisse maximus ac eros at vestibulum.
- </p>
- <p>
- Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque egestas tortor et dui
- consequat faucibus. Nunc vitae odio ornare, venenatis ligula a, vulputate nisl. Aenean congue varius
- ex, sit amet bibendum odio posuere at. Nulla facilisi. In finibus, nulla vitae tincidunt ornare,
- sapien nulla fermentum mauris, sed consectetur tortor arcu eget arcu. Vestibulum vel quam enim.
- </p>
- </div>
- </DefaultLayout>
+ <div className="container">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat tortor fermentum mi
+ fermentum dignissim. Nullam vel ipsum ut ligula elementum lobortis. Maecenas aliquam, massa laoreet
+ lacinia pretium, nisi urna venenatis tortor, nec imperdiet tellus libero efficitur metus. Fusce
+ semper posuere ligula, et facilisis metus bibendum interdum. Mauris at mauris sit amet sem pharetra
+ commodo a eu leo. Nam at est non risus cursus maximus. Nam feugiat augue libero, id consectetur
+ tortor bibendum non. Quisque nec fringilla lorem. Nullam efficitur vulputate mauris, nec maximus leo
+ dignissim id.
+ </p>
+ <p>
+ In hac habitasse platea dictumst. Duis sagittis dui ac ex suscipit maximus. Morbi pellentesque
+ venenatis felis sed convallis. Nulla varius, nibh vitae placerat tempus, mauris sem elementum ipsum,
+ eget sollicitudin nisl est vel purus. Fusce malesuada odio velit, non cursus leo fermentum id. Cras
+ pharetra sodales fringilla. Etiam quis est a dolor egestas pellentesque. Maecenas non scelerisque
+ purus, congue cursus arcu. Donec vel dapibus mi. Mauris maximus posuere placerat. Sed et libero eu
+ nibh tristique mollis a eget lectus. Donec interdum augue sollicitudin vehicula hendrerit. Vivamus
+ justo orci, molestie ac sollicitudin ac, lobortis at tellus. Etiam rhoncus ullamcorper risus eu
+ tempor. Sed porttitor, neque ac efficitur gravida, arcu lacus pharetra dui, in consequat elit tellus
+ auctor nulla. Donec placerat elementum diam, vitae imperdiet lectus luctus at.
+ </p>
+ <p>
+ Nullam eu feugiat mi. Quisque nec tristique nisl, dignissim dictum leo. Nam non quam nisi. Donec
+ rutrum turpis ac diam blandit, id pulvinar mauris suscipit. Pellentesque tincidunt libero ultricies
+ risus iaculis, sit amet consequat velit blandit. Fusce quis varius nulla. Nullam nisi nisi, suscipit
+ ut magna quis, feugiat porta nibh. Sed id enim lectus. Suspendisse elementum justo sapien, sit amet
+ consequat orci accumsan et. Aliquam ornare ullamcorper sem sed finibus. Nullam ac lacus pulvinar,
+ egestas felis ut, accumsan est.
+ </p>
+ <p>
+ Pellentesque sagittis vehicula sem quis luctus. Proin sodales magna in lorem hendrerit aliquam.
+ Integer eu varius orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+ cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+ Curae; Ut at mauris nibh. Suspendisse maximus ac eros at vestibulum.
+ </p>
+ <p>
+ Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque egestas tortor et dui
+ consequat faucibus. Nunc vitae odio ornare, venenatis ligula a, vulputate nisl. Aenean congue varius
+ ex, sit amet bibendum odio posuere at. Nulla facilisi. In finibus, nulla vitae tincidunt ornare,
+ sapien nulla fermentum mauris, sed consectetur tortor arcu eget arcu. Vestibulum vel quam enim.
+ </p>
+ </div>
);
}
});
