Permalink
Browse files

multipage

added basic styling with purecss, created about page, basic nav and router
  • Loading branch information...
BradDenver committed Dec 31, 2014
1 parent 303b95a commit 507b3a1b58565f5d2da4e69d2ce7efa3ae7272b7
Showing with 130 additions and 12 deletions.
  1. +8 −3 dev/entry.jsx
  2. +1 −1 dev/index.html
  3. +11 −0 elements/About.jsx
  4. +11 −0 elements/Home.jsx
  5. +15 −2 elements/Layout.jsx
  6. +22 −0 elements/LayoutNav.jsx
  7. +20 −0 elements/Routes.jsx
  8. +29 −0 elements/style.css
  9. +4 −1 package.json
  10. +7 −5 server.js
  11. +2 −0 webpack.config.js
View
@@ -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);
});
View
@@ -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>
View
@@ -0,0 +1,11 @@
var React = require('react');
var About = React.createClass({
render: function() {
return (
<h1>About</h1>
);
}
});
module.exports = About;
View
@@ -0,0 +1,11 @@
var React = require('react');
var Home = React.createClass({
render: function() {
return (
<h1>Home</h1>
);
}
});
module.exports = Home;
View
@@ -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>
View
@@ -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;
View
@@ -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;
View
@@ -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;
}
View
@@ -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"
}
View
@@ -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',
View
@@ -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'] },
]

0 comments on commit 507b3a1

Please sign in to comment.