版本：【"JYadmin-react-antd":"^1.0.0"】

版權所有：微信公眾號【微新悅】 原文連結：https://www.weixinyue.cn/frontCourses/#/JYAdminReactAntd1.0/1（閱讀效果更佳） 文章說明：本課題會帶大家從零到一打造一套基於react+antd封裝的優秀後臺模板整合方案

第一節：【react+antd基礎框架搭建（登入）】

第一步：使用create-react-app腳手架建立一個專案

create-react-app my-project

第二步：修改埠號

 "start": "set PORT=9000 && react-scripts start"

　　說明：

在根目錄【package.json】的【scripts】物件裡修改【start】為上述命令

第三步：配置@符號-資源路徑指向

（1）、執行 npm run eject （2）、在config/webpack.config.js檔案的alias中插入程式碼 （3）、'@': path.resolve('src')

說明： 執行npm run eject此命令會把 react-scripts 封裝的一些webpack配置等全部解壓到專案目錄，專案結構中

第四步(1)：配置路由模組

cnpm install --save react-router react-router-dom

　　第四步(2)：修改根目錄App.js程式碼

ui效果：如下圖

第五步：編寫後臺管理系統登入頁（ES6 class 來定義一個元件）

第五步(1)、class元件基本構成

第五步(2)、引入antd 按需載入

cnpm install --save antd
cnpm i babel-plugin-import -D

　　互動效果：如下視訊

1、css使用行內元素 js檔案配置
2、使用antd form表單以及實現表單輸入校驗