Skip to content
Permalink
Browse files

standard page element

created Page.jsx to pull existing html into a standard page template, raw-loader added for html requires, home and about refactored to use page.jsx, paths.js updated
  • Loading branch information...
BradDenver committed Jan 5, 2015
1 parent c270a35 commit 4d778e6f2fdf9ee9fa2ce2853d56983b519f3357
Showing with 1,142 additions and 1,079 deletions.
  1. +596 −569 dev/bundle.js
  2. +507 −479 dev/bundlePage.js
  3. +0 −11 elements/About.jsx
  4. +0 −11 elements/Home.jsx
  5. +1 −1 elements/Layout.jsx
  6. +20 −0 elements/Page.jsx
  7. +3 −4 elements/Routes.jsx
  8. +3 −2 package.json
  9. +1 −0 pages/about.html
  10. +1 −0 pages/home.html
  11. +9 −2 paths.js
  12. +1 −0 webpack.config.js

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
@@ -13,7 +13,7 @@ var Layout = React.createClass({

render: function() {
var script = (process.env.NODE_ENV!=='production') ? <script src="http://localhost:3000/scripts/bundle.js"></script> : '';
var title = paths.titleForPath(this.getPathname());
var title = paths.titleForPath(this.getPathname()) + ' - React Static Site';
return (
<html>
<head>
@@ -0,0 +1,20 @@
var React = require('react'),
Router = require('react-router');

var Page = React.createClass({

mixins: [Router.State],

render: function() {
var content = paths.pageForPath(this.getPathname()),
title = paths.titleForPath(this.getPathname());
return (
<div>
<h1>{title}</h1>
<span dangerouslySetInnerHTML={{__html: content}} />
</div>
);
}
});

module.exports = Page;
@@ -5,15 +5,14 @@ var React = require('react'),
DefaultRoute = Router.DefaultRoute,
RouteHandler = Router.RouteHandler,
Layout = require('./Layout.jsx'),
Home = require('./Home.jsx'),
About = require('./About.jsx');
Page = require('./Page.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 name="about" handler={Page}/>
<DefaultRoute handler={Page}/>
</Route>
);

@@ -9,11 +9,12 @@
},
"author": "",
"dependencies": {
"react": "^0.12.2",
"react-router": "^0.11.6",
"css-loader": "^0.9.0",
"jsx-loader": "^0.12.2",
"raw-loader": "^0.5.1",
"react": "^0.12.2",
"react-hot-loader": "^1.0.4",
"react-router": "^0.11.6",
"style-loader": "^0.8.2",
"webpack": "^1.4.15",
"webpack-dev-server": "^1.7.0"
@@ -0,0 +1 @@
<p>the about html</p>
@@ -0,0 +1 @@
<p>Welcome to the react static site demo</p>
@@ -1,16 +1,23 @@
var paths = {
'/': {
'title': 'React Static Site'
'title': 'Home',
'page': './home.html'
},
'/about': {
'title': 'About - React Static Site'
'title': 'About',
'page': './about.html'
}
};

var pageReq = require.context('./pages', false, /^\.\/.*\.html$/);

module.exports = {
allPaths: function() {
return paths;
},
pageForPath: function(path) {
return pageReq(paths[path].page);
},
titleForPath: function(path) {
return paths[path].title;
}
@@ -14,6 +14,7 @@ var moduleCommon = {
{ test: /\.css$/, loader: 'style!css' },
// Pass *.jsx files through jsx-loader transform
{ test: /\.jsx$/, loaders: ['react-hot', 'jsx'] },
{ test: /\.html$/, loader: 'raw' },
]
};

0 comments on commit 4d778e6

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.