配置 react-router-dom
我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的，所以我们需要一个在多个“页面”中跳转的功能，在使用 React 构建的单页面应用中，要想实现页面间的跳转，首先想到的就是使用路由。
考虑 React 工程中的路由时，通常会想到 react-router 和 react-router-dom，其中 React-router 提供了一些 router 的核心 Api，包括 Router, Route, Switch 等，但是它没有提供 Dom 操作进行跳转的 Api，而 React-router-dom 让我们可以通过dom的事件控制路由。
由于我们这次只是搭建开发环境，所以就不再做更多的介绍，现在来做一个简单的说明，首先我们需要安装 react-router-dom：
$ yarn add react-router-dom
然后我们简单的使用一下，以验证安装的结果和使用的效果，我们先在跟组件 App 中的同目录下创建两个组件：
// Home.js
import React from 'react';
import { Link } from 'react-router-dom'; export default () => (
<div>
<div>home page</div>
<Link to="/product">go</Link>
</div>
); // Product.js
import React from 'react'; export default () => (
<div>product page</div>
);
然后我们在主组件 App 中引入相关的依赖并进行简单的使用：
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom'; import Home from './Home';
import Product from './Product'; const App = () => (
<BrowserRouter>
<div>
<Route path="/" exact component={Home} />
<Route path="/product" exact component={Product} />
</div>
</BrowserRouter>
); export default App;
现在我们进入项目时会在根目录下，所以会自动进入 Home 页面，当我们点击 go 字段的时候就会跳转到 Product 页面，也就意味着已经安装成功了。
配置 Redux
在 React 中有一个单项数据流的概念，在大型应用中单靠 React 对于数据的管理并不理想，所以我们需要依赖 Redux 来进行管理。
Redux 是一个面向 JavaScript 应用的可预测状态容器，它能够让你的页面的数据管理更轻松，现在我们就来对它进行安装并进行简单的使用，首先我们安装 Redux：
$ yarn add redux
然后我们在 src 目录下创建 store 目录，并添加 index.js 和 reducers.js 文件：
// index.js
import { createStore } from 'redux'; import reducer from './reducers'; const store = createStore(reducer); export default store; // reducers.js
const defaultState = {
text: 'Hello world',
}; /* 必须返回一个纯函数 */
export default (state = defaultState) => state;
最后我们改变一下 Home 组件以其来测试配置和使用的情况：
import React from 'react';
import { Link } from 'react-router-dom';
import store from './store'; class Home extends React.Component {
constructor(props) {
super(props); this.state = store.getState();
const { text } = this.state;
this.text = text;
} render() {
return (
<div>
<div>{this.text}</div>
<Link to="/product">go</Link>
</div>
);
}
} export default Home;
现在页面中的正常情况会显示 store 存储的数据，也就是“Hello world”字样。
配置 其它
接下来会对配置的对象列出一个列表来，就不再像之前这样在页面中同时列出做出的修改，如果有兴趣的同学，可以直接点击 show me the code 直接查看源码，也可以查看提交历史中对应 commit 中的内容。
毕竟主要是配置，使用方法三两句就说不清楚了，所以暂且这样：
最后，如果在开发中有使用到 Git 的话，那么结合 husky 和 lint-staged 配置代码检查工作流将会非常的棒，在我们配置完成之后，每当我们提交时，都会执行代码检查工作，如果代码的书写不规范的话将会取消本次提交。
当然这两者的功能并不仅仅如此，感兴趣的朋友可以点击上面的链接了解更多，这里我们先来简单的配置体验一下它的功能，首先还是安装依赖：
$ yarn add husky lint-staged --dev
然后我们在 package.json 文件中对它们进行配置：
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.js": "eslint"
}
}
现在我们每次提价前就会执行代码检测啦，你可以特意书写一行不符合规范的代码来来进行测试。
环境的配置到这里就告一段落啦，这里更多的是介绍了 React 相关插件和库的安装，如果你想要知道最初的搭建步骤，你可以点击 搭建 webpack、react 开发环境（一） 来继续查看。如果你需要查看 webpack 方面的一些配置和插件的使用，以及一些可以优化的地方可以点击 搭建 webpack、react 开发环境（二） 来继续查看。