add react router

.babelrc

+{
+  "presets": [
+    "react-app",
+    ["env", {
+      "targets": {
+        "node": "current"
+      }
+    }]
+  ],
+  "plugins": [
+    "transform-decorators-legacy"
+  ]
+}
\ No newline at end of file

.bowerrc

+{
+  "directory": "src/bw",
+  "timeout": 120000
+}
\ No newline at end of file

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+src/bw
 
 # testing
 /coverage

bower.json

+{
+  "name": "todo-app",
+  "description": "",
+  "main": "",
+  "authors": [
+    "manhvu <manh.vv.htth@gmail.com>"
+  ],
+  "license": "MIT",
+  "homepage": "",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "src/bw",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "bootstrap": "^3.3.7"
+  }
+}

package.json

@@ -31,8 +31,10 @@
     "postcss-loader": "2.0.6",
     "promise": "8.0.1",
     "react": "^15.6.1",
+    "react-bootstrap": "^0.31.2",
     "react-dev-utils": "^4.0.1",
     "react-dom": "^15.6.1",
+    "react-router-dom": "^4.2.2",
     "style-loader": "0.18.2",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.5.9",
@@ -79,12 +81,12 @@
       "node"
     ]
   },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
   "eslintConfig": {
     "extends": "react-app"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-env": "^1.6.0"
   }
 }

scripts/build.js

+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const path = require('path');
+const chalk = require('chalk');
+const fs = require('fs-extra');
+const webpack = require('webpack');
+const config = require('../config/webpack.config.prod');
+const paths = require('../config/paths');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
+
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// First, read the current file sizes in build directory.
+// This lets us display how much they changed later.
+measureFileSizesBeforeBuild(paths.appBuild)
+  .then(previousFileSizes => {
+    // Remove all content but keep the directory so that
+    // if you're in it, you don't end up in Trash
+    fs.emptyDirSync(paths.appBuild);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({ stats, previousFileSizes, warnings }) => {
+      if (warnings.length) {
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(warnings.join('\n\n'));
+        console.log(
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
+        );
+      } else {
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+
+      console.log('File sizes after gzip:\n');
+      printFileSizesAfterBuild(
+        stats,
+        previousFileSizes,
+        paths.appBuild,
+        WARN_AFTER_BUNDLE_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
+      );
+      console.log();
+
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrl;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      console.log(chalk.red('Failed to compile.\n'));
+      printBuildError(err);
+      process.exit(1);
+    }
+  );
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log('Creating an optimized production build...');
+
+  let compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        return reject(err);
+      }
+      const messages = formatWebpackMessages(stats.toJson({}, true));
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        console.log(
+          chalk.yellow(
+            '\nTreating warnings as errors because process.env.CI = true.\n' +
+              'Most CI servers set it automatically.\n'
+          )
+        );
+        return reject(new Error(messages.warnings.join('\n\n')));
+      }
+      return resolve({
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings,
+      });
+    });
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync(paths.appPublic, paths.appBuild, {
+    dereference: true,
+    filter: file => file !== paths.appHtml,
+  });
+}

scripts/start.js

+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const fs = require('fs');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const paths = require('../config/paths');
+const config = require('../config/webpack.config.dev');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+// We attempt to use the default port but if it is busy, we offer the user to
+// run on a different port. `detect()` Promise resolves to the next free port.
+choosePort(HOST, DEFAULT_PORT)
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+    const urls = prepareUrls(protocol, HOST, port);
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    // Serve webpack assets generated by the compiler over a web sever.
+    const serverConfig = createDevServerConfig(
+      proxyConfig,
+      urls.lanUrlForConfig
+    );
+    const devServer = new WebpackDevServer(compiler, serverConfig);
+    // Launch WebpackDevServer.
+    devServer.listen(port, HOST, err => {
+      if (err) {
+        return console.log(err);
+      }
+      if (isInteractive) {
+        clearConsole();
+      }
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
+      process.on(sig, function() {
+        devServer.close();
+        process.exit();
+      });
+    });
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

scripts/test.js

+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const jest = require('jest');
+const argv = process.argv.slice(2);
+
+// Watch unless on CI or in coverage mode
+if (!process.env.CI && argv.indexOf('--coverage') < 0) {
+  argv.push('--watch');
+}
+
+
+jest.run(argv);

src/App.js

 import React, { Component } from 'react';
-import logo from './logo.svg';
+
+import './bw/bootstrap/dist/css/bootstrap.css'
 import './App.css';
 
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+
+import { NavigationBar } from './nav/NavigationBar';
+import { HomePage } from './pages/HomePage';
+import { AboutPage } from './pages/AboutPage';
+import { TopicPage } from './pages/TopicPage';
+
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
+      <Router>
+        <div>
+          <NavigationBar/>
+
+          <Route exact path="/" component={HomePage}/>
+          <Route path="/about" component={AboutPage}/>
+          <Route path="/topics" component={TopicPage}/>
         </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+      </Router>
     );
   }
 }

src/nav/NavigationBar.jsx

+/**
+ * Created by manhvu on 9/5/17.
+ */
+import React, { Component } from 'react';
+
+import { Link, withRouter } from 'react-router-dom';
+import { Nav, Navbar, NavItem } from 'react-bootstrap';
+
+@withRouter
+export class NavigationBar extends Component {
+  render() {
+    const { history } = this.props;
+
+    return (
+      <Navbar>
+        <Navbar.Header>
+          <Navbar.Brand>
+            <Link to="/">Home</Link>
+          </Navbar.Brand>
+        </Navbar.Header>
+
+        <Nav>
+
+          <NavItem onSelect={() => history.push('/topics')}>Topic</NavItem>
+          <NavItem onSelect={() => history.push('/about')}>About</NavItem>
+
+        </Nav>
+      </Navbar>
+    );
+  }
+}

src/pages/AboutPage.jsx

+/**
+ * Created by manhvu on 9/5/17.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { LayoutView } from './LayoutView';
+
+export class AboutPage extends Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  static propTypes = {
+    className: PropTypes.string,
+  };
+
+  componentWillMount() {}
+  
+  componentDidMount() {}
+  
+  render() {
+    const { className } = this.props;
+
+    return (
+      <LayoutView>
+        <div className="row">
+          <div className="col-xs-12">
+            <h1>About</h1>
+          </div>
+        </div>
+      </LayoutView>
+    );
+  }
+  
+}

src/pages/HomePage.jsx

+/**
+ * Created by manhvu on 9/5/17.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { LayoutView } from './LayoutView';
+
+export class HomePage extends Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  static propTypes = {
+    className: PropTypes.string,
+  };
+
+  componentWillMount() {}
+  
+  componentDidMount() {}
+  
+  render() {
+    const { className } = this.props;
+
+    return (
+      <LayoutView>
+        <div className="row">
+          <div className="col-xs-12">
+            <h1>Home</h1>
+          </div>
+        </div>
+      </LayoutView>
+    );
+  }
+  
+}

src/pages/LayoutView.jsx

+/**
+ * Created by manhvu on 9/5/17.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export class LayoutView extends Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  static propTypes = {
+    className: PropTypes.string,
+  };
+  
+  render() {
+    const { className = 'container', children } = this.props;
+
+    return (
+      <div className={className}>
+        {
+          children
+        }
+      </div>
+    );
+  }
+  
+}

src/pages/TopicPage.jsx

+/**
+ * Created by manhvu on 9/5/17.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { LayoutView } from './LayoutView';
+
+export class TopicPage extends Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  static propTypes = {
+    className: PropTypes.string,
+  };
+
+  componentWillMount() {}
+  
+  componentDidMount() {}
+  
+  render() {
+    const { className } = this.props;
+
+    return (
+      <LayoutView>
+        <div className="row">
+          <div className="col-xs-12">
+            <h1>Topic</h1>
+          </div>
+        </div>
+      </LayoutView>
+    );
+  }
+  
+}