Final version.

.gitignore

@@ -1,5 +1,5 @@
 /.idea/
-/dist/
-/node_modules/
-
 /npm-debug.log
+node_modules
+.DS_Store
+dist

README.md

@@ -21,3 +21,7 @@
       babel-{core,loader}     \
       babel-preset-react
 
+
+## Next up
+
+https://github.com/ReactjsProgram/react-fundamentals-curriculum

components/ConfirmBattle.js → app/components/ConfirmBattle.js

@@ -10,7 +10,7 @@ const PropTypes = React.PropTypes;
 
 const ConfirmBattle = (props) => {
   return props.isLoading === true
-    ? <Loading Zspeed={400} Ztext="Hold on a moment" />
+    ? <Loading speed={400} text="Hold on a moment" />
     : (
     <MainContainer>
       <h1>Confirm Players</h1>
@@ -28,7 +28,7 @@ const ConfirmBattle = (props) => {
             Initiate Battle!</button>
         </div>
         <div className="col-sm-12" style={styles.space}>
-          <Link to="playerOne">
+          <Link to="/playerOne">
             <button type="button" className="btn btn-lg btn-danger">Reselect players!</button>
           </Link>
         </div>
@@ -38,8 +38,8 @@ const ConfirmBattle = (props) => {
 };
 
 ConfirmBattle.propTypes = {
-  onInitiateBattle: PropTypes.func.isRequired,
   isLoading: PropTypes.bool.isRequired,
+  onInitiateBattle: PropTypes.func.isRequired,
   playerInfo: PropTypes.array.isRequired
 };
 

app/components/Main.js

@@ -0,0 +1,23 @@
+import React from "react";
+import ReactCSSTransitionGroup from "react-addons-css-transition-group";
+
+// Hello style-loader!css-loader.
+require("../main.css");
+
+class Main extends React.Component {
+  render() {
+    console.log(this.props.location.pathname);
+    return (
+      <div className="name-container">
+        <ReactCSSTransitionGroup
+          transitionName="appear"
+          transitionEnterTimeout={500}
+          transitionLeaveTimeout={500}>
+          {React.cloneElement(this.props.children, { key: this.props.location.pathname })}
+        </ReactCSSTransitionGroup>
+      </div>
+    );
+  }
+}
+
+export default Main;

app/index.js

@@ -6,7 +6,7 @@ const USER_DATA = {
 
 let React = require("react");
 let ReactDOM = require("react-dom");
-import routes from "../config/routes";
+import routes from "./config/routes";
 
 /* React components should be:
 

app/main.css

@@ -0,0 +1,14 @@
+.appear-enter {
+  transition-duration: .7s;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  opacity: 0;
+}
+
+.appear-enter.appear-enter-active {
+  opacity: 1;
+}
+
+.appear-leave {
+  opacity: 0;
+}

components/Main.js

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

package.json

@@ -15,6 +15,7 @@
     "axios": "^0.9.1",
     "if-env": "^1.0.0",
     "react": "^0.14.7",
+    "react-addons-css-transition-group": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-router": "^2.0.1"
   },
@@ -24,7 +25,9 @@
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
+    "css-loader": "^0.23.1",
     "html-webpack-plugin": "^2.14.0",
+    "style-loader": "^0.13.1",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1"
   }

webpack.config.js

@@ -1,32 +1,37 @@
-var HtmlWebpackPlugin = require("html-webpack-plugin");
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
-  template: __dirname + "/app/index.html",
-  filename: "index.html",
-  inject: "body"
+  template: __dirname + '/app/index.html',
+  filename: 'index.html',
+  inject: 'body'
 });
 
 module.exports = {
   entry: [
-    "./app/index.js"
+    './app/index.js'
   ],
 
   module: {
     loaders: [
       {
-        loader: "babel-loader",
+        loader: 'babel-loader',
         test: /\.js$/,
+        include: __dirname + '/app',
         exclude: /node_modules/,
         query: {
           plugins: [],
-          presets: ["es2015", "react"]
+          presets: ['es2015', 'react']
         }
+      },
+      {
+        loader: 'style-loader!css-loader',
+        test: /\.css$/
       }
     ]
   },
 
   output: {
-    filename: "index_bundle.js",
-    path: __dirname + "/dist"
+    filename: 'index_bundle.js',
+    path: __dirname + '/dist'
   },
 
   plugins: [