1、全局安裝create-react-app

npm install -g create-react-app

2、創(chuàng)建項(xiàng)目，安裝依賴(lài)

create-react-app my-react-app

3、進(jìn)入項(xiàng)目

cd my-react-app

4、啟動(dòng)項(xiàng)目

npm start

這是你就有了一個(gè)react demo

接著是對(duì)demo的改造了。。。這里是改造后的項(xiàng)目目錄

image

1、配置路由：

首先安裝路由組件：react-router-dom

npm install react-router-dom --save-dev

router.js如下

import React, { Component } from 'react'

import { HashRouter, Switch, Route } from 'react-router-dom'

import home from '@/pages/home/home'
import login from '@/pages/login/login'

export default class RouteConfig extends Component {
    render() {
        return (
            <HashRouter>
                <Switch>
                    <Route path='/' exact component={login} />
                    <Route path="/login" exact component={login}/>
                    <Route path="/home" exact component={home}/>
                </Switch>
            </HashRouter>
        )
    }
}

2、根目錄下的index.js內(nèi)容

import React from 'react';
import ReactDOM from 'react-dom';
import Route from './router/'
import * as serviceWorker from './serviceWorker';

import './assets/css/index.css'
const render = Component => {
  ReactDOM.render(
    <Component />,
    document.getElementById('root'))
}
render(Route)

if (module.hot) {
  module.hot.accept('./router/', () => {
    render(Route)
  })
}

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

最后是pages文件的改造：

1、home.jsx

在home.jsx中用到了immutable插件，所以我們需要install下

npm install immutable

同時(shí)附上immutable的JDK:immutable詳解

import React, { Component } from 'react'
import { is, fromJS } from 'immutable'
class Home extends Component {
    state = {
        name: 'wql'
    }
    componentWillMount () {
        // 組件初始化時(shí)調(diào)用，更新不調(diào)用，整個(gè)生命周期只有一次，可以修改state
        this.setState({
            name: 'wql123'
        })
    }
    componentDidMount () {
        // 組件渲染之后調(diào)用，只能調(diào)用一次
        console.log('componentDidMount')
    }
    componentWillReceiveProps () {
        // 組件初始化不調(diào)用，組件接收新的props時(shí)調(diào)用
    }
    componentWillUpdate () {
        // 組件初始化時(shí)不調(diào)用，組件更新完成后調(diào)用，此時(shí)可以獲取dom節(jié)點(diǎn)
    }
    componentWillUnmount () {
        // 組件將要卸載時(shí)調(diào)用，一些事件監(jiān)聽(tīng)和定時(shí)器需要在此時(shí)清除
    }
    shouldComponentUpdate (nextProps, nextState) {
        // 組件判斷是否需要重新渲染時(shí)調(diào)用
        // fromJS: 將純 JS 對(duì)象和數(shù)組深層轉(zhuǎn)換為不可變映射和列表
        // is: 判斷是否值相等
        console.log(!is(fromJS(this.props),fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)))
        return !is(fromJS(this.props),fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    }
    deal = (val) => {
        console.log(val)
        this.setState({
            name: val
        })
    }
    render () {
        return (
            <div>
                <div>11{this.state.name}</div>
                <a onClick={this.deal.bind(this,'12123')}>click it</a>
            </div>
        )
    }
}
export default Home

啟動(dòng)項(xiàng)目即可，自帶熱更新。

下邊提供將src根路徑替換成@的方法，效果如下

image

方法：

1、安裝react-app-rewired

npm install react-app-rewired --save-dev

2、跟路徑下，添加config-overrides.js,如下

const path = require('path')

module.exports = function override (config,env) {
    config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, 'src')
    }
    return config
}

3、修改package.json,如下

image

參考學(xué)習(xí) github地址：https://github.com/shenqinglin/react-antdesign.git