微信搜索【大奇測試開】，關注這個堅持分享測試開發干貨的家伙。
內容提要
首先說下為啥這次測試開發系列教程前端選擇Antd React，其實也是糾結對比過最終決定挑戰一把，想法大概有幾下幾點：
- 筆者自己走出
vue舒適區，拓展全棧的能力，也為平台開發測試同學提供多一種選擇； - 對比后發現它有官方的持續維護和更完善生態，比如助手插件、區塊、模板組件、圖表、設計資源等；
- 在外企和遠程的需求中 React 占很重的比例，或許為后續的測試轉型提供一種可能技能。
當然本身Mock這個項目之前是用element ui admin完成的前端開發，在系列的最后如果需要的人多，我也可以整理作為一個分支分享出來，供有只想用vue的同學做學習參考。
准備和說明
編譯環境： 開發電腦上已安裝NodeJs，配置好 npm、node, tyarn 命令
開發工具：推薦 WebStorm
前端語言：React （是一個用於構建用戶界面的 JavaScript 庫 ）
掌握內容
- 了解Antd相關框架知識和官方一些建議
- 源代碼運行演示，以及如何初始新項目
- 了解代碼結構，對比React和Vue的不同
新手須知
Ant Design Pro 是螞蟻開源的開箱即用的中台前端/設計解決方案，內部UI組件庫是antd（基於 Ant Design 設計體系的 React UI 組件庫）它提供完整的腳手架，涉及 國際化，權限，mock，數據流，網絡請求等各個方面。為中后台中常見的方案提供了最佳實踐來減少學習和開發成本。同時為了提供更加高效的開發體驗，提供了一系列模板組件，ProLayout，ProTable，ProList 都是開發中后台的好幫手，可以顯著的減少樣板代碼。可以通過下面的大圖來了解整個 Ant Design Pro 的架構。
更多的詳細內容參考下官方文檔，這里不粘貼復述，建議了解下。
雖然 知其然知其所以然 更好，但不會也沒任何關系，對系列開發學習不會有太大影響，因為后續的文章后我會一步步帶了解。
源碼運行體驗
首先看下源碼（完整版）的運行的效果，順便驗證自己的開發環境是否OK。
步驟（保姆級）如下：
1. 官方跳轉github項目，復制https克隆地址
2.通過Git下載然后IDE導入，或者WebStorm 通過Get from VCS直接創建
3.切到代碼分支（重要）到all-blocks，因為默認master 是簡版，沒有包含全部演示頁面
4.開啟 Terminal進入項目 或WebStorm底部terminal直接打開
5.運行依賴安裝和運行命令，正常會出現App running at 提示
npm isntall # 安裝依賴 # npm isntall --force # 依賴安裝出錯時嘗試 # npm audit fix --force # 安裝還不行時候嘗試 npm start # 開發模式編譯運行
6. 通過 http://localhost:8000 訪問，內部的更多頁面可自行體驗，下載源碼及體驗這個完整版的目的是后續如果有需要類似的頁面，可以做很好的參考甚至直拷貝接使用。
官方在線預覽地址 https://preview.pro.ant.design
模板項目
創建腳手架
由於依賴初始化受外部網絡的不穩定影像，官方建議的是使用yarn管理包
關於yarn也是一種JS包的管理工具，相比npm它有安裝速度快、版本統一等優點，想了解更多參考https://yarn.bootcss.com/docs
1. 創建模板項目，打開終端切斷換到對應目錄，通過命令執行腳手架
# 使用 yarn yarn create umi daqitemplete
2. 按照終端提示提示，選擇 ant-design-pro模板 -> 選擇JavaScript語言 -> 選擇simple基礎模板
antd 的模板中 simple 是基礎模板，只提供了框架運行的基本內容，complete 包含 antd 的集成方案，不太適合當基礎模板來進行二次開發，和上邊源代碼運行一樣，比較適合參考開發。
3. 安裝依賴和運行腳手架項目
官方操作視頻：https://gw.alipayobjects.com/os/antfincdn/0wSaPUs36y/My%252520Sequence_1.mp4
cd daqitemplete && tyarn # 或 cd daqitemplete && npm install # 開發模式運行 npm run start
除了命令行也同樣可以導入WebStorm中配置運行，然后瀏覽器通過訪問 http://localhost:8000 預覽，可以從下邊的截圖中看到只包含了最簡單的三個頁面簡單后台
Tips：Antd有個很好用的工具插件可以方便添加區塊和模版，可以通過命令打開后重新運行項目查看一下，具體的使用將在開發實戰篇用應用。
# 打開開發模式下頁面右下角的小氣泡，方便添加區塊和模版等pro資產 tyarn add @umijs/preset-ui -D # 或 npm install --save-dev @umijs/preset-ui
項目結構
腳手架會生成一套完整的開發框架，提供了涵蓋后台開發的各類功能和坑位，官方給出的目錄結構說明如下，有些在我們的Mock項目中用不到的，后續我逐步刪掉，大家到時候注意下項目源代碼即可。
├── config # umi 配置，包含路由，構建等配置 ├── mock # 本地模擬數據 ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地靜態資源 │ ├── components # 業務通用組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 通用布局 │ ├── models # 全局 dva model │ ├── pages # 業務頁面入口和常用模板 │ ├── services # 后台接口服務 │ ├── utils # 工具庫 │ ├── locales # 國際化資源 │ ├── global.less # 全局樣式 │ └── global.ts # 全局 JS ├── tests # 測試工具 ├── README.md └── package.json
代碼結構推薦
對於頁面的開發，官方還給了一個推薦規范，目的讓開發能夠更方便的定位到相關頁面組件代碼，該規范只作為指導。
src
├── components
└── pages
├── Welcome // 路由組件下不應該再包含其他路由組件，基於這個約定就能清楚的區分路由組件和非路由組件了
| ├── components // 對於復雜的頁面可以再自己做更深層次的組織，但建議不要超過三層
| ├── Form.tsx
| ├── index.tsx // 頁面組件的代碼
| └── index.less // 頁面樣式
├── Order // 路由組件下不應該再包含其他路由組件，基於這個約定就能清楚的區分路由組件和非路由組件了
| ├── index.tsx
| └── index.less
├── user // 一系列頁面推薦通過小寫的單一字母做 group 目錄
| ├── components // group 下公用的組件集合
| ├── Login // group 下的頁面 Login
| ├── Register // group 下的頁面 Register
| └── util.ts // 這里可以有一些共用方法之類，不做推薦和約束，看業務場景自行做組織
└── * // 其它頁面組件代碼
React對比Vue
同vue一樣React也一個JavaScript庫，還有一個angular是目前比較流行的三大前端編程庫，在我的淺顯理解都是為了更好更快的做前端的開發，這里不會對其各種不同、優缺點做展開說，想知曉的網上一大堆自行搜索，還是那句話測試平台項目中只是掌握其如何應用。因此下邊我也只給出兩種庫demo項目的頁面編寫對比，先了解下編碼不同之處就行。
從疊在一起的兩個模版項目來看，首先是文件格式不同，然后最大的卻別是語法格式上，vue頁面是模塊的化的，之前的提測平台系列講過，分了 <template>、 <script>、 <css> 三部分，而react采用的是 JSX語法 ，從對比圖上看script和html相關寫在了一起。
JSX 是一個 JavaScript 的語法擴展，將HTML和JavaScript二者共同存放在稱之為“組件”的松散耦合單元之中，來實現關注點分離，簡化來說當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析。React不強制要求使用 JSX。
具體JSX語法怎么寫，Ant Design組件怎么應用，筆者也是在邊學邊整理中，期待一下自我的挑戰吧，到此本篇前端基礎就分享這么多，后邊將陸續開始項目開發實戰內容分享，歡迎長期關注一起交流成長！
最后強調一下，本篇前端基礎內容中給出很多鏈接，也涉及很多知識點，這些如果你有時間也感興趣就大致快速學下，有助於你后邊的理解和學習，但不必糾掌握沒、是否需要全部深入學習等問題，因為學習的目的不同，過分看重只會讓你懷疑人生以及打擊積極性。
擴展學習推薦
重要的資源
關於后續更多進展和分享歡迎持續關注公眾號或博客。