commit 0aaf3f39914085fe6558fcc8a5ccb2efec30ed3b
parent c5469a3bedfa3e637347bc8747e36dbdcd654589
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Sat, 13 Sep 2014 01:20:08 +0400
Add routes, pages, components, layouts
Diffstat:
8 files changed, 156 insertions(+), 42 deletions(-)
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
"merge-stream": "^0.1.5",
"minimist": "^1.1.0",
"protractor": "^1.2.0",
+ "react-router": "^0.7.0",
"rimraf": "^2.2.8",
"run-sequence": "^0.3.6",
"url-loader": "^0.5.5",
diff --git a/src/app.jsx b/src/app.jsx
@@ -3,41 +3,21 @@
*/
var React = require('react');
+var Router = require('react-router');
-var Navbar = React.createClass({
- render: function () {
- return (
- <div className="navbar navbar-inverse navbar-fixed-top">
- <div className="container">
- <a className="navbar-brand" href="/"><img src="/images/logo-small.png" width="38" height="38" alt="" /> React Seed</a>
- </div>
- </div>
- );
- }
-});
+var Routes = Router.Routes;
+var Route = Router.Route;
-var Page = React.createClass({
- render: function () {
- return (
- <div className="container">
- <h2>Facebook React Starter Kit</h2>
- <p>This is a single-page application (SPA) project template based on Facebook React.</p>
- <h4>Runtime Components:</h4>
- <ul>
- <li><a href="https://facebook.github.io/react/">React</a> - A JavaScript library for building user interfaces, developed by Facebook</li>
- <li><a href="http://getbootstrap.com/">Bootstrap</a> - CSS framework for developing responsive, mobile first interfaces</li>
- <li><a href="http://jquery.com/">jQuery</a> - a JavaScript library designed to simplify the client-side scripting of HTML</li>
- </ul>
- <h4>Development Tools:</h4>
- <ul>
- <li><a href="http://webpack.github.io/">Webpack</a> - Compiles front-end source code into modules / bundles</li>
- <li><a href="http://gulpjs.com">Gulp</a> - JavaScript streaming build system and task automation</li>
- </ul>
- <h3>Fork me on GitHub</h3>
- <p><a href="https://github.com/kriasoft/react-seed">https://github.com/kriasoft/react-seed</a></p>
- </div>
- );
- }
-});
+var DefaultLayout = require('./layouts/Default.jsx');
+var HomePage = require('./pages/Home.jsx');
+var PrivacyPage = require('./pages/Privacy.jsx');
-React.renderComponent(<div><Navbar /><Page /></div>, document.body);
-\ No newline at end of file
+React.renderComponent(
+ <Routes location="history">
+ <Route name="app" path="/" handler={DefaultLayout}>
+ <Route name="home" path="/" handler={HomePage} />
+ <Route name="privacy" path="/privacy" handler={PrivacyPage} />
+ </Route>
+ </Routes>,
+ document.body
+);
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -0,0 +1,17 @@
+/**
+ * @jsx React.DOM
+ */
+
+var React = require('react');
+
+module.exports = React.createClass({
+ render: function () {
+ return (
+ <div className="navbar navbar-inverse navbar-fixed-top">
+ <div className="container">
+ <a className="navbar-brand" href="/"><img src="/images/logo-small.png" width="38" height="38" alt="" /> React Seed</a>
+ </div>
+ </div>
+ );
+ }
+});
diff --git a/src/layouts/Default.jsx b/src/layouts/Default.jsx
@@ -0,0 +1,23 @@
+/**
+ * @jsx React.DOM
+ */
+
+var React = require('react');
+var Link = require('react-router').Link;
+var Navbar = require('../components/Navbar.jsx');
+
+module.exports = React.createClass({
+ render: function () {
+ return (
+ <div>
+ <Navbar />
+ <this.props.activeRouteHandler />
+ <div className="navbar navbar-fixed-bottom">
+ <div className="container">
+ <p className="text-muted">© KriaSoft • <Link to="home">Home</Link> • <Link to="privacy">Privacy</Link></p>
+ </div>
+ </div>
+ </div>
+ );
+ }
+});
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -0,0 +1,29 @@
+/**
+ * @jsx React.DOM
+ */
+
+var React = require('react');
+
+module.exports = React.createClass({
+ render: function () {
+ return (
+ <div className="container">
+ <h2>Facebook React Starter Kit</h2>
+ <p>This is a single-page application (SPA) project template based on Facebook React.</p>
+ <h4>Runtime Components:</h4>
+ <ul>
+ <li><a href="https://facebook.github.io/react/">React</a> - A JavaScript library for building user interfaces, developed by Facebook</li>
+ <li><a href="http://getbootstrap.com/">Bootstrap</a> - CSS framework for developing responsive, mobile first interfaces</li>
+ <li><a href="http://jquery.com/">jQuery</a> - a JavaScript library designed to simplify the client-side scripting of HTML</li>
+ </ul>
+ <h4>Development Tools:</h4>
+ <ul>
+ <li><a href="http://webpack.github.io/">Webpack</a> - Compiles front-end source code into modules / bundles</li>
+ <li><a href="http://gulpjs.com">Gulp</a> - JavaScript streaming build system and task automation</li>
+ </ul>
+ <h3>Fork me on GitHub</h3>
+ <p><a href="https://github.com/kriasoft/react-seed">https://github.com/kriasoft/react-seed</a></p>
+ </div>
+ );
+ }
+});
diff --git a/src/pages/Privacy.jsx b/src/pages/Privacy.jsx
@@ -0,0 +1,55 @@
+/**
+ * @jsx React.DOM
+ */
+
+var React = require('react');
+
+module.exports = React.createClass({
+ render: function () {
+ return (
+ <div className="container">
+ <h2>Privacy Policy</h2>
+ <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>
+ );
+ }
+});
diff --git a/src/styles/base.less b/src/styles/base.less
@@ -6,10 +6,6 @@ html {
padding-top: 48px;
}
-html, body {
- background-color: #f9f9f9;
-}
-
/* ==========================================================================
Browse Happy prompt
========================================================================== */
@@ -19,4 +15,17 @@ html, body {
background: #ccc;
color: #000;
padding: 0.2em 0;
-}
-\ No newline at end of file
+}
+
+/* ==========================================================================
+ Footer
+ ========================================================================== */
+
+.navbar-fixed-bottom {
+
+ background-color: darken(@body-bg, 2%);
+
+ .text-muted {
+ margin-top: 1em;
+ }
+}
diff --git a/src/styles/variables.less b/src/styles/variables.less
@@ -1,3 +1,5 @@
/* ==========================================================================
Variables
========================================================================== */
+
+@body-bg: #f9f9f9;
