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

510ecccc0565577af94bf1e8b43c1507.png

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

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

f93c71dd76549d6c8cf64a3d6f0ebaf3.png

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

  • 使用 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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值