微信搜尋【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。
內容提要
首先說下為啥這次測試開發系列教程前端選擇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元件怎麼應用，筆者也是在邊學邊整理中，期待一下自我的挑戰吧，到此本篇前端基礎就分享這麼多，後邊將陸續開始專案開發實戰內容分享，歡迎長期關注一起交流成長！
最後強調一下，本篇前端基礎內容中給出很多連結，也涉及很多知識點，這些如果你有時間也感興趣就大致快速學下，有助於你後邊的理解和學習，但不必糾掌握沒、是否需要全部深入學習等問題，因為學習的目的不同，過分看重只會讓你懷疑人生以及打擊積極性。
擴充套件學習推薦
重要的資源
關於後續更多進展和分享歡迎持續關注公眾號或部落格。