multipage

added basic styling with purecss, created about page, basic nav and router
BradDenver · Dec 31, 2014 · 507b3a1 · 507b3a1
1 parent 303b95a
commit 507b3a1
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 12 deletions.
diff --git a/dev/entry.jsx b/dev/entry.jsx
@@ -1,7 +1,12 @@
 var React = require('react'),
-  Layout = require('../elements/Layout.jsx');
+  Router = require('react-router'),
+  Layout = require('../elements/Layout.jsx'),
+  Routes = require('../elements/Routes.jsx');
 
+require('../bower_components/pure/pure.css');
+require('../elements/style.css');
 
-React.render(<Layout title="React Static Site" >Hello World</Layout>, document);
-
+Router.run(Routes, Router.HistoryLocation,  function (Handler) {
+  React.render(React.createElement(Handler, null), document);
+});
 
diff --git a/dev/index.html b/dev/index.html
@@ -1 +1 @@
-<html data-reactid=".d3jmodpqm8" data-react-checksum="1282699795"><head data-reactid=".d3jmodpqm8.0"><title data-reactid=".d3jmodpqm8.0.0">React Static Site</title></head><body data-reactid=".d3jmodpqm8.1"><span data-reactid=".d3jmodpqm8.1.0">Hello World</span><script src="http://localhost:3000/scripts/bundle.js" data-reactid=".d3jmodpqm8.1.1"></script></body></html>
+<html data-reactid=".9aeijba8e8" data-react-checksum="947465188"><head data-reactid=".9aeijba8e8.0"><title data-reactid=".9aeijba8e8.0.0">React Static Site</title></head><body data-reactid=".9aeijba8e8.1"><div id="layout" data-reactid=".9aeijba8e8.1.0"><nav id="layout-nav" data-reactid=".9aeijba8e8.1.0.0"><div class="pure-menu pure-menu-open" data-reactid=".9aeijba8e8.1.0.0.0"><a class="pure-menu-heading" data-reactid=".9aeijba8e8.1.0.0.0.0">Site Nav</a><ul data-reactid=".9aeijba8e8.1.0.0.0.1"><li data-reactid=".9aeijba8e8.1.0.0.0.1.0"><a href="/" class="active" data-reactid=".9aeijba8e8.1.0.0.0.1.0.0">Home</a></li><li data-reactid=".9aeijba8e8.1.0.0.0.1.1"><a href="/about" class="" data-reactid=".9aeijba8e8.1.0.0.0.1.1.0">About</a></li></ul></div></nav><main role="main" data-reactid=".9aeijba8e8.1.0.1"><h1 data-reactid=".9aeijba8e8.1.0.1.1">Home</h1></main></div><script src="http://localhost:3000/scripts/bundle.js" data-reactid=".9aeijba8e8.1.1"></script></body></html>
diff --git a/elements/About.jsx b/elements/About.jsx
@@ -0,0 +1,11 @@
+var React = require('react');
+
+var About = React.createClass({
+  render: function() {
+    return (
+      <h1>About</h1>
+    );
+  }
+});
+
+module.exports = About;
diff --git a/elements/Home.jsx b/elements/Home.jsx
@@ -0,0 +1,11 @@
+var React = require('react');
+
+var Home = React.createClass({
+  render: function() {
+    return (
+      <h1>Home</h1>
+    );
+  }
+});
+
+module.exports = Home;
diff --git a/elements/Layout.jsx b/elements/Layout.jsx
@@ -1,6 +1,13 @@
-var React = require('react');
+var React = require('react'),
+  LayoutNav = require('./LayoutNav.jsx');
+  Router = require('react-router');
+  RouteHandler = Router.RouteHandler;
 
 var Layout = React.createClass({
+  getDefaultProps: function() {
+    return {title: 'React Static Site'};
+  },
+
   render: function() {
     var script = (process.env.NODE_ENV!=='production') ? <script src="http://localhost:3000/scripts/bundle.js"></script> : '';
     return (
@@ -9,7 +16,13 @@ var Layout = React.createClass({
           <title>{this.props.title}</title>
         </head>
         <body>
-          {this.props.children}
+          <div id="layout">
+            <LayoutNav/>
+            <main role="main">
+              {this.props.children}
+              <RouteHandler/>
+            </main>
+          </div>
           {script}
         </body>
       </html>

diff --git a/elements/LayoutNav.jsx b/elements/LayoutNav.jsx
@@ -0,0 +1,22 @@
+var React = require('react');
+  Router = require('react-router'),
+  Link = Router.Link;
+
+var LayoutNav = React.createClass({
+  render: function() {
+    return (
+      <nav id="layout-nav">
+        <div className="pure-menu pure-menu-open">
+          <a className="pure-menu-heading">Site Nav</a>
+
+          <ul>
+            <li><Link to="home">Home</Link></li>
+            <li><Link to="about">About</Link></li>
+          </ul>
+        </div>
+      </nav>
+    );
+  }
+});
+
+module.exports = LayoutNav;
diff --git a/elements/Routes.jsx b/elements/Routes.jsx
@@ -0,0 +1,20 @@
+var React = require('react'),
+  Router = require('react-router');
+  Route = Router.Route,
+  NotFoundRoute = Router.NotFoundRoute,
+  DefaultRoute = Router.DefaultRoute,
+  RouteHandler = Router.RouteHandler,
+  Layout = require('./Layout.jsx'),
+  Home = require('./Home.jsx'),
+  About = require('./About.jsx');
+
+
+// create the index.html to be used by webpack
+var Routes = (
+  <Route name="home" path="/" handler={Layout}>
+    <Route name="about" handler={About}/>
+    <DefaultRoute handler={Home}/>
+  </Route>
+);
+
+module.exports = Routes;
diff --git a/elements/style.css b/elements/style.css
@@ -0,0 +1,29 @@
+#layout {
+  padding-left: 150px;
+  left: 0;
+  position: relative;
+}
+
+#layout-nav {
+  left: 150px;
+  margin-left: -150px;
+  width: 150px;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+  background: #191818;
+  color: #999;
+  overflow-y: auto;
+  -webkit-overflow-scroll: touch;
+}
+
+#layout-nav .pure-menu,
+#layout-nav .pure-menu ul {
+    border: none;
+    background: transparent;
+}
+
+main {
+  padding: 2em;
+}
diff --git a/package.json b/package.json
@@ -9,11 +9,14 @@
   "author": "",
   "dependencies": {
     "node-jsx": "^0.12.4",
-    "react": "^0.12.2"
+    "react": "^0.12.2",
+    "react-router": "^0.11.6"
   },
   "devDependencies": {
+    "css-loader": "^0.9.0",
     "jsx-loader": "^0.12.2",
     "react-hot-loader": "^1.0.4",
+    "style-loader": "^0.8.2",
     "webpack": "^1.4.15",
     "webpack-dev-server": "^1.7.0"
   }

diff --git a/server.js b/server.js
@@ -2,17 +2,19 @@ require('node-jsx').install();
 
 var fs = require('fs'),
   React = require('react'),
+  Router = require('react-router'),
   webpack = require('webpack'),
   WebpackDevServer = require('webpack-dev-server'),
   config = require('./webpack.config'),
-  Layout = require('./elements/Layout.jsx');
+  Layout = require('./elements/Layout.jsx'),
+  Routes = require('./elements/Routes.jsx');
 
 
 // create the index.html to be used by webpack
-fs.writeFileSync('dev/index.html', React.renderToString(React.createElement(Layout, {
-  title: 'React Static Site',
-  children: 'Hello World'
-})));
+Router.run(Routes, '/',  function (Handler) {
+  fs.writeFileSync('dev/index.html', React.renderToString(React.createElement(Handler, null)));
+});
+
 
 var server = new WebpackDevServer(webpack(config), {
   contentBase: './dev',

diff --git a/webpack.config.js b/webpack.config.js
@@ -31,6 +31,8 @@ module.exports = {
 
   module: {
     loaders: [
+      // Pass *.css files through css-loader and style-loader transforms
+      { test: /\.css$/, loader: 'style!css' },
       // Pass *.jsx files through jsx-loader transform
       { test: /\.jsx$/, loaders: ['react-hot', 'jsx'] },
     ]