Add React-Router to our project

Code style is important

npm install -g eslint

And then enter the root directory

type eslint init

There are some styles but I recommend Airbnb 's style. I believe this time there are many companies use it to develop.

Also, we can write a file to specify which style we need and where effects. touch a .eslintrc.jseg:

module.exports = {
  extends: 'airbnb',
  installedESLint: true,
  plugins: [
    'react',
  ],
  env: {
    browser: true,
    node: true,
  },
};

It means that we need style in client and node .
Furthermore, I recommend using VSCode to develop our projects because of its future that can auto-complete the out-style code , that is why I use VSCode instead of Atom.

After that, touch routes.js file in the client directory .

import React from 'react';
import { Router, Route } from 'react-router';

import App from './containers/App';

export default function (history) {
  return (
    <Router history={history}>
      <Route path="/" components={App} />
    </Router>
  );
}

From those codes, you must find that the App components' position changes from components to containers. Because we also need Redux to build our project, and the author of Redux , Dan Abramov, also recommend an architecture of managing components, which classified React component to two type : " dumb component " and " smart component " . So the components in containers can receive props and communicate with outside components but the components in components can't , the purpose to simplify the store ' state .

Then edit index.js file in client.

render((
createRoutes(browserHistory)
),
document.getElementById('app'));

To here React-Router is a part of our project.