diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..dd477ca --- /dev/null +++ b/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "react", + "es2015" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 5910d8f..705c2a0 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ open http://localhost:5000 1. Webpack's `require.ensure` defines code splitting points in the app. 2. We polyfill `require.ensure` for node to just do a normal `require`. 3. The server renders the app with `match` and the stateless - ``. + ``. 4. When the client JavaScript loads, we use `match` to trigger the split code to load before rendering. If we didn't do that, then the first render would be `null` and not reuse the server rendered markup. diff --git a/modules/client.js b/modules/client.js index 7c66ef5..6e97a25 100644 --- a/modules/client.js +++ b/modules/client.js @@ -1,7 +1,6 @@ import React from 'react' -import { match, Router } from 'react-router' +import { match, Router, browserHistory } from 'react-router' import { render } from 'react-dom' -import { createHistory } from 'history' import routes from './routes/RootRoute' const { pathname, search, hash } = window.location @@ -11,7 +10,7 @@ const location = `${pathname}${search}${hash}` // loading route/component code for the initial location match({ routes, location }, () => { render( - , + , document.getElementById('app') ) }) diff --git a/modules/routes/RootRoute.js b/modules/routes/RootRoute.js index 136bc44..6475baa 100644 --- a/modules/routes/RootRoute.js +++ b/modules/routes/RootRoute.js @@ -9,7 +9,7 @@ export default { component: App, getChildRoutes(location, cb) { require.ensure([], (require) => { - cb(null, [ require('./AboutRoute') ]) + cb(null, [ require('./AboutRoute').default ]) }) }, indexRoute: { diff --git a/modules/server.js b/modules/server.js index 88050ec..5636862 100644 --- a/modules/server.js +++ b/modules/server.js @@ -1,7 +1,7 @@ import http from 'http' import React from 'react' import { renderToString } from 'react-dom/server' -import { match, RoutingContext } from 'react-router' +import { match, RouterContext } from 'react-router' import fs from 'fs' import { createPage, write, writeError, writeNotFound, redirect } from './utils/server-utils' import routes from './routes/RootRoute' @@ -9,7 +9,7 @@ import routes from './routes/RootRoute' const PORT = process.env.PORT || 5000 function renderApp(props, res) { - const markup = renderToString() + const markup = renderToString() const html = createPage(markup) write(html, 'text/html', res) } diff --git a/package.json b/package.json index 8c36b44..7a3ecff 100644 --- a/package.json +++ b/package.json @@ -4,18 +4,20 @@ "description": "", "main": "client.js", "dependencies": { - "babel": "^5.8.34", - "babel-core": "^5.8.34", - "babel-loader": "^5.4.0", - "history": "^1.13.1", "react": "^0.14.2", "react-dom": "^0.14.2", - "react-router": "^1.0.0", + "react-router": "^2.4.0", "webpack": "^1.12.6" }, "scripts": { "start": "NODE_ENV=production webpack --progress && babel-node modules/server.js" }, "author": "Ryan Florence", - "license": "ISC" + "license": "ISC", + "devDependencies": { + "babel-cli": "^6.8.0", + "babel-loader": "^6.2.4", + "babel-preset-es2015": "^6.6.0", + "babel-preset-react": "^6.5.0" + } }