React快速开发上手

前提，有前端基础的快速上手，React从0到1直接使用UmiJs+Antd Pro框架开发，不深入React基础学习。

1 掌握React基础

• JSX，系JS的语法扩展，能够快速组合逻辑形成模版。
• 函数组件与class组件，目前遇到的业务需求基本为父组件使用class组件，子组件使用函数组件，因为函数组件有Hook的加成，可更有效率编码。
• Props，理解为组件之间通讯的参数。
• State，当前组件的状态参数控制。
• class组件生命周期，控制UI渲染前后的事件触发。

2 Umi.js+Antd Pro

Antd Pro是一套中后台前端解决方案，在这套解决方案里，提供了Antd的全部组件使用，基础的页面层级布局，可以让开发者更加专注的完成需求业务开发。

2.1 文档结构

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

2.2 菜单及路由配置

• 基础配置，使用Antd Pro布局，在config/config.js 修改routes下内容

routers: [
  {
    path: '/',
    component: '../layouts/BasicLayout', // 指定以下页面的布局
    routes: [
      // dashboard
      { path: '/', redirect: '/dashboard/analysis' },
      {
        path: '/dashboard',
        name: 'dashboard',
        icon: 'dashboard',
        routes: [
          { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
          { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
          { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
        ],
      },
    ],
  },
];

• 菜单会根据路由的配置，自动生成。

• 如果业务中有需要用到动态菜单，可在Layout组件中的BasicLayout.jsx去配置。

2.4 接口请求

在utils/request.ts是基于 fetch 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。

下面是例子

// services/user.js
import request from '../utils/request';

export async function query() {
  return request('/api/users');
}

export async function queryCurrent() {
  return request('/api/currentUser');
}

2.5 使用dva

简要转发，dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

• 例子

import { queryGlobalMenus } from '@/services/login';

const GlobalModel = {
  namespace: 'global',
  state: {
    collapsed: false,
    notices: [],
    menus: []
  },
  effects: {
    *fetchGlobalMenus(_, { call, put }) {
      const data = yield call(queryGlobalMenus);
      yield put({
        type: 'saveGlobalMenus',
        payload: data,
      });
    },
  },
  reducers: {
    saveGlobalMenus(state, { payload }) {
      return { ...state, menus: payload };
    }
  }
};
export default GlobalModel;

3 总结

以上基本简单介绍了一些知识点，如果是刚接触前端的同学，可以按照下面顺序来学习

HTML --> CSS --> Less（Sass） --> Javascript(ES6) --> Webpack --> React --> Redux --> UmiJS + Ant Design Pro

快速上手按照以下顺序

• 如何在本地创建项目

• 熟悉整个项目的目录结构

• 了解package.json

• 如何安装依赖？

• 如何启动项目？

• 了解框架页面结构及工具组件

• 了解框架配置文件

• 了解菜单与路由配置

• 了解Antd组件使用（官网链接）

• 学习前端Mock

• 学习umi中的dva