「 React TS3 专题」从建立第一个 React TypeScript3 项目开始

时间  2019-11-06
标签 react ts3 专题 建立 第一个 typescript3 typescript 项目 开始 栏目 React 繁體版
原文   原文链接

关于 React、TypeScript 的介绍和其在前端的重要地位，想必你们都很清楚吧，在这里笔者就不介绍了。你也许会问为何要基于 TypeScript3 构建 React ？不一样的人也许有不一样的答案，因为 TypeScript3 和 React 分别来自微软和Facebook，其江湖地位的显赫不言而喻，前端的三大框架，Angular 在2.O版本就已经开始拥抱 TypeScript，当时笔者就是由于这个缘由放弃 Angular 的，由于还得学一门新东西，想一想就后悔。可是今时不一样往日，React和vue都在积极的跟进选用和 TypeScript 进行整合，这是将来前端框架的趋势不可逆转，这可不是学不学的问题，不学 TypeScript，将来有可能就用不上最新的版本。html

React的强大灵活些再结合TypeScript带来了可选的静态类型检查以及最新的ECMAScript特性,让咱们能以相似Java这样工程化的思惟构建咱们的项目，让咱们的代码更易阅读和易于团队开发与维护。前端

本系列文章，是笔者读《React with TypeScript 3》这本书的读书笔记，这本书的发行日期为2018年11月份，此笔记内容并非彻底照搬书的内容进行翻译，是结合笔者思考和练习实践整合的内容。笔者也是初学者，在这里与你们一块儿分享共同窗习，因为做者写此书时，使用到的相关框架版本和依赖项目版本如今有所变化，本书的例子笔者都会亲自实践，替你们提早采坑，确保能正常运行。因为笔者英语水平有限，理解不免有所误差，如你发现问题欢迎你们关注“前端达人”公众号留言指正，我们一块儿共同进步。vue

为了表示对做者劳动的尊重，我就不在这里分享电子书了，感兴趣的能够能够到packtpub官网购买（packtpub.com）。node

本章节包含如下内容
  • 关于做者：Carl Rippon
  • 本系列专题目录结构
  • 技术与系统环境要求
  • 开始建立咱们的第一个基于 TypeScript3 的 React 项目


关于做者：Carl Rippon

在学习以前，咱们先了解下本书的做者：Carl Rippon。Carl Rippon 从事软件行业已超过20年，在各个领域开发了一系列复杂的业务应用程序。过去八年来，他一直使用各类 JavaScript 技术构建单页应用程序，包括 Angular，ReactJS 和 TypeScript。 Carl 一共发表了100多篇关于前端技术的博客文章。react

本系列专题目录结构

因为本书在一开始花了很多的篇幅介绍 TypeScript ，为了让你们快速接触基于 TypeScript3 的 React 项目笔者就不在这系列里进行介绍 TypeScript3 了，若是你认为有必要介绍，欢迎你们在留言区留言，若是留言人数多的话，我会专门开设个 TypeScript 3 专题进行专门介绍。webpack

本系列目录结构暂定以下，在笔者读的过程当中，为了让你们更全面的理解本系列专题，可能会进行补充和调整，并非彻底基于书的结构。git

  • 入门基础知识（建立、组件、生命周期等基础知识）
  • React路由
  • 高级类型
  • 组件设计模式专题
  • 如何使用表单
  • Redux专题
  • 数据请求专题
  • 使用GraphQL
  • 用Jest进行单元测试

技术与系统环境要求

为了有更好的阅读体验，你至少具有基础的JS、CSS基础知识，掌握了一些 ES6+语法和 TypeScript 的基础知识。es6

运行本系列示例你至少安装了node环境，npm版本至少为 5.2，有一款你熟悉的编辑器，推荐你使用 Visual Studio Code 。（ 须要 TSLint 扩展和 Prettier 扩展。）github

本系列笔者运行环境： npm 6.9.0；node v10.16.3web

开始建立咱们的第一个基于 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项目。下一篇文章小编将继续给你们分享如何建立组件的主题，敬请期待... 

更多精彩内容，请微信关注“前端达人”公众号！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程