「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」
前言
打听了一下，朋友推荐我可以去学习 React ，UI可以使用Ant Design ，脚手架使用 umi。
OK，那就入手一下看看效果，打开下面三个官网，首先要先了解下这三个是什么？然后再实践一下。
React
用于构建用户界面的 JavaScript 库。
以往我们实现一个页面，主要通过 html 完成页面的内容显示，css 像化妆品一样给页面样式，布局的装扮，JavaScript 像魔术师一样，赋予页面的动态效果。而 React 是使用JavaScript构建页面。可以看下 Demo 中提供的例子：
// hello.ts
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
例子中可以看到，这是一个typescript 文件，里面应该使用 typeScript语法（如果是一个js 文件里面是javascript语法），但也看到了 html 标签节点。所以可以理解 React 是包含 html 标签和 JS语法的，其实它被称为 JSX，是一个 JavaScript 的语法扩展。这是 React 所有的。
Ant Design
Ant Design 简称antd ，它是基于 Ant Design 设计体系的 React UI 组件库。
- 使用 TypeScript 开发，提供完整的类型定义文件。
- 开箱即用的高质量 React 组件
antd支持按需使用
UmiJs
可插拔的企业级 react 应用框架。在官网中，展示了三个特征：
- 插件化
- 开箱即用
- 约定式路由。类 nest.js的路由约定，也支持配置路由的方式。
umi 通过 create-umi 提供脚手架能力，包含：
- project，通用项目脚手架，支持选择是否启用 TypeScript，以及 umi-plugin-react 包含的功能
- ant-design-pro，仅包含 ant-design-pro 布局的脚手架，具体页面可通过 umi block 添加
- block，区块脚手架
- plugin，插件脚手架
- library，依赖（组件）库脚手架，基于 umi-plugin-library
使用 umi 提供的脚手架可以直接为我们创建好一个基础的框架。在官网中的提供 umi 的架构图中可以看倒能够支持不同终端项目框架，可以支持各种功能扩展和业务需求
实践一下
创建项目
$ mkdir myapp && cd myapp
$ yarn create umi
然后根据自己的偏好，选择自己想要的设置。我选择使用 构建 app 应用，使用typescript 开发，UI 使用 antd。
创建完成后，加载依赖包，然后启动项目.
$ yarn
$ yarn start
项目启动成功后，在浏览器打开 http://localhost:8000 就可以看到欢迎界面。
