關於React、TypeScript的介紹和其在前端的重要地位，想必大家都很清楚吧，在這裡我就不過多的介紹。你也許會問為什麼要基於 TypeScript3 構建 React ？不同的人也許有不同的答案，由於 TypeScript3 和 React 分別來自微軟和Facebook，其江湖地位的顯赫不言而喻，React的強大靈活些再結合TypeScript帶來了可選的靜態類型檢查以及最新的ECMAScript特性,讓我們能以類似Java這樣工程化的思維構建我們的項目，讓我們的代碼更易閱讀和易於維護。
本系列文章，基於筆者對這本書《React with TypeScript 3》的讀書筆記，不是翻譯此書，筆者也是初學者，在這裡與大家一起分享共同學習，本書的例子筆者都會親自實踐，替大家提前採坑，由於筆者英語水平有限，理解難免有偏差，如你發現問題歡迎大家留言指正，咱們一起共同進步。
為了表示對作者勞動的尊重，我就不在這裡分享電子書了，感興趣的可以可以到packtpub官網購買（packtpub.com）。
在學習之前，我們先了解下本書的作者：Carl Rippon。Carl Rippon從事軟件行業已超過20年，在各個領域開發了一系列複雜的業務應用程序。過去八年來，他一直使用各種JavaScript技術構建單頁應用程序，包括Angular，ReactJS和TypeScript。 Carl撰寫了100多篇關於各種技術的博客文章。
本系列專題目錄結構
由於本書在一開始花了不少的篇幅介紹 TypeScript ，為了讓大家快速接觸基於 TypeScript3 的 React 項目筆者就不在這系列裡進行介紹了，如果你認為有必要介紹，歡迎大家在留言區留言，如果留言人數多的話，我會專門開設個 TypeScript 3 專題進行專門介紹。
本系列目錄結構暫定如下，在筆者讀的過程中，為了讓大家更全面的理解本系列專題，可能會進行補充和調整，並不是完全基於書的結構。
- 入門基礎知識（創建、組件、生命週期等基礎知識）
- React路由
- 高級類型
- 組件設計模式專題
- 如何使用表單
- Redux專題
- hook專題
- 數據請求專題
- 使用GraphQL
- 用Jest進行單元測試
技術與系統環境要求
為了有更好的閱讀體驗，你至少具備基礎的JS、CSS基礎知識，掌握了一些 ES6+語法和 TypeScript 的基礎知識。
運行本系列示例你至少安裝了node環境，npm版本至少為 5.2，有一款你熟悉的編輯器，推薦你使用 Visual Studio。（ 需要TSLint擴展和Prettier擴展。）
本系列筆者運行環境： npm 6.9.0 node v10.16.3
開始創建我們的第一個基於 TypeScript3 的 React 項目
筆者將介紹兩種方式進行構建 React TS3( TypeScript3 簡稱，後面的內容都會以簡稱出現)，分別為使用 create-react-app 進行快速構建 和 手工方式構建。
一、使用 create-react-app 構建
1、全局安裝 create-react-app 和 typescript
使用以下命令進行全局安裝：
npm install -g create-react-app
npm install -g typescript
2、運行項目創建命令
npx create-react-app my-react-ts-app --typescript
注：請查看根目錄下的的 package.json 文件確保React版本不低於16.7.0-alpha.0，筆者的react版本為16.9.0，如果低於16.7.0-alpha.0，你可以使用以下命令進行安裝
npm install [email protected]
npm install [email protected]
3、添加 tslint.json 文件
3.1 為了讓我們的代碼更符合規範，我們安裝tslint及相關依賴檢查約束我們的代碼規範：
cd my-react-ts-app
npm install tslint tslint-react tslint-config-prettier --save-dev
3.2 為了方便開發，我們在Visual Studio Code 編輯器裡安裝擴展（ Ctrl + Shift + X ），在左上角的搜索框中輸入tslint
3.3 在根目錄創建 tslint.json 文件
touch tslint.json
3.4 打開 tslint.json 文件，添加相關規則
{
"extends": [
"tslint:recommended",
"tslint-react",
"tslint-config - prettier "
],
"rules": {
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-debugger": false,
"no-console": false,
},
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts",
"coverage/lcov-report/*.js"
]
}
}
上述配置規則允許我們使用debugger和console，並且允許imports和對象key的聲明可以不按照字母的順序。規則的設置介紹就不在這裡詳細介紹了，感興趣的可以到官網進行詳細閱讀（https://palantir.github.io/tslint/rules/ ）。
4、打開App.tsx做一些小改動
修改完後，我們進行保存。
5、運行項目
如果你能按照上述順序執行，輸入以下命令，不出意外你就能成功運行我們的的項目了
npm start
二、手動創建
手動創建步驟比較繁雜，但是能夠從0~1的那種體驗，還是蠻有成就感的。
1、創建文件夾
首先我們手動創建一個文件夾manually，然後在manually下創建src源文件文件夾和發佈環境用的dist文件夾
mkdir manually
cd manually
mkdir src
mkdir dist
2、創建 package.json 文件
該package.json文件定義了我們的項目名稱，描述，構建命令，依賴npm模塊等等。
打開終端輸入以下命令：
npm init
然後按照提示輸入項目的各種信息，然後就會在項目根目錄創建一個 package.json 文件
3、在本地項目安裝TypeScript
我們可以通過以下命令，在本地項目進行安裝
npm install typescript --save-dev
4、創建 tsconfig.json 文件
tsconfig.json 配置了 TS3 如何編譯以及相關的基本規則，配置如下：
{
"compilerOptions": {
"target": "es5",
"module": "es6",
"moduleResolution": "node",
"lib": ["es6", "dom"],
"sourceMap": true,
"jsx": "react",
"strict": true,
"noImplicitReturns": true,
"rootDir": "src",
"outDir": "dist",
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
5、添加TSLint
在本地項目下安裝TSLint,命令如下：
npm install tslint tslint-react tslint-config-prettier --save-dev
通過以下命令創建tslint.json文件，並在文件裡輸入以配置內容：
touch tslint.json
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": ["node_modules/**/*.ts"]
}
}
6、添加React相關依賴到項目中
通過以下命令將React安裝到我們的項目裡
npm install react react-dom
添加React的TypeScript類型依賴，命令如下所示：
npm install @types/react @types/react-dom --save-dev
7、在dist目錄下創建index.html文件
我們React應用程序中的內容將會注入到id=root的div中，所有的JS內容都會編譯成一個bundle.js，存在dist文件夾中。
8、創建一個簡單的React組件
我們在src目錄裡創建一個index.tsx文件，聲明瞭一個函數組件，代碼如下
import * as React from "react";
import * as ReactDOM from "react-dom";
const App: React.FC = () => {
returnMy React App!
;
};
ReactDOM.render(, document.getElementById("root"));
注： React.FC為React TypeScript的一個函數組件類型。這部分內容和原版內容不一致，原書內容為React.SFC，函數組件被稱為“Stateless Function Components”，換句話說就是純函數，由於作者編寫本書時hook還沒成為正式標準，hook的出現允許包含state和React lifecycle。所有使用React.FC來替換React.SFC
9 、添加 webpack
接下來我們使用webpack打包我們的項目，webpack是什麼我就不過多介紹了，不明白的去 https://webpack.js.org/ 官網看介紹。
9.1 在本地項目中安裝webpack依賴
npm install webpack webpack-cli --save-dev
9.2 Webpack還有一個方便的Web服務，我們可以在開發過程中使用它：
npm install webpack webpack-dev-server --save-dev
9.3 安裝 ts-loader
ts-loader幫助我們加載TypeScript相關代碼，命令如下：
npm install ts-loader --save-dev
9.4 最後配置 webpack
接下來，我們在項目根目錄創建 webpack.config.js 文件，配置文件內容如下：
const path = require("path");
module.exports = {
entry: "./src/index.tsx",
mode: "development",
module: {
rules: [{
test: /\\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
}
};
針對這個配置文件，讓我們來逐步分解下：
- module.exports：聲明webpack配置對象
- mode：設置webpack當前為開發環境模式還是生產模式
- entry：設置webpack從哪裡開始尋找要捆綁的模塊，在我們的項目中入口文件是index.tsx
- module：設置webpack如何處理不同的模塊，WebPack使用 ts-loader 處理 ts文件和tsx擴展。
- resolve：設置webpack如何解析模塊
- output：設置webpack把代碼編譯到哪裡去，輸出到哪個文件夾。這裡輸出目錄是dist，文件名是bundle.js
- devServer：設置webpack開發服務器，根目錄是dist文件夾，並通過端口9000進行訪問
10、最終的項目文件夾
如果你順利的到了這一步，你的項目文件夾應該是這樣的。
11、創建啟動和構建腳本
11.1 接下來我們使用npm命令啟動我們的應用程序，一個用於開發模式，一個用於生產打包模式，你可以修改package.json中scripts對應的內容部分，示例如下
{
...
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1",
"start": "webpack-dev-server --env development",
"build": "webpack --env production"
},
...
}
11.2 在生產打包環境中，我們運行如下命令，就會發現dist文件夾裡，多出來了一個bundle.js文件：
npm run build
bundle.js 會將用到的依賴項和我們的react組件代碼都編譯壓縮成一個文件。
11.3 在開發環境中預覽
接下來我們輸入以下命令，在開發模式下進行預覽
npm start
11.4 接下來我們在瀏覽器裡進行訪問
在瀏覽器輸入 http://localhost:9000/，不出意外會看到如下效果：
11.5 接下來在應用程序仍然在運行的情況下，修改 index.tsx
const App: React.FC = () => {
return My React and TypeScript App!
;
};
11.6 保存index.tsx，我們會看到瀏覽器會自動刷新顯示我們更新的內容：
小節
今天的內容就到這裡，我們學習瞭如何使用 create-react-app 和 手工的兩種方式創建 React TypeScript3項目。下一篇文章小編將繼續給大家分享如何創建組件的主題，敬請期待...
閱讀更多 前端達人 的文章
