「React TS3 专题」从创建第一个 React TypeScript3 项目开始
「React TS3 专题」从创建第一个 React TypeScript3 项目开始
开始创建我们的第一个基于 TypeScript3 的 React 项目
笔者将介绍两种方式进行构建 React TS3 ( TypeScript3 简称，后面的内容都会以简称出现)，分别为使用 create-react-app 进行快速构建 和 手工方式构建。
一、使用 create-react-app 构建
1、全局安装 create-react-app
使用以下命令进行全局安装：
npm install -g create-react-app2、运行项目创建命令
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.03、添加 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》（https://eslint.org/blog/2019/01/future-typescript-eslint#linting）
3.2 编辑器里安装扩展
为了方便开发，我们在Visual Studio Code 编辑器里安装扩展（ Ctrl + Shift + X ），在左上角的搜索框中输入tslint：
3.3 在根目录创建 tslint.json 文件:
touch tslint.json3.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 做一些小改动
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >
Learn React and TypeScript
</a>修改完后，我们进行保存。
5、运行项目
如果你能按照上述顺序执行，输入以下命令，不出意外你就能成功运行我们的的项目了:
npm start
二、手动创建
手动创建步骤比较繁杂，但是能够从0~1的那种体验，还是蛮有成就感的。
1、创建文件夹
首先我们手动创建一个文件夹manually，然后在manually下创建src源文件文件夹和发布环境用的dist文件夹
mkdir manually
cd manually
mkdir src
mkdir dist2、创建 package.json 文件
该 package.json 文件定义了我们的项目名称，描述，构建命令，依赖的 npm 模块等等。
打开终端输入以下命令：
mkdir manually
npm init然后按照提示输入项目的相关信息，然后就会在项目根目录里自动创建一个 package.json 文件。
3、在本地项目安装TypeScript
我们可以通过以下命令，在本地项目进行安装：
npm install typescript --save-dev4、创建 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-dev7、在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文件夹中。
8、创建一个简单的 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官网看介绍（https://webpack.js.org/）。
9.1 在本地项目中安装 webpack 依赖
npm install webpack webpack-cli --save-dev9.2 Webpack 还有一个方便的 Web 服务，我们可以在开发过程中使用它：
npm install webpack webpack-dev-server --save-dev9.3 安装 ts-loader
ts-loader 帮助我们加载 TypeScript 相关代码，命令如下：
npm install ts-loader --save-dev9.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 buildbundle.js 会将用到的依赖项和我们的 react 组件代码都编译压缩成一个文件。
11.3、在开发环境中预览
接下来我们输入以下命令，在开发模式下进行预览：
npm start11.4、打开浏览器
接下来我们在浏览器里进行访问，在浏览器输入 http://localhost:9000/，不出意外会看到如下效果：
11.5、修改 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项目。下一篇文章小编将继续给大家分享如何创建组件的主题，敬请期待...
腾讯云开发者
