搭建 webpack、react 开发环境（三）

配置 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 中的内容。

毕竟主要是配置，使用方法三两句就说不清楚了，因此暂且这样：

• Axios
• PropTypes
• ReactIntl

最后，若是在开发中有使用到 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 开发环境（二） 来继续查看。