关于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 = () => {
returnMy React and TypeScript App!
;
};
11.6 保存index.tsx,我们会看到浏览器会自动刷新显示我们更新的内容:
小节
今天的内容就到这里,我们学习了如何使用 create-react-app 和 手工的两种方式创建 React TypeScript3项目。下一篇文章小编将继续给大家分享如何创建组件的主题,敬请期待...
閱讀更多 前端達人 的文章
關鍵字: Studio TypeScript 手把手