上节课是引入了antD，引入的原因是因为提供了而很多现成的插件~抄一抄改一改就好~
那么我们来做一个练习，写一个登录页面。
①背景知识介绍：
HTML：是静态网页，该文档本身只有页面结构，可以显示页面内容；
CSS：层叠样式表，通过设置对应的样式属性可以修改html文档内各元素的显示、位置等样式；
如修改颜色、字体、字号、宽高、位置、背景等。
Javascript：动态脚本语言，广泛应用于web应用的功能开发以及丰富页面体验，可以动态控制页面内容；
如修改页面文字、图片、各种效果、功能等；
一个通俗的例子：HTML就像人的身体，CSS就像人的衣服，Javascript就像人的思想和行为。
②因为我们引入了antD，所以可以直接进去复制粘贴修改得到自己想要的页面：
先查看antD引入以后带来的demo内容：
（初始引入的状态应该为js,会提示语法错误，需要修改为jsx语法），直接import就行
③页面分解：
①用户名的文本输入框
②密码的文本输入框
③提交按钮
方法一、去antD抄袭
查看地址:
https://ant.design/components/form-cn/
方法二、自己手写，仿照着App.jsx和App.css。在div中放入自己的js文件即可。
import React, { Component } from 'react';
import './App.css';
export class Login extends Component {
render() {
return(
<div>
</div>
)
}
}
④粘贴完毕后进行修改
step1、修改login.js文件。改成一个可以对外访问的
step2、修改index.js的指向文件，指向login.js
（注意层层引入）
⑤启动前端文件~查看
进入antD-demo，使用yarn start启动
⑥这时候会发现样式有丢失，原因是index.css里面缺少引入antd.css
引入成功以后再查看页面：如下图
至此~这个登录的页面就算是写好，且可以访问了。
⑦常见问题
（1）问题1，修改login.js时最后一行置灰，提示Unused default…
原因：这个是置灰的这个地方还没有被引用
解决办法：去index里面不仅仅要修改指向的是login，更需要手动对这个文件进行引入，如图：
（2）问题2，启动前端时页面提示如下
原因：React没有被定义
解决办法：
