React全家桶打造共享单车后台管理系统项目_第1篇_项目环境搭建_首页编写

1.项目介绍

项目github地址：https://github.com/replaceroot/React-manageSystem

 项目整体架构：

 

课程大纲：

    第一章：React基础知识

    第二章：主页面架构设计

    第三章：Router4.0 路由实战演练

    第四-六章：常用UI组件

    第七、八章：单车业务基本功能开发

    第九章：项目工程化开发

    第十到十三章：单车业务核心模块开发

    第十四章：Redux集成

 

 

 

 

补充：调用setState之后会并列调用should update，will update，did update生命周期函数

Babel插件的作用：解析E6达到兼容效果

 

2.项目环境搭建

2.1 安装包

yarn add react-router-dom axios --dev

 

2.2 安装支付宝UI组件

yarn add antd

 

2.3 配置antd组件按需加载

yarn add react-app-rewired customize-cra

修改`package.json`配置文件的`scripts`字段

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

 然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

 babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

yarn add babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

 

记录一个小坑：

如果遇到错误，将 react-scripts添加到dev依赖中。

  yarn add react-scripts --dev

 

如果遇到找不到babel模块的错误，就将整个 modules删除，然后重新yarn install安装一下就能解决。

重新运行项目，此时就能正常显示Button按钮了。

import React from "react";
import Child from "./Child";
import { Button } from 'antd';
import "./index.less";

export default class Life extends React.Component {
  state = {
    count: 0
  };

  handleAdd = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render(){
    return (
      <div className="demo">
        <input type="text" placeholder="请输入内容..."/>
        <Button onClick={this.handleAdd}>点击一下</Button>
        <p>{this.state.count}</p>
        {/* 给子组件传参 */}
        <Child name={this.state.count}></Child>
      </div>
    )
  }
}

 

 

但是有一个问题，就是我们配置的less没有生效，下面解决Less和按钮主题颜色问题。

yarn add less less-loader

按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件如下。

- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

 

到这里， 基本的环境算是搭建好了，坑是真的多，也只能自己摸索，百度、Google查文档，做记录总结。

 

 

3.项目主页面编写

3.1 目录结构

 

具体代码参考我的github的commit代码

布局使用的栅格系统：https://ant.design/components/grid-cn/

 

左侧菜单渲染：https://ant.design/components/menu-cn/

 

具体实现可以参考我github上的源码和官网给出的demo的源码进行对比就知道我如何使用的。

 

3.2左侧菜单动态渲染

重点就是动态渲染的代码

import React from "react";
import { Menu, Icon, Divider } from "antd";
import menuConfig from "../../config/menuConfig";
import "./index.less";
const { SubMenu } = Menu;

export default class NavLeft extends React.Component {
  // 加载时的生命周期函数
  componentWillMount() {
    const menuTreeNode = this.renderMenu(menuConfig);
    this.setState({
      menuTreeNode
    });
  }

  // 菜单动态渲染
  renderMenu = data => {
    return data.map(item=>{
        // 如果item中还有子项,那么就把子项递归遍历渲染到页面
      if(item.children){
        return (
          <SubMenu title={item.title} key={item.key}>
            {this.renderMenu(item.children)}
          </SubMenu>
        );
      }
      return <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
    })
  };

  render() {
    return (
      <div>
        <div className="logo">
          <img src="assets/logo-ant.svg" alt="" />
          <h1>木子单车管理系统</h1>
        </div>
        <Menu theme="dark">{this.state.menuTreeNode}</Menu>
      </div>
    );
  }
}

index.js