配置 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 開發環境（二） 來繼續查看。

搭建 webpack、react 開發環境（三）