react入门+UMI

React

一、创建项目、安装基本第三方库以及配置所需目录 

sudo npm i -g create-react-app    # npm下安装react环境
create-react-app react-demo        # 创建一个项目名为react-demo的react项目
cd react-demo                    # 进入此项目
npm start                        # 运行项目（项目运行后，查看项目文件和运行结果，查看完毕后，再进行下面操作）
npm run eject                    # 此时默认的项目结构会发生较大变化，注意观察前后变化
npm i react-router-dom            # react 路由器的DOM绑定（必安装）
npm i node-sass sass-loader axios es6-promise    # 使用sass和axios请求方式（根据个人情况决定是否安装，本人使用sass和axios）

配置所需目录

手动配置public和src
├── config                          # 配置文件夹
├── node_modules                    # node 依赖文件夹
  ├── ...                           # 各种npm的js库
├── public                          # 静态资源目录、入口文件目录
  ├── image                         # 静态图片存放
  ├── js                            # 本地js第三方库
  ├── favicon.ico                   # 浏览器标签栏图标
  ├── index.html                    # 入口 index.html 文件
  ├── manifest.json                 # 配置参数
├── scripts                         # npm 脚本文件夹
  ├── ...                           # 默认
├── src                             # 开发目录
  ├── api                           # 请求
    ├── index.js                    # 请求的js
  ├── components                    # 组件
  ├── config                        # 配置
    ├── index.js                    # 配置的js
  ├── router                        # 路由
    ├── index.js                    # 路由配置入口js
  ├── style                         # 样式
    ├── index.scss                  # css样式主文件
  ├── tools                         # 自定义js工具包
    ├── index.js                    # 自定义的js方法
  ├── views                         # 单页面应用
    ├── home.jsx                    # 首页jsx组件
  ├── App.js                        # dom 挂载文件
  ├── index.js                      # 入口文件
  ├── App.test.js                   # 测试文件
  ├── serviceWorker.js              # 注册服务文件，旧版本是registerServiceWorker.js
  ├── setupProxy.js                 # 配置代理
├── package-lock.json               # 包锁定文件，不用管。
├── package.json                    # 配置文件，有些内容在此配置
└──README.md                        # 说明文档，该文档非常丰富，建议由时间阅读

shell脚本配置

# react-src-catalog-building.sh
# 新建文件 react-src-catalog-building.sh，内容如下：（以下内容可以通过命令行执行）
cd src && mkdir api components config views router style tools    # 在src下，创建我们需要的文件夹
rm -r App.css index.css logo.svg            # 删除App.css App.test.js index.css logo.svg等无用文件
cd api && touch index.js && cd ../            # api => index.js
cd config && touch index.js && cd ../        # config => index.js
cd router && touch index.js && cd ../        # router => index.js
cd style && touch index.scss && cd ../        # style => index.scss
cd tools && touch index.js && cd ../        # tools => index.js
cd views && touch home.jsx && cd ../        # views => home.jsx
touch setupProxy.js
cd ../

# 运行shell文件 react-src-catalog-building

sh react-src-catalog-building.sh            # 如果是通过命令行执行上面内容，则不需要执行该命令

二、配置config相关

2.1 配置支持 @ 文件映射 src 目录
在根目录下的/config/webpack.config.js 文件中，找到 alias 的配置:
注意：旧版是/config/webpack.config.dev.js 文件和 /config/webpack.config.prod.js 文件中，找到 alias 的配置
alias: {
  ...
  '@': path.join(__dirname, '..', 'src'), // 添加这段内容
}
2.2 配置项目支持 scss 文件
新版你可以跳过这一步，因为它自己已经做了scss的支持
在根目录下的 /config/webpack.config.dev.js 文件和 /config/webpack.config.prod.js 文件中，找到 module 的配置

module: {
  strictExportPresence: true,
  rules: [
    { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'],},    // 再rules这个数组中第一个位置,添加这段内容
    ...
    {
      // "oneOf" will traverse all following loaders until one will
      // match the requirements. When no loader matches it will fall
      // back to the "file" loader at the end of the loader list.
      oneOf: [
        ...
        {
          exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],   # 改为 exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /.scss$/], // 增加 /.scss$/ 来使其支持sass
          loader: require.resolve('file-loader'),
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
      ]
    }
  ],
  ...
}

附1. 自定义的搭建react的快捷脚本
https://github.com/nongshuqiner/react-building-project-shell

UMI

umi,乌米，一个可插拔的企业级 react 应用框架
umi = react + redux + react-router + ts + dva + umi脚手架 + ant Design Pro + ant Design UI + umi-block
官网：https://umijs.org/zh/

相关链接：
umi
ant-design-pro
ant-design-pro github
pro-blocks
umi-blocks

node：8.10+(推荐nvm管理node版本)
npm

$ npm global add umi
$ umi -v   # 确保版本2.0.0+
$ mkdir my-umi-app && cd my-umi-app
$ npm create umi            # 使用 npm create umi 脚手架，创建模板
# Choose ant-design-pro
$ npm install  # 安装依赖，时间比较久
$ npm start  # visit http://localhost:8000

项目目录

├── config  # umi 配置，包含路由，构建等配置
│  ├── config  # 配置包含路由等
│  ├── ... # 其他
├── 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
└── ... # 其他

可用脚本

npm start # 运行这个脚本会启动服务，自动打开默认浏览器展示你的页面。当你重新编辑代码后，页面还会自动刷新。
npm run build # 运行这个脚本将会编译你的项目，你可以在项目中的 dist 目录中找到编译后的文件用于部署。
npm run lint # 通过这个脚本来查看你的代码有哪些问题
npm test # 这个脚本会执行一系列测试，包括 e2e 测试。
npm run i18n-remove # 这个脚本将会尝试删除项目中所有的 i18n 代码，对于复杂的运行时代码，表现并不好，慎用。

主要目录和文件介绍

config 目录
├── config  # umi 配置，包含路由，构建等配置
│  ├── config  # 配置文件：包含路由、样式、proxy等
│  ├── defaultSettings # 默认设置：包括标题title、navTheme等
│  ├── plugin.config # webpack的Plugin配置
│  ├── themePluginConfig # 风格主题的配置

src 目录
src/components组件目录
src/components/Authorized组件
授权组件，路由权限的管理。

关系：
index.jsx -> Authorized(内容权限管理) -> CheckPermissions
          -> renderAuthorize（内容渲染）
          -> Secured（判断是否拥有权限访问此 view 权限） -> CheckPermissions
          -> CheckPermissions（通用权限检查方法） -> PromiseRender（promise渲染）

src/components/GlobalHeader组件
基础布局的头部，包含搜索、用户头像、语言切换。

├── src/components
├── ...
├── GlobalHeader  # 基础布局的头部
│  ├── AvatarDropdown  # 用户头像下拉菜单
│  ├── NoticeIconView  # 通知图标和通知消息视图
│  ├── plugin.config # webpack的Plugin配置
│  ├── RightContent  # 基础布局的头部核心：包含搜索、头像、语言选择

src/components/... 其他组件

HeaderDropdown:头部下拉菜单，用于用户头像、搜索等。
HeaderSearch：头部搜索组件。
NoticeIcon:头部通知组件。
PageLoading:加载组件。
SelectLang：语言切换组件。

src/layouts布局
src/layouts/BasicLayout布局
基础默认布局，菜单、顶部、内容、页脚。包含logo、菜单、面包屑等。
ant-design-pro的布局

src/layouts/SecurityLayout布局
安全布局，负责验证是否登录和登录后跳转加载，我们可以在这里写自己的登录认证规则。

src/layouts/... 其他布局
UserLayout： 用户布局，用于登录页。
BlankLayout： 空白布局，用于打印页面等不需要布局的页面。

src/locales
国际化资源语言，包含四种语言：简体中文、繁体中文、英语、葡萄牙语，如果使用国际化请注意它对诸如：菜单、消息提示等影响。如果你是国内用户，那么你可以忽略它。

src/models
全局 dva model
在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

1.UI 组件交互操作；
2.调用 model 的 effect；
3.调用统一管理的 service 请求函数；
4.使用封装的 request.ts 发送请求；
5.获取服务端返回；
6.然后调用 reducer 改变 state；
7.更新 model。

至于dva是什么？请看这里：dva.js
这里我们只需要知道它里面的文件内容如下即可：
// model
{
  namespace: String, // 命名空间
  state: Object, // 状态
  reducer: Object, // 同步更新 state
  effects: Object, // 副作用：处理异步逻辑
  subscriptions: Object // 订阅数据源
}
这些文件被引用在src/pages/.umi/dva中。
我们以 models/global 为例:
namespace: 'global' 说明以下此处的dva命名空间为 global，即你调用的时候需要采用 global.XXX 的形式
其中的 state: {} 是存放状态的，也就是数据。
reducers 是用来更新 state 的，但是他只能是同步的。所以我们需要 effects 来进行异步更新。
即：

state: {
collapsed: false,
notices: [],
}, // 存放状态和数据

reducers: { // 用来同步设置state
    changeLayoutCollapsed(
      state = {
        notices: [],
        collapsed: true,
      },
      { payload },
    ) {
      return { ...state, collapsed: payload };
    },

    saveNotices(state, { payload }) {
      return {
        collapsed: false,
        ...state,
        notices: payload,
      };
    },
    // ...
 }

  effects: { // 异步更新state，通过调用同步的reducers实现
    *fetchNotices(_, { call, put, select }) {
      const data = yield call(queryNotices);
      yield put({
        type: 'saveNotices',
        payload: data,
      });
      const unreadCount = yield select(
        state => state.global.notices.filter(item => !item.read).length,
      );
      yield put({
        type: 'user/changeNotifyCount',
        payload: {
          totalCount: data.length,
          unreadCount,
        },
      });
    },
    // ...
 }

src/pages
业务页面和常用模板
src/pages/document.ejs 默认html模板，umi 约定如果这个文件存在，会作为默认模板，内容上需要保证有 <div id="root"></div>，模板里可通过 context 来获取到 umi 提供的变量。
user user业务逻辑内容，里面包含login登录模块，如果你需要更换登录页，请在这里处理。
通过 umi block add [block url] --path=[target path] 添加的区块，将会被放置在pages目录下。

src/services
服务请求层，在 Ant Design Pro 中，后台接口服务需要写在services文件下。当然你也可以不那么做。

$ mkdir myapp && cd myapp
$ yarn create @umijs/umi-app    # 官方工具创建项目
# 或 npx @umijs/create-umi-app
$ yarn                           # 安装依赖
$ yarn start                    # 启动项目

在VSCode终端启动项目失败，根据图示可解决问题

yarn add @ant-design/pro-layout  #安装@ant-design/pro-layout
编辑 .umirc.ts 配置 layout: {}

import { defineConfig } from 'umi';
export default defineConfig({
  layout: {},    // 新加
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
});

部署发布
yarn build  # 构建,构建产物默认生成到 ./dist 下
tree ./dist # 然后通过 tree 命令查看
yarn global add serve # 发布之前，可以通过 serve 做本地验证
serve ./dist  # 正常情况下应该是和执行 yarn start 时是一致的

Umi基础项目

.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
    ├── .umi
    ├── layouts/index.tsx
    ├── pages
        ├── index.less
        └── index.tsx
    └── app.ts

根目录

package.json

包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 开头的依赖会被自动注册为插件或插件集。

.umirc.ts

配置文件，包含 umi 内置功能和插件的配置。

.env

环境变量。

比如：

PORT=8888

COMPRESS=none

dist 目录

执行 umi build 后，产物默认会存放在这里。

mock 目录

存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。

public 目录

此目录下所有文件会被 copy 到输出路径。

/src 目录

.umi 目录

临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交 .umi 目录到 git 仓库，他们会在 umi dev 和 umi build 时被删除并重新生成。

layouts/index.tsx

约定式路由时的全局布局文件。

pages 目录

所有路由组件存放在这里。

app.ts

运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。

UmiJS
+ .umi
  + core     # 内部插件生成
  + pluginA  # 外部插件生成
  + presetB  # 外部插件生成
  + umi.ts   # 入口文件
可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 umi 时都会被删除并重新生成。
node v10.13+
通过官方工具创建项目：yarn create @umijs/umi-app # 或 npx @umijs/create-umi-app
安装依赖：yarn
启动项目：yarn start
在浏览器里打开 http://localhost:8000
编辑 .umirc.ts 配置 layout: {}，并且需要安装 @ant-design/pro-layout
PS：config/config.ts对应UmiJS中配置文件.umirc.ts

1、部署发布
构建：yarn build
    构建产物默认生成到 ./dist 下，然后通过 tree 命令查看，tree ./dist
本地验证：发布之前，可以通过 serve 做本地验证
    $ yarn global add serve
    $ serve ./dist
    本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

2、目录结构
.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
    ├── .umi
    ├── layouts/index.tsx
    ├── pages
        ├── index.less
        └── index.tsx
    └── app.ts

3、配置
Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件，支持 es6
项目配置不复杂，推荐.umirc.ts写配置；优先级更高
项目配置复杂，推荐配置写在config/config.ts

本地临时配置：可以新建 .umirc.local.ts，这份配置会和 .umirc.ts 做 deep merge 后形成最终配置。
    注：.umirc.local.ts 仅在 umi dev 时有效。umi build 时不会被加载。
注意
    config/config.ts 对应的是 config/config.local.ts
    .local.ts 是本地验证使用的临时配置，请将其添加到 .gitignore，务必不要提交到 git 仓库中
    .local.ts 配置的优先级最高，比 UMI_ENV 指定的配置更高

多环境多份配置
    可以通过环境变量 UMI_ENV 区分不同环境来指定配置。

4、运行时配置
运行时配置和配置的区别是他跑在浏览器端，基于此，我们可以在这里写函数、jsx、import 浏览器端依赖等等，注意不要引入 node 依赖。
配置方式：约定 src/app.tsx 为运行时配置。

5、路由
5.1 在 Umi 中，应用都是单页应用
5.2 页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html
5.3 html 只在应用初始化时加载一次。
5.4 所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，只需要在配置中把不同的路由路径和对应的组件关联上

5.5 配置路由
5.5.1 在配置文件中通过 routes 进行配置，格式为路由信息的数组
比如：
export default {
  routes: [
    { exact: true, path: '/', component: 'index' },
    { exact: true, path: '/user', component: 'user' },
  ],
}
5.5.2 component，配置 location 和 path 匹配后用于渲染的 React 组件路径
    相对路径，会从 src/pages 开始找起
    如果指向 src 目录的文件，可以用 @，也可以用 ../
    比如 component: '@/layouts/basic'，或者 component: '../layouts/basic'，推荐用前者
5.5.3 exact：表示是否严格匹配，即 location 是否和 path 完全对应上
5.5.4 routes：配置子路由，通常在需要为多个路径增加 layout 组件时使用
5.5.5 redirect：配置路由跳转
5.5.6 wrappers：配置路由的高阶组件封装
5.5.7 title：配置路由的标题
5.5.8 页面跳转
5.5.9 hash 路由
5.5.10 Link 组件：注意：Link 只用于单页应用的内部跳转，如果是外部地址跳转请使用 a 标签
5.5.11 路由组件参数
    路由组件可通过 props 获取到以下属性，
    match，当前路由和 url match 后的对象，包含 params、path、url 和 isExact 属性
    location，表示应用当前处于哪个位置，包含 pathname、search、query 等属性
    history，同 api#history 接口
    route，当前路由配置，包含 path、exact、component、routes 等
    routes，全部路由信息
5.5.12 传递参数给子路由：通过 cloneElement，一次就好（Umi 2 时需要两次）

6、约定式路由
如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置
动态路由：约定 [] 包裹的文件或文件夹为动态路由
动态可选路由：约定 [ $] 包裹的文件或文件夹为动态可选路由
嵌套路由：Umi 里约定目录下有 _layout.tsx 时会生成嵌套路由，以 _layout.tsx 为该目录的 layout
            layout 文件需要返回一个 React 组件，并通过 props.children 渲染子组件
全局 layout：约定 src/layouts/index.tsx 为全局路由。返回一个 React 组件，并通过 props.children 渲染子组件
不同的全局 layout：仍可以在 src/layouts/index.tsx 中对 location.path 做区分，渲染不同的 layout 
404 路由：约定 src/pages/404.tsx 为 404 页面，需返回 React 组件
权限路由：通过指定高阶组件 wrappers 达成效果
扩展路由属性：支持在代码层通过导出静态属性的方式扩展路由

7、插件
插件的 id 和 key：每个插件都会对应一个 id 和一个 key，id 是路径的简写，key 是进一步简化后用于配置的唯一值。
比如插件 /node_modules/@umijs/plugin-foo/index.js，通常来说，其 id 为 @umijs/plugin-foo，key 为 foo。
启用插件：插件有多种启用方式
package.json 依赖：Umi 会自动检测 dependencies 和 devDependencies 里的 umi 插件
配置：在配置里可通过 presets 和 plugins 配置插件
环境变量：还可通过环境变量 UMI_PRESETS 和 UMI_PLUGINS 注册额外插件
检查插件注册情况：umi plugin list/umi plugin list --key 注意，需要安装umi,npm install -g umi

https://www.jianshu.com/p/3255c40b11d7

https://www.jianshu.com/p/311e3e41688d