React是一个用于构建用户界面的库，是当前主流的前端框架之一。

这里的主要目的是演示如何使用react构建一个简单的登录页面。

演示准备

不需要激活码本地安装也是一个不错的选择，而且插件很多，使用得当的话也能用的舒服。

准备一个登录接口，可以是一个mock接口，也可以直接用一些后端框架写一个在本地运行。

实际演示-创建项目

进入工作目录，打开cmd界面，通过命令创建一个新项目：

# report-pc是项目名称，可以随便写npx create-react-app report-pc

在新建过程中会引入一些必要的包：

创建一个新的反应项目

实用演示-配置sass环境

配置sass环境。 Sass是一种预编译的CSS，与Less类似。 由于React内置了处理sass的配置，所以在创建的React项目中可以直接使用sass来编写样式。

安装解析sass的包：

纱线添加 sass

创建全局样式文件：

索引.scss

引用这个样式文件：

参考index.scss

删除一些不会使用的文件和引用：

删除无用的文件和引用

实战演示-配置基本路由

需要安装路由包：

纱线添加反应--dom

准备一个功能组件Login：

准备另一个功能组件：

配置两个准备好的路由组件：

配置路由

实战演示-Ant介绍

antd 是一个基于 Ant 设计系统的 React UI 组件库。 主要用于开发企业级中后端产品。 antd 有很多优点。 如果有兴趣的话，可以去官网看一下。

首先安装antd：

纱线添加antd

引用antd样式文件：

参考antd样式文件

要确认引入是否有效，可以直接从官网找到一个组件，添加到页面中，运行项目，直观地看到。

从官网找到一个组件：

官网上的组件

在页面中添加antd：

引用antd的组件

运行项目：

纱线开始

运行界面：

运行后界面

可以看到的样式都正常，说明antd样式文件引用没有问题。

实用演示-配置别名路径

配置别名路径的目的是通过@符号简化路径处理。

-react-app工具创建的项目隐藏了react-中的所有工程配置，因此项目中看不到任何配置信息。

我们可以通过第三方库来修改它。 首先安装第三方库：

纱线添加-D @craco/craco

创建craco配置文件并在该文件中配置路径别名：

修改.json中的脚本命令：

将原代码中的部分引用修改为带@符号的引用：

修改参考

重新启动项目，界面不会有任何变化。

目前，在引用时，如果直接输入@符号，不会提示路径。 为了方便，可以在根目录下创建一个配置文件：

编辑 .json 文件

有了这个配置文件，引用的时候放@符号就会有提示。

实际演示——搭建静态结构

在 Login/index.js 中创建登录页面基础结构。 您不需要在这里编写每个组件。 直接去antd官网复制案例：

查找案例源代码

复制源码：

贴出源码

Form的父组件Card主要用于以卡片的形式展示登录表单。

在Login目录下创建index.scss文件，并指定组件样式：

编辑登录index.scss文件

引用index.scss文件：

参考index.scss

将需要使用的图片资源放入目录：

根据实际需要，调整Form的结构和样式。 该参数控制触发提示的时机：

设置出现提示的时间

是否触发该提示是根据该规则的配置来确定的：

验证规则

规则不仅可以验证是否有值，还可以验证所填写值的具体格式，例如手机号码、电子邮件地址等。

这控制默认值：

设置默认值

实战演示-后端交互封装

这里我们使用axios调用后端接口并先安装：

纱线添加 axios