React:創建管理后台項目demo

1、全局安裝create-react-app

npm install -g create-react-app

2、創建項目，安裝依賴

create-react-app my-react-app

3、進入項目

cd my-react-app

4、啟動項目

npm start

這是你就有了一個react demo

接着是對demo的改造了。。。這里是改造后的項目目錄

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內容

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

同時附上immutable的JDK:immutable詳解

import React, { Component } from 'react'
import { is, fromJS } from 'immutable'
class Home extends Component {
    state = {
        name: 'wql'
    }
    componentWillMount () {
        // 組件初始化時調用，更新不調用，整個生命周期只有一次，可以修改state
        this.setState({
            name: 'wql123'
        })
    }
    componentDidMount () {
        // 組件渲染之后調用，只能調用一次
        console.log('componentDidMount')
    }
    componentWillReceiveProps () {
        // 組件初始化不調用，組件接收新的props時調用
    }
    componentWillUpdate () {
        // 組件初始化時不調用，組件更新完成后調用，此時可以獲取dom節點
    }
    componentWillUnmount () {
        // 組件將要卸載時調用，一些事件監聽和定時器需要在此時清除
    }
    shouldComponentUpdate (nextProps, nextState) {
        // 組件判斷是否需要重新渲染時調用
        // fromJS: 將純 JS 對象和數組深層轉換為不可變映射和列表
        // 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

啟動項目即可，自帶熱更新。

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

 

 

方法：

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,如下

 參考學習 github地址：https://github.com/shenqinglin/react-antdesign.git