「 React TS3 專題」從建立第一個 React TypeScript3 項目開始

關於 React、TypeScript 的介紹和其在前端的重要地位，想必你們都很清楚吧，在這裏筆者就不介紹了。你也許會問爲何要基於 TypeScript3 構建 React ？不一樣的人也許有不一樣的答案，因爲 TypeScript3 和 React 分別來自微軟和Facebook，其江湖地位的顯赫不言而喻，前端的三大框架，Angular 在2.O版本就已經開始擁抱 TypeScript，當時筆者就是由於這個緣由放棄 Angular 的，由於還得學一門新東西，想一想就後悔。可是今時不一樣往日，React和vue都在積極的跟進選用和 TypeScript 進行整合，這是將來前端框架的趨勢不可逆轉，這可不是學不學的問題，不學 TypeScript，將來有可能就用不上最新的版本。

React的強大靈活些再結合TypeScript帶來了可選的靜態類型檢查以及最新的ECMAScript特性,讓咱們能以相似Java這樣工程化的思惟構建咱們的項目，讓咱們的代碼更易閱讀和易於團隊開發與維護。

本系列文章，是筆者讀《React with TypeScript 3》這本書的讀書筆記，這本書的發行日期爲2018年11月份，此筆記內容並非徹底照搬書的內容進行翻譯，是結合筆者思考和練習實踐整合的內容。筆者也是初學者，在這裏與你們一塊兒分享共同窗習，因爲做者寫此書時，使用到的相關框架版本和依賴項目版本如今有所變化，本書的例子筆者都會親自實踐，替你們提早採坑，確保能正常運行。因爲筆者英語水平有限，理解不免有所誤差，如你發現問題歡迎你們關注「前端達人」公衆號留言指正，我們一塊兒共同進步。

爲了表示對做者勞動的尊重，我就不在這裏分享電子書了，感興趣的能夠能夠到packtpub官網購買（packtpub.com）。

本章節包含如下內容

• 關於做者：Carl Rippon
• 本系列專題目錄結構
• 技術與系統環境要求
• 開始建立咱們的第一個基於 TypeScript3 的 React 項目

關於做者：Carl Rippon

在學習以前，咱們先了解下本書的做者：Carl Rippon。Carl Rippon 從事軟件行業已超過20年，在各個領域開發了一系列複雜的業務應用程序。過去八年來，他一直使用各類 JavaScript 技術構建單頁應用程序，包括 Angular，ReactJS 和 TypeScript。 Carl 一共發表了100多篇關於前端技術的博客文章。

本系列專題目錄結構

因爲本書在一開始花了很多的篇幅介紹 TypeScript ，爲了讓你們快速接觸基於 TypeScript3 的 React 項目筆者就不在這系列裏進行介紹 TypeScript3 了，若是你認爲有必要介紹，歡迎你們在留言區留言，若是留言人數多的話，我會專門開設個 TypeScript 3 專題進行專門介紹。

本系列目錄結構暫定以下，在筆者讀的過程當中，爲了讓你們更全面的理解本系列專題，可能會進行補充和調整，並非徹底基於書的結構。

• 入門基礎知識（建立、組件、生命週期等基礎知識）
• React路由
• 高級類型
• 組件設計模式專題
• 如何使用表單
• Redux專題
• 數據請求專題
• 使用GraphQL
• 用Jest進行單元測試

技術與系統環境要求

爲了有更好的閱讀體驗，你至少具有基礎的JS、CSS基礎知識，掌握了一些 ES6+語法和 TypeScript 的基礎知識。

運行本系列示例你至少安裝了node環境，npm版本至少爲 5.2，有一款你熟悉的編輯器，推薦你使用 Visual Studio Code 。（ 須要 TSLint 擴展和 Prettier 擴展。）

本系列筆者運行環境： npm 6.9.0；node v10.16.3

開始建立咱們的第一個基於 TypeScript3 的 React 項目

筆者將介紹兩種方式進行構建 React TS3 ( TypeScript3 簡稱，後面的內容都會以簡稱出現)，分別爲使用 create-react-app 進行快速構建 和 手工方式構建。

1、使用 create-react-app 構建

一、全局安裝 create-react-app

使用如下命令進行全局安裝：

npm install -g create-react-app複製代碼

二、運行項目建立命令

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 react@16.7.0-alpha.0
npm install react-dom@16.7.0-alpha.0複製代碼

三、添加 tslint.json 文件

3.1 爲了讓咱們的代碼更符合規範，咱們本地安裝tslint及相關依賴檢查約束咱們的代碼規範：

cd my-react-ts-app
npm install tslint tslint-react tslint-config-prettier --save-dev複製代碼

注：因爲本書做者在編寫本書時， TypeScript 官方並未決定全面採用ESLint，爲了保持和原書內容保持一致，筆者並未修改此內容，筆者建議你們採用 ESLint，由於 TypeScript 官方將再也不繼續維護 typescript-eslint-parser，他們會封存儲存庫，全面擁抱ESLint， 官方新聞連接 《The future of TypeScript on ESLint》

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的聲明能夠不按照字母的順序進行排序。規則的設置介紹就不在這裏詳細介紹了，感興趣的能夠到官網進行詳細閱讀（ palantir.github.io/tslint/rule… ）。

四、打開 App.tsx 作一些小改動

<a className="App-link"  href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >
  Learn React and TypeScript
 </a>複製代碼

修改完後，咱們進行保存。

五、運行項目

若是你能按照上述順序執行，輸入如下命令，不出意外你就能成功運行咱們的的項目了

npm start複製代碼

Bash

Copy

2、手動建立

手動建立步驟比較繁雜，可是可以從0~1的那種體驗，仍是蠻有成就感的。

一、建立文件夾

首先咱們手動建立一個文件夾manually，而後在manually下建立src源文件文件夾和發佈環境用的dist文件夾

mkdir manually
cd manually
mkdir src
mkdir dist複製代碼

二、建立 package.json 文件

該 package.json 文件定義了咱們的項目名稱，描述，構建命令，依賴的 npm 模塊等等。

打開終端輸入如下命令：

mkdir manually
npm init複製代碼

而後按照提示輸入項目的相關信息，而後就會在項目根目錄裏自動建立一個 package.json 文件

三、在本地項目安裝TypeScript

咱們能夠經過如下命令，在本地項目進行安裝：

npm install typescript --save-dev複製代碼

四、建立 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"]
}複製代碼

五、添加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"]
                   }
}
複製代碼

六、添加React相關依賴到項目中

經過如下命令將React安裝到咱們的項目裏：

npm install react react-dom複製代碼

添加 React 的 TypeScript 類型依賴，命令以下所示：

npm install @types/react @types/react-dom --save-dev複製代碼

七、在dist目錄下建立index.html文件

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
</head>
<body>
 <div id="root"></div>
 <script src="bundle.js"></script>
</body>
</html>複製代碼

咱們React應用程序中的內容將會注入到id=root的div中，全部的JS內容都會編譯成一個bundle.js，存在dist文件夾中。

八、建立一個簡單的 React 組件

咱們在src目錄裏建立一個 index.tsx 文件，聲明瞭一個函數組件，代碼以下:

import * as React from "react";
import * as ReactDOM from "react-dom";
const App: React.FC = () => {
return <h1>My React App!</h1>;
};
ReactDOM.render(<App />, document.getElementById("root"));
複製代碼

注： React.FC 爲 React TypeScript 的一個函數組件類型。這部份內容和原書內容不一致，原書內容爲React.SFC，函數組件SFC英文全稱爲「Stateless Function Components」，因爲做者編寫本書時hook還沒成爲正式標準，hook的出現容許包含 state 和 React lifecycle。原來的英文縮寫釋義不能準確表達此意，因此使用 React.FC 來替換 React.SFC ，所以本書使用 React.SFC 的例子，筆者都會替換成 React.FC 進行展現，建議你們採用 React.FC 進行聲明。

9 、添加 webpack

接下來咱們使用 webpack 打包咱們的項目，webpack 是什麼我就不介紹了，不明白的去 webpack官網看介紹。

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進行訪問

十、最終的項目文件夾

若是你順利的到了這一步，你的項目文件夾應該是這樣的:

十一、建立啓動和構建腳本

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.三、在開發環境中預覽

接下來咱們輸入如下命令，在開發模式下進行預覽：

npm start複製代碼

11.四、打開瀏覽器

接下來咱們在瀏覽器裏進行訪問，在瀏覽器輸入 http://localhost:9000/，不出意外會看到以下效果：

11.五、修改 index.tsx 文件

接下來在應用程序仍然在運行的狀況下，修改 index.tsx 文件的內容：

const App: React.FC = () => {
  return <h1>My React and TypeScript App!</h1>;
};
複製代碼

11.6 保存 index.tsx 文件

保存後，咱們會看到瀏覽器會自動刷新顯示咱們更新的內容：

小節

今天的內容就到這裏，咱們學習瞭如何使用 create-react-app 和 手工的兩種方式建立 React TypeScript3項目。下一篇文章小編將繼續給你們分享如何建立組件的主題，敬請期待... 

更多精彩內容，請微信關注「前端達人」公衆號！