React快速入門 Part1 (內附錄屏影片)
- 2020 年 2 月 25 日
- 筆記
前言
當下是大前端時代，前端已經從簡單的切圖華麗轉變到了工程級項目，越來越多的能力沉澱在前端項目中，其中也包含了複雜的UI業務邏輯，用一個jQuery走天下的時代已經一去不復返了。
基於業務的持續發展我們選用了React技術棧來構建公司項目的前端能力。 而今天我們通過線上分享的方式讓大家能快速上手，錄屏的影片文件請查看文章尾部。
技術棧
起初我們在Vue和React直接進行選擇，最終我們被Ant Design項目吸引，從而選用了React。 雖然Ant Design擁有Vue實現，但是由社區貢獻的，我們穩健的選擇了官方支援React。 至於Vue和React，如果開始辯論估計能大戰365天，我們這邊就不過多的展開了。
TypeScript
為JS提供類型支援，企業級項目必備，不多做介紹，越來越多的JS項目轉向到TS，包含且不止 Vue、antd、Angular。
React Native
我們在APP端使用了RN相關技術，來構建RN APP和實現APP中小程式的能力.
Ant Design項目
Ant Design 是螞蟻金服體驗技術部推出的企業級產品設計體系，並輸出了基於這個體系的許多組件庫和解決方案。
antd
基於 Ant Design 設計語言，提供了開箱即用的高品質 React 和 Angular 組件實現，用於開發和服務於企業級中後台產品。
Ant Design Pro
開箱即用的中台前端/設計解決方案
Ant Design Mobile
一個基於 Preact / React / React Native 的 UI 組件庫
AntV
G2 / G2Plot 可視化引擎
G2 是一套基於圖形語法理論的可視化底層引擎，以數據驅動，具有高度的易用性和擴展性。用戶無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣的可交互的統計圖表。
G2Plot 是開箱即用、易於配置、具有良好視覺和交互體驗的通用統計圖表庫。
G6 / Graphin 圖可視化引擎
G6 是一個簡單、易用、完備的圖可視化引擎，它在高訂製能力的基礎上，提供了一系列設計優雅、便於使用的圖可視化解決方案。能幫助開發者搭建屬於自己的圖可視化、圖分析、或圖編輯器應用。
Graphin 取名意為 Graph Insight（圖的分析洞察），是一個基於 G6 封裝的 React 組件庫，專註在關係可視分析領域，簡單高效，開箱即用。
F2 移動端可視化方案
F2 是一個專註於移動，開箱即用的可視化解決方案，完美支援 H5 環境同時兼容多種環境（Node, 小程式，Weex），完備的圖形語法理論，滿足你的各種可視化需求，專業的移動設計指引為你帶來最佳的移動端圖表體驗。
L7 空間數據可視分析
螞蟻金服 AntV 數據可視化團隊推出的基於 WebGL 的開源大規模地理空間數據可視分析開發框架。
Ant Motion
使用 Ant Motion 能夠快速在 React 框架中使用動畫。提供了單項，組合動畫，以及整套解決方案。
More…
以上組件足以應付大多數業務場景了，的人官方和社區還有更多豐富的組件，有興趣的同學可以去官網查看。
開發環境
NodeJS
大前端必備，可以去官網下載各個平台的安裝包：https://nodejs.org/en/download/
Yarn V1
包管理器我們選擇了 Yarn V1，這邊大家不要去使用最新的V2版本berry
設置淘寶NPM鏡像
yarn config set registry https://registry.npm.taobao.org
常用命令
|
命令 |
描述 |
|---|---|
|
add / add -D |
安裝依賴和安裝開發依賴 |
|
remove |
刪除依賴 |
|
start |
啟動項目 |
|
build |
構建項目 |
|
upgradeInteractive |
互動式更新依賴包 |
VSCode
我們選用了VSCode作為IDE
推薦插件安裝
|
插件名稱 |
描述 |
|---|---|
|
Settings Sync |
同步VSCode的插件和配置到Github Gist |
|
Auto Rename Tag |
自動重命名標籤 |
|
Bracket Pair Colorizer |
為括弧對提供不同的顏色標記 |
|
ESLint |
ES靜態語法分析 |
|
TSLint |
TS靜態語法分析 |
|
Prettier |
文件格式化插件 |
|
React Native Tools |
RN工具 |
|
TypeScript Import Sorter |
對import進行整理和排序 |
推薦工作區配置
文件保存時自動格式化程式碼和自動整理import (刪除未使用的import和import排序) 菜單導航: 「Code – 首選項 – 設置 – 工作區 – 使用json打開」
{ "editor.formatOnSave": true, "importSorter.generalConfiguration.sortOnBeforeSave": true, "importSorter.sortConfiguration.removeUnusedImports": true, "importSorter.sortConfiguration.removeUnusedDefaultImports": true, "importSorter.sortConfiguration.customOrderingRules.rules": [{ "regex": "^(react|react-native)$", "orderLevel": 8 }, { "type": "importMember", "regex": "^$", "orderLevel": 5, "disableSort": true }, { "regex": "^[^.@]", "orderLevel": 10 }, { "regex": "^[@]", "orderLevel": 15 }, { "regex": "^[.]", "orderLevel": 30 }] }
至此我們的開發環境就搭建完成了。
知識點腦圖
包管理器
PM
ES6
ES6
TypeScript
TypeScript
常見的文件擴展名
常見的文件擴展名
React
React
我的第一個項目
創建
# 創建一個基於umi的項目 yarn create umi # 包依賴還原 yarn # 啟動項目 yarn start
刪除不需要的腳手架文件
腳手架中包含了一些默認文件，大家如果不需要可以自行選擇刪除。
我的第一個Page – TodoList
這一節我們會完成一個簡單的任務列表，功能點有
- 添加任務
- 任務列表的展示
- 刪除一個任務
完成Demo的內容後你將掌握以下內容：
- TypeScript的基本使用
- antd組件的使用
- React Hooks
- useState
- useEffect
- useMemo
- 通過yarn安裝、刪除、和升級包
- linqts
- ……
《React Part 1》分享影片和資料
影片文件
https://v.youku.com/v_show/id_XNDU0MTQ4Njk3Ng==.html 密碼: jkzlReact
資料
https://pan.baidu.com/s/1bi6Qfrv3n0cVbU23bMnRpQ 提取碼: itdg
最後
今天我們從安裝環境開始到第一個Demo，其中盡量降低了大家的學習門檻，許多React的高階用法還沒有說明，在下一節中我們會繼續介紹Component、DvaJS、UmiJS、redux、樣式表、自定義Hook、服務端交互等內容以助力大家可以使用TS+React開發企業級應用，敬請期待。
