React 全家桶+AntD搭建后台管理系统

Alan

6 年前

基础知识

React 特点

Declarative 声明式编码
Component-Based 组件化编码
高效-高效的 DOM Diff算法，最小化页面重绘
单向数据流

Vue & React 生态

Vue + Vue-Router + Vuex + Axios + Babel + Webpack
React + React-Router – Redux + Axios + Babel +Webpack

React 脚手架、Yarn

# npm
sudo npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
# yarn（sudo npm -g install yarn）
yarn init
yarn add
yarn remove
yarn / yarn install
# 进入项目目录 yarn start 即可启动项目

# npm

sudo npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

# yarn（sudo npm -g install yarn）

yarn init

yarn add

yarn remove

yarn / yarn install

# 进入项目目录 yarn start 即可启动项目

React 生命周期

getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

handleAdd=()=>{
...
}

handleClick(){
  ...
}

# 调用方法
<button onClick={this.handleAdd}>点击一下</button>
<button onClick={this.handleClick.bind(this)}>点击一下</button

handleAdd=()=>{

...

}

handleClick(){

...

}

# 调用方法

<button onClick={this.handleClick.bind(this)}>点击一下</button

AntD 基于LESS，可暴露 WebPack 来进行相应修改

# 安装基础插件
yarn add react-router-dom axios less-loader less@^2.7.3 jsonp
# 暴露webpack 文件
yarn eject
# config/webpack.config.dev.js, config/webpack.config.prod.js
# 拷贝test: /\.less$/代码块以支持 LESS，以及设置主题色
{
  test: /\.less$/,
....
	{
	  	loader:require.resolve('less-loader')，
	  	options: {
		  modules: false,
		  modifyVars: {
		    "@primary-color": "#f9c700"
		  }
		}
	}
  ],
},
# 修改后重启项目

# 安装 antd
yarn add antd


# 实现按需加载配置，这样无需再每次导入 antd 的 css 文件
yarn add babel-plugin-import
# config/webpack.config.dev.js, config/webpack.config.prod.js
{
  test: /\.(js|jsx|mjs)$/,
...
  options: {
    plugins:[
      ['import', [{
        libraryName:'antd',
        style:true
      }]]
    ],
...
  },
},



# 新版中无法使用前述方法，按需加载及修改主题方法如下：

            {
              test: /\.less$/,
              use: [{
                loader: 'style-loader',
              }, {
                loader: 'css-loader', // translates CSS into CommonJS
              }, {
                loader: 'less-loader', // compiles Less to CSS
                options: {
                  modifyVars: {//修改后的主题色
                    '@primary-color': '#f9c700',
                  },
                  javascriptEnabled: true,
                },
              }],
            },

...
           {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
...
                plugins: [
                  ...
                  [require.resolve('babel-plugin-import'), { libraryName: 'antd', style: true }]
                ],
...
            },

# 安装基础插件

yarn add react-router-dom axios less-loader less@^2.7.3 jsonp

# 暴露webpack 文件

yarn eject

# config/webpack.config.dev.js, config/webpack.config.prod.js

# 拷贝test: /\.less$/代码块以支持 LESS，以及设置主题色

{

test: /\.less$/,

....

{

loader:require.resolve('less-loader')，

options: {

modules: false,

modifyVars: {

"@primary-color": "#f9c700"

}

# 修改后重启项目

# 安装 antd

yarn add antd

# 实现按需加载配置，这样无需再每次导入 antd 的 css 文件

yarn add babel-plugin-import

# config/webpack.config.dev.js, config/webpack.config.prod.js

{

test: /\.(js|jsx|mjs)$/,

...

options: {

plugins:[

['import', [{

libraryName:'antd',

style:true

}]]

...

# 新版中无法使用前述方法，按需加载及修改主题方法如下：

{

test: /\.less$/,

use: [{

loader: 'style-loader',

}, {

loader: 'css-loader', // translates CSS into CommonJS

}, {

loader: 'less-loader', // compiles Less to CSS

options: {

modifyVars: {//修改后的主题色

'@primary-color': '#f9c700',

javascriptEnabled: true,

}],

...

{

test: /\.(js|mjs|jsx|ts|tsx)$/,

...

plugins: [

...

[require.resolve('babel-plugin-import'), { libraryName: 'antd', style: true }]

...

React Router 4.0

react-router（基础包）

react-router-dom（针对浏览器端，已包含 react-router）提供了BrowserRouter, HashRouter, Route(path, exact, component, render), Link, NavLink, switch, redirect

yarn add react-router-dom

获取动态路由参数：this.props.match.params.xxx

React 文件的基本写法：

import React from 'react'

export default class Header extends React.Component{

  render(){
    return(
      <div>Header</div>
    );
  }
}

import React from 'react'

export default class Header extends React.Component{

render(){

return(

<div>Header</div>

);

}

获取子节点：this.props.children

Mock 数据：https://www.easy-mock.com

常见问题

1、A template was not provided. This is likely because you’re using an outdated version of create-react

npm uninstall -g create-react-app
npx create-react-app frontend

1 2	npm uninstall -g create-react-app npx create-react-app frontend