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.
