如何创建web项目_如何在 React TS3 项目里创建类组件？

上一章节，我们一起学习了如何创建一个 React TS3 项目。本章节与大家一起聊聊如何使用 TS3 的方式创建组件。声明 React组件的方式共有两种：使用类的方式声明组件(class component)和使用函数的方式声明组件(function component)。今天笔者给大家聊聊使用类的方式声明组件。

今天我们将要创建一个 Confirm 的对话框组件，类似alert对话框，有标题，内容，确认和取消按钮。组件完成后的效果如下图所示：

本篇文章主要包含以下内容：

• 使用 create-react-app 方式创建项目
• 创建第一个类组件
• JSX介绍
• 用 TS3 的方式定义组件属性
• 定义可选属性
• 初始化属性默认值

使用 create-react-app 方式创建项目

本示例我们将使用 create-react-app 创建项目，这篇文章「React TS3 专题」手把手教你创建一个 React TypeScript3项目有介绍过，这里我们快速熟悉下。

1、创建项目

打开控制台，通过以下命令创建我们的 React TS3 项目：

npx create-react-app my-components --typescript

2、安装tslint依赖

接下来，为了保证项目代码质量，我们安装 tslint 的相关依赖：

cd my-componentsnpm install tslint tslint-react tslint-config-prettier --save-dev

3、然后添加 tslint.json 文件，配置相关规则

{ "extends": ["tslint:recommended