之前做過(guò)react項(xiàng)目绕沈，但是沒(méi)有全面搭過(guò)框架锐想，順便研究一波mobx。
項(xiàng)目代碼github地址：https://github.com/lingziyb/react-mobx-demo

一乍狐、選react腳手架

• 想：自己搭整個(gè)框架還是比較費(fèi)勁的赠摇，所以首先想到用它的腳手架來(lái)初始化一個(gè)大概的框架結(jié)構(gòu)。
• 搜：開(kāi)始搜腳手架，最出名的就是facebook官方出版的create-react-app藕帜，那我們就用這個(gè)烫罩。

二、使用create-react-app初始化項(xiàng)目

工具會(huì)幫你初始化一個(gè)簡(jiǎn)單基本的項(xiàng)目并且會(huì)自動(dòng)幫你安裝項(xiàng)目所需要的各種依賴

  npx create-react-app my-app
  cd my-app
  yarn start   //或者npm start

此時(shí)瀏覽器會(huì)自動(dòng)訪問(wèn) http://localhost:3000/洽故，你會(huì)看到一個(gè) react 的歡迎界面贝攒，如下：代表你的項(xiàng)目已經(jīng)正常運(yùn)行了。

運(yùn)行后的頁(yè)面.png

三时甚、配置項(xiàng)

1. 展開(kāi)配置項(xiàng)

配置項(xiàng)打開(kāi)前.png

雖然項(xiàng)目已經(jīng)運(yùn)行隘弊，但是在項(xiàng)目目錄里是找不到webpack配置項(xiàng)的。比如荒适，我們想配置less梨熙、配置alias別名，這時(shí)我們需要做一個(gè)操作：展開(kāi)項(xiàng)目（eject）[ 注：這個(gè)一個(gè)不可逆過(guò)程刀诬，一旦你執(zhí)行了咽扇，就不能回到初始化 ] 。

  yarn eject   // 或者 npm run eject

再看項(xiàng)目結(jié)構(gòu)舅列，此時(shí)已多了一些其他目錄肌割，展開(kāi)config目錄卧蜓，里面就有webpack配置文件以及其他各種配置帐要，如下：

配置項(xiàng)打開(kāi)后.png

2. less配置

  yarn add less less-loader 

修改 webpack配置文件

• 找到 webpack.config.dev.js 與 webpack.config.prod.js 文件，后綴 dev 表示開(kāi)發(fā)的配置弥奸，prod 表示是生產(chǎn)環(huán)境的配置榨惠，因此兩個(gè)配置文件都需要修改。
• 修改webpack.config.dev.js盛霎，在module的rules字段中更改以下代碼
  更改前：

{
    test: /\.css$/,
    use: [
        require.resolve( 'style-loader' ),
        {
            loader: require.resolve( 'css-loader' ),
            options: {
            importLoaders: 1,
        },
        ...
    ],              
},

更改后：

{
    test: /\.(css|less)$/,    // 劃重點(diǎn)
    use: [
        require.resolve( 'style-loader' ),
        {
            loader: require.resolve( 'css-loader' ),
            options: {
            importLoaders: 1,
        },
        ...
        {
            loader: require.resolve( 'less-loader' ),    // 劃重點(diǎn)
        }
    ],              
},

• 修改webpack.config.prod.js 赠橙，同理，在rules字段中更改以上代碼

四愤炸、引入路由

1. 更改src目錄結(jié)構(gòu)

• 便于更符合實(shí)際項(xiàng)目場(chǎng)景期揪，我們?cè)?code>src下新建如下幾個(gè)文件夾：
  a. api文件夾存放ajax請(qǐng)求
  b. components文件夾存放組件
  c. pages文件夾存放頁(yè)面
  d. routes文件夾存放路由
  e. stores文件夾存放數(shù)據(jù)
  f. utils文件夾存放工具類(lèi)函數(shù)

2. 設(shè)置文件別名

既然有了文件夾來(lái)區(qū)分不同的功能，為了方便文件的相互规个，我們可以利用 webpack 來(lái)設(shè)置別名凤薛。

• 修改config文件夾下的paths文件

module.exports = {
  ...
  appApi: resolveApp( 'src/api' ),
  appComponents: resolveApp('src/components'),
  appPages: resolveApp( 'src/pages' ),
  appRoutes: resolveApp('src/routes'),
  appStores: resolveApp( 'src/stores' ),
  appUtils: resolveApp('src/utils'),
  ...

• 修改 webpack 配置項(xiàng) alias

alias: {
  ...
  api: paths.appApi,
  components: paths.appComponents,
  pages: paths.appPages,
  routes: paths.appRoutes,
  stores: paths.appStores,
  utils: paths.appUtils,
  ...

3. 安裝路由組件 react-router

  yarn add react-router react-router-dom

• 在pages文件夾中新建home.jsx頁(yè)面和about.jsx頁(yè)面
  home.jsx

import React from 'react';
import { Link } from 'react-router-dom';

class Home extends React.Component {
    render() {
        return (
            <div>
                <p>這是首頁(yè)</p>
                <Link to="/about">go to About</Link>
            </div>
        );
    }
}

export default Home;

about.jsx

import React from 'react'
import { Link } from 'react-router-dom'

class About extends React.Component {
    render() {
        return (
            <div>
                <p>這是about頁(yè)面</p>
                <Link to="/">go to Home</Link>
            </div>
        )
    }
}

export default About;

• 在routes文件夾中新建index.jsx頁(yè)面

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Home from 'pages/home';
import About from 'pages/about';

const Routes = () => (
    <Router>
        <div>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
        </div>
    </Router>
)

export default Routes;

• 為了頁(yè)面好看一點(diǎn)點(diǎn)，我們寫(xiě)個(gè)App.less

.app {
    text-align: center;
    border: 1px solid #ddd;
    padding: 30px;
    p {
        color: green;
    }
}

• 更改app.js文件

import React, { Component } from 'react';
import Routes from 'routes/index';
import './App.less'

class App extends Component {
    render() {
        return (
            <div className="app">
                <Routes />
            </div>
        );
    }
}

export default App;

此時(shí)首頁(yè)長(zhǎng)相：

首頁(yè).png

此時(shí)about頁(yè)長(zhǎng)相：

about頁(yè)

五诞仓、添加數(shù)據(jù)管理mobx

1. 按照依賴

yarn add mobx mobx-react

2.開(kāi)始使用

• 使用 mobx 你還需要安裝 babel 的裝飾器插件缤苫，以及修改 babel 的配置

  yarn add babel-plugin-transform-decorators-legacy

• 修改 package.json 文件中的 babel 參數(shù)，或者在根目錄下新建一個(gè) .babelrc 文件

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    "babel-plugin-transform-decorators-legacy"
  ]
...

現(xiàn)在墅拭，你可以在你的組件中使用 mobx 來(lái)管理你的狀態(tài)了活玲。關(guān)于 mobx 的使用，你可以訪問(wèn)官方文檔

3. 修改文件

• 在stores里新建index.js、home.js舒憾、about.js镀钓。 【 注：home.js和about.js我用了兩種方式寫(xiě)，都可以的镀迂〉穑】
  home.js

import { observable } from 'mobx';

const HomeStore = observable( {
    title: 'this is home page'
} );

export default HomeStore;

about.js

import { observable } from 'mobx';

class AboutStore {
    @observable title = 'this is about page';
}

export default new AboutStore();

index.js

import aboutStore from './about';
import homeStore from './home';

const store = {
    aboutStore,
    homeStore
};

export default store;

• 修改app.js

import React, { Component } from 'react';
import Routes from 'routes/index';
import './App.less';
import { Provider } from 'mobx-react';
import stores from 'stores/index';

class App extends Component {
    render() {
        return (
            <div className="app">
                <Provider {...stores}>
                    <Routes />
                </Provider>
            </div>
        );
    }
}

export default App;

• 修改pages里的home.jsx

import React from 'react';
import { Link } from 'react-router-dom';
import { inject } from 'mobx-react';

@inject( 'homeStore' )
class Home extends React.Component {
    render() {
        return (
            <div>
                <p>{this.props.homeStore.title}</p>
                <Link to="/about">go to About</Link>
            </div>
        );
    }
}

export default Home;

• 修改pages里的about.jsx

import React from 'react'
import { Link } from 'react-router-dom'
import { inject } from 'mobx-react';

@inject( 'aboutStore' )
class About extends React.Component {
    render() {
        return (
            <div>
                <p>{ this.props.aboutStore.title }</p>
                <Link to="/">goto Home</Link>
            </div>
        )
    }
}

export default About;

這是現(xiàn)在的首頁(yè)：【數(shù)據(jù)變了喲】

首頁(yè).png

這是現(xiàn)在的about頁(yè)：【數(shù)據(jù)變了喲】

about頁(yè).png

六、數(shù)據(jù)請(qǐng)求axios

  yarn add axios

• 在api文件夾里增加home.js

import axios from 'axios';

export default {

    /**
     * 獲取首頁(yè)列表頁(yè)數(shù)據(jù)
     * @returns {Promise.<*>}
     */
    async getList(){
        return await axios.get( 'http://lemonof.com:82/api/getList' ).then( ( res ) => res.data.data );
    }
}

• 更改stores里的home.js

import { observable, action } from 'mobx';
import HomeApi from 'api/home';

const HomeStore = observable( {
    title: 'this is home page',
    list: [],

    // 獲取首頁(yè)數(shù)據(jù)
    async getList() {
        this.list = await HomeApi.getList();
    }
} );

export default HomeStore;

• 更改pages里的home.jsx

import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';

@inject( 'homeStore' )
@observer
class Home extends React.Component {

    componentDidMount() {
        this.props.homeStore.getList();
    }

    render() {
        return (
            <div>
                <p>{this.props.homeStore.title}</p>
                <Link to="/about">go to About</Link>

                <div style={{ textAlign: 'left', width: '450px', margin: 'auto' }}>
                    <p>下面是列表數(shù)據(jù)：</p>
                    {
                        this.props.homeStore.list && this.props.homeStore.list.map( ( el ) => {
                            return ( <div key={el.id}>標(biāo)題：{el.title}</div> )
                        } )
                    }
                </div>
            </div>
        );
    }
}

export default Home;

此時(shí)首頁(yè)長(zhǎng)相：【頁(yè)面沒(méi)有優(yōu)化招拙，請(qǐng)將就看】

首頁(yè).png

此時(shí)about頁(yè)長(zhǎng)相：【頁(yè)面沒(méi)有優(yōu)化唧瘾，請(qǐng)將就看】

about頁(yè).png

哇！終于寫(xiě)完了别凤。
后續(xù)我再把UI優(yōu)化下饰序。
最終項(xiàng)目代碼地址：https://github.com/lingziyb/react-mobx-demo

查閱文章有：
create-react-app全家桶router+mobx：http://www.reibang.com/p/2d54c2b3cfa3