React入门到精通（使用umi创建React项目）

环境准备

现在是大前端时代，开发项目得有node，并确保 node 版本是 10.13 或以上。（Mac建议用nvm阿里管理node）。
推荐使用yarn来管理依赖，建议使用国内阿里源,切换源。推荐使用 nrm来管理源

yarn config set registry https://registry.npm.taobao.org

脚手架

我们在一个空的地方创建一个目录

mkdir app && cd app

通过命令创建项目

yarn create  @umijs/umi-app
 或 npx @umijs/create-umi-app

我们会看到umi会自动帮我们创建文件

success Installed "@umijs/[email protected]" with binaries:
      - create-umi-app
Copy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts
✨  Done in 44.06s.

安装依赖

 yarn

我们会看到安装过程

success Saved lockfile.
$ umi generate tmp
✨  Done in 163.60s.

启动项目

yarn start

在浏览器里打开 http://localhost:8000/，能看到以下界面，

目录结构

umi初始化项目的目录结构大致是

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

package.json

主要包含包的依赖

.umirc.ts

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

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 方法等。

构建发布

yarn build

构建产物默认生成到 ./dist 下，然后通过 tree 命令查看，

./dist
├── index.html
├── umi.css
└── umi.js

结束语

到这里我们就完成了umi项目的搭建。接下来我们一起学习React JSX。