申明: 该文章组件全副为函数组件，仅作为记录本人应用 react 全家桶来开发后盾治理平台的记录日志，故文章内容可能会以本人的视角来书写，比如说省略了某些常识，跳过了某些要害的点。故该文章不作为教程公布。请读者选择性观看

一. 前期工作筹备

1.git 创立仓库
2.create-react-app xxx
3. 连贯仓库
4. 创立分支并且切换分支

二. 我的项目根本构造的创立

依据理论我的项目的大略根本配置来实现本人 src 文件夹下的根底结构，将来如有需要能够再增加。

三. 主页登陆页面的实现

路由工作筹备，BrowserRouter 包裹入口文件

接下来是用户登陆界面和后盾治理页面路由的切换, 先构建好骨架。

然而这时候默认首页是没有组件的，因为咱们心愿一进来是登陆页面，所以须要加一行 <Navigate> 的代码

这里应用了 Material UI 的组件疾速生成了登陆页 <Login/> 组件
http://localhost:3000/login 当初 localhost:3000 默认地址就是

四. 登陆页面表单验证

在这里咱们抉择第三方组件库 react-hook-form 无比优雅的表单提交验证工具，不像 antd 那样惨重，性能却能和 material 的 input 类的组件完满符合！

register和 handleSubmit 是这个 hook 的灵魂组件，其它的局部能够按需构造赋值。
register是一个函数，它能够承受两个参数，第一个参数 相当于这个 input 框的 name 值，为 string 类型，第二个参数 是一个配置选项，是一个对象类型的数据，用了束缚 input 框 value 值的格局。register 作用是在 input 类的组件中注入，而后返回 input 框的 name 值和对应的 value。

须要特地留神的是，如果注入了 register 函数，那么这个 TextField 组件就不能再额定有 name 属性，否则 TextField 的 name 属性将以内联款式为准，咱们将无奈从 register 的返回值中获取对应的 value！！

这个 hook 的另一个性能就是能够和 TextField 的helperText完满配合来实现动静的提醒用户指是否输出了咱们规定的条件的值。

从引入形式不难察看出，formState- 表单的状态中引入出 errors 这个办法，它无需你去监听 onchange 事件，该办法自身就能够实时获取用户目前的输出，来判断用户是否谬误。

errors 罕用来搭配 register(“userName”)中的第一个参数，errors.userName.message的意思是动静的检测用户输出的值，如果输出过程有谬误，那么就将返回绝对应的错误信息

上面是错误信息类型的演示，这些都是我在输出过程中动态显示的，并不是我点击了很屡次提交才呈现的成果.

当输出的值都符合规范的时候，提交按钮才会失效。

handleSubmit()接管用户定义的一个函数作为参数，并且将表单的 name 和 value 传递进该函数的参数中

留神，括号内的 submit 是我自定义的办法，名字不是必须叫 submit

咱们在控制台打印一下 userInfo, 能够看到用户的输出信息曾经获取到了。

上面是 submit 发送 ajax 申请来模仿获取服务器的信息而后比拟用户输出的值来判断是否容许用户登陆。（服务器是用 express 简答写的一个虚构服务器）

上面是虚构服务器信息, 只写了一个 get 办法，目前还没学到数据库，将来筹备学习 mongoDB 来模仿数据库，实现后续的用户注册性能.

至此，审核用户明码账号是否正确的性能实现。