add example of react routing

Author: danwild

README.md

@@ -6,8 +6,12 @@ client application build and Django's opinionated pipeline/staticfiles systems.
 
 In short, we'll let Django do what it is good at; Server-side/ORM stuff, while de-coupling the client for greater flexibility (and less confusing black-box Django magic!)
 
+## routing notes
+* Routing (e.g. `/`, `/about`) has been configured using `react-router-dom`.
+* In our Django apps `urls.py` we have defined a catchall which essentially defers routing to React.
+* There is also an example url configured to allow django to serve a route template (depending on your use case you may want a mix of both approaches).
+
 ## todo
-* Routing, React?
 * Client/Server request auth.
 
 ## install, build, run etc.
@@ -16,7 +20,7 @@ From project root:
 ```shell
 # javascript things
 npm install                         # install js packages
-npm run watch                       # run webpack build for client app, and rebuild on change*
+npm run watch                       # run webpack build for client app, and rebuild on \*change
 
 # python things
 virtualenv venv                     # create python virtualenv

assets/client/js/index.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+var ReactDOM = require('react-dom');
+
+// Import routing components
+import { BrowserRouter, Route } from 'react-router-dom';
+
+class Home extends Component {
+	render(){
+		return (<h1>Home Page</h1>);
+	}
+}
+
+class About extends Component {
+	render(){
+		return (<h1>About page</h1>);
+	}
+}
+
+/*Each route is defined with Route*/
+ReactDOM.render(
+	<BrowserRouter>
+		<div>
+			<Route exact path="/" component={Home}/>
+			<Route path="/about" component={About}/>
+		</div>
+	</BrowserRouter>,
+	document.getElementById('react-app')
+);

assets/js/app.jsx

@@ -2,6 +2,13 @@
 from . import views
 
 urlpatterns = [
-    url(r'^$', views.index, name='index'),
+
+    # match all pages to our index so React can handle routing
+    url(r'^(?:.*)/?$', views.index),
+
+    # how you might explicitly define route
+    # url(r'^$', views.index, name='index'),
+
+    # example of how to static template from django just for fun
     url(r'^test/', views.test, name='test'),
 ]

assets/js/index.js

@@ -1,33 +1,34 @@
 {
-	"name": "react-webpack-django",
-	"version": "0.0.1",
-	"description": "",
-	"main": "index.js",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"build": "./node_modules/.bin/webpack --config webpack.config.js",
-		"watch": "./node_modules/.bin/webpack --config webpack.config.js --watch"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/danwild/react-webpack-django.git"
-	},
-	"author": "",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/danwild/react-webpack-django/issues"
-	},
-	"homepage": "https://github.com/danwild/react-webpack-django#readme",
-	"devDependencies": {
-		"babel": "^6.23.0",
-		"babel-core": "^6.25.0",
-		"babel-loader": "^7.1.1",
-		"babel-preset-env": "^1.6.0",
-		"babel-preset-es2015": "^6.24.1",
-		"babel-preset-react": "^6.24.1",
-		"react": "^15.6.1",
-		"react-dom": "^15.6.1",
-		"webpack": "^3.5.4",
-		"webpack-bundle-tracker": "^0.2.0"
-	}
+  "name": "react-webpack-django",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "./node_modules/.bin/webpack --config webpack.config.js",
+    "watch": "./node_modules/.bin/webpack --config webpack.config.js --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/danwild/react-webpack-django.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/danwild/react-webpack-django/issues"
+  },
+  "homepage": "https://github.com/danwild/react-webpack-django#readme",
+  "devDependencies": {
+    "babel": "^6.23.0",
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.1",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-router-dom": "^4.1.2",
+    "webpack": "^3.5.4",
+    "webpack-bundle-tracker": "^0.2.0"
+  }
 }

myapp/urls.py

@@ -5,7 +5,7 @@ var BundleTracker = require('webpack-bundle-tracker');
 module.exports = {
 	context: __dirname,
 
-	entry: './assets/js/index.js', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
+	entry: './assets/client/js/index.jsx', // entry point of our app. assets/client/js/index.jsx should require other js modules and dependencies it needs
 
 	output: {
 		path: path.resolve('./assets/bundles/'),