上節課是引入了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沒有被定義
解決辦法：
