# React-Umi 初食用

如今，互联网应用的市场竞争非常激烈，传统的前端项目开发架构较为复杂，一套系统往往需要分发多个模块，这对于维护和开发团队工作都极不方便。而 Umi 是一个构建企业级 Web 前端应用的前端框架，基于 Ant Design 和 React 体系，提供一系列的开发功能，如路由、状态管理、数据拉取、按需加载、Mock、国际化、多主题、Less、热加载等，开箱即用。

## 环境准备

- node -v 大于 10.3 及以上
- yarn 1.22.15

## 项目安装

1. 新建文件夹，在该文件夹下打开终端，或者使用 vscode 在文件夹下打开终端
2. 执行 `yarn create @umijs/umi-app`

## 启动项目

在安装完成后，终端自动执行命令行命令，启动项目：`yarn start`

## 目录结构

项目安装完成后，项目的目录结构如下：

.
├── mock
│ └── services.js
├── node_modules
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo.svg
│ ├── manifest.json
│ ├── robots.txt
├── src
│ ├── app.js
│ ├── assets
│ │ ├── avatar.png
│ │ └── favicon.png
│ ├── components
│ │ └── Header.js
│ ├── layouts
│ │ ├── BasicLayout.js
│ │ └── UserLayout.js
│ ├── pages
│ │ ├── Admin.js
│ │ ├── BasicPage.js
│ │ ├── Dashboard.js
│ │ ├── Login.js
│ │ └── User.js
│ ├── services
│ │ └── login.js
│ └── utils
│ ├── request.js
│ └── util.js
├── .env.development
├── .gitignore
├── package-lock.json
├── README.md
└── umirc.config.js

## 编写代码

在 `src/pages/BasicPage.js` 中添加如下代码：

import React from 'react';

const BasicPage = () => {
return (

);
};

export default BasicPage;

在 `src/routes.js` 中添加如下代码：

export default [
{
path: '/',
component: '@/pages/BasicPage',
},
];

## 预览效果

在浏览器中输入 `http://localhost:8000`，即可看到您刚刚创建的页面。

## 总结

现在，您已经成功地创建了一个使用 React 和 Umi 构建的简单应用程序。您可以通过修改 `src` 目录中的文件来定制您的应用程序，并使用 `yarn build` 命令来构建您的应用程序。