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