React Router and this.props.children.

app/index.js

@@ -6,6 +6,7 @@ const USER_DATA = {
 
 let React = require("react");
 let ReactDOM = require("react-dom");
+import routes from "../config/routes";
 
 /* React components should be:
 
@@ -25,11 +26,28 @@ let ProfilePic = React.createClass({
   }
 });
 
+let Link = React.createClass({
+  changeURL() {
+    console.log(this.props.href);
+    window.location.replace(this.props.href);
+  },
+
+  render() {
+    return (
+      <span
+        style={ { color: "blue", cursor: "pointer" } }
+        onClick={this.changeURL}>
+        {this.props.children}
+      </span>
+    );
+  }
+});
+
 let ProfileLink = React.createClass({
   render: function () {
     return (
       <div>
-        <a href={"https://github.com/" + this.props.username}>{this.props.username}</a>
+        <Link href={"https://github.com/" + this.props.username}>{this.props.username}</Link>
       </div>
     );
   }
@@ -49,14 +67,14 @@ let Avatar = React.createClass({
     return (
       <div>
         <ProfilePic imageUrl={user.image} />
-        <ProfileLink username={user.username} />
         <ProfileName name={user.name} />
+        <ProfileLink username={user.username} />
       </div>
     );
   }
 });
 
 ReactDOM.render(
-  <Avatar user={USER_DATA} />,
+  routes,
   document.getElementById("app")
 );

components/Home.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+let Home = React.createClass({
+  render() {
+    return (
+      <div>Hello from home</div>
+    );
+  }
+});
+
+export default Home;

components/Main.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+let Main = React.createClass({
+  render() {
+    return (
+      <div className="name-container">
+        {this.props.children}
+      </div>
+    );
+  }
+});
+
+export default Main;

config/routes.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { IndexRoute, Route, Router, hashHistory as history } from "react-router";
+import Main from "../components/Main";
+import Home from "../components/Home";
+
+const routes = (
+  <Router history={history}>
+    <Route path="/" component={Main}>
+      <IndexRoute component={Home} />
+    </Route>
+  </Router>
+);
+
+export default routes;

package.json

@@ -4,15 +4,18 @@
   "description": "http://courses.reactjsprogram.com/courses/reactjsfundamentals",
   "main": "index.js",
   "scripts": {
-    "production": "webpack -p",
-    "start": "webpack-dev-server",
+    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
+    "start:dev": "webpack-dev-server --inline --content-base . --history-api-fallback",
+    "start:prod": "webpack -p",
     "babel": "babel app -d dist"
   },
   "author": "Tyler McGinnis <tylermcginnis33@gmail.com> (http://ylermcginnis.com)",
   "license": "ISC",
   "dependencies": {
+    "if-env": "^1.0.0",
     "react": "^0.14.7",
-    "react-dom": "^0.14.7"
+    "react-dom": "^0.14.7",
+    "react-router": "^2.0.1"
   },
   "devDependencies": {
     "babel-cli": "^6.6.5",

webpack.config.js

@@ -9,19 +9,22 @@ module.exports = {
   entry: [
     "./app/index.js"
   ],
-  output: {
-    path: __dirname + "/dist",
-    filename: "index_bundle.js"
-  },
+
   module: {
     loaders: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: "babel-loader"
+        loader: "babel-loader?presets[]=es2015&presets[]=react"
       }
     ]
   },
+
+  output: {
+    filename: "index_bundle.js",
+    path: __dirname + "/dist"
+  },
+
   plugins: [
     HtmlWebpackPluginConfig
   ]