TypeScript with React
TypeScript with React
# Make a new directory
$ mkdir react-typescript
# Change to this directory within the terminal
$ cd react-typescript
# Initialise a new npm project with defaults
$ npm init -y
# Install React dependencies
$ npm install react react-dom
# Make index.html and App.tsx in src folder
$ mkdir src
$ cd src
$ touch index.html
$ touch App.tsx
# Open the directory in your favorite editor
$ code .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>React + TypeScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="main"></div>
<script src="./App.tsx"></script>
</body>
</html>
# Install Parcel to our DevDependencies
$ npm i parcel-bundler -D
# Install TypeScript
$ npm i typescript -D
# Install types for React and ReactDOM
$ npm i -D @types/react @types/react-dom
{
"name": "react-typescript",
"version": "1.0.0",
"description": "An example of how to use React and TypeScript with Parcel",
"scripts": {
"dev": "parcel src/index.html"
},
"keywords": [],
"author": "Paul Halliday",
"license": "MIT"
}
import * as React from 'react';
export default class Counter extends React.Component {
state = {
count: 0
};
increment = () => {
this.setState({
count: (this.state.count + 1)
});
};
decrement = () => {
this.setState({
count: (this.state.count - 1)
});
};
render () {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
}
import * as React from 'react';
import { render } from 'react-dom';
import Counter from './Counter';
render(<Counter />, document.getElementById('main'));
$ npm run dev
# open http://localhost:1234.
Create React App and TypeScript
$ create-react-app my-new-app --typescript
https://www.digitalocean.com/community/tutorials/react-create-react-app
https://facebook.github.io/create-react-app/docs/adding-typescript
Functional Components
https://www.digitalocean.com/community/tutorials/react-functional-components
import * as React from 'react';
const Count: React.FunctionComponent<{
count: number;
}> = (props) => {
return <h1>{props.count}</h1>;
};
export default Count;
interface Props {
count: number;
}
const Count: React.FunctionComponent<Props> = (props) => {
return <h1>{props.count}</h1>;
};
Class Components
import * as React from 'react';
import Count from './Count';
interface Props {}
interface State {
count: number;
};
export default class Counter extends React.Component<Props, State> {
state: State = {
count: 0
};
increment = () => {
this.setState({
count: (this.state.count + 1)
});
};
decrement = () => {
this.setState({
count: (this.state.count - 1)
});
};
render () {
return (
<div>
<Count count={this.state.count} />
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
}
Default Props
import * as React from 'react';
interface Props {
count?: number;
}
export default class Count extends React.Component<Props> {
static defaultProps: Props = {
count: 10
};
render () {
return <h1>{this.props.count}</h1>;
}
}
render () {
return (
<div>
<Count />
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
)
}
refs
https://www.digitalocean.com/community/tutorials/react-typescript-with-react
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
TypeScript with React的更多相关文章
- 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上
写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == ...
- 使用typescript开发react应用
初始化 mkdir project-dir cd project-dir yarn init -y 安装依赖 yarn add react react-dom yarn add -D typescri ...
- 三千字讲清TypeScript与React的实战技巧
很多时候虽然我们了解了TypeScript相关的基础知识,但是这不足以保证我们在实际项目中可以灵活运用,比如现在绝大部分前端开发者的项目都是依赖于框架的,因此我们需要来讲一下React与TypeScr ...
- 使用TypeScript创建React Native
⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html ⒉安装React Native官方的脚手架工具 npm i ...
- 开始使用 TypeScript 和 React
原文地址:Getting started with TypeScript and React 原文作者:Jack_Franklin 译者:luxj 校对者:veizz Tom Dale 和其他人有一些 ...
- 从零搭建TypeScript与React开发环境
前言 平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架. 我们业务仔做的最多就是npm i和npm run dev或者npm start,然 ...
- TypeScript在React项目中的使用总结
序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具TypeScript游乐场 React元素相关 Re ...
- typescript实现react中的批次式更新
欢迎吐槽讨论 前言 笔者在React经常使用setState,在学习过程中作笔记以作总结,欢迎讨论. 关于setState的核心观点 1 . 执行setState不都是异步的. 2 . setStat ...
- [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??
0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...
随机推荐
- 解决 minicom 不能接收键盘输入问题
今天突然minicom 不能接受键盘输入了.早上的时候在其他设备上不能识别usb转串口的设备,重新启动电脑后,恢复正常了.下午又出现minicom 不接收键盘输入. 百度了一下解决了. 解决方法 由于 ...
- DevOps运动的缘起 将DevOps想象为一种编程语言里面的一个接口，而SRE类实现了这个接口
SRE vs DevOps:是敌是友? - DockOne.io http://www.dockone.io/article/5935 RE vs DevOps:是敌是友? [编者的话]网站可靠 ...
- Linux下unix socket 读写 抓包
Linux下unix socket 读写 抓包-ubuntuer-ChinaUnix博客 http://blog.chinaunix.net/uid-9950859-id-247877.html
- 某商城系统（V1.3-2020-01-10）前台命令执行漏洞
漏洞文件: ./inc/module/upload_img.php 先跟进 del_file 函数: 在 del_file 函数中首先执行了unlink操作,然后接着进行了file_exists 判断 ...
- Spark JDBC方式连接MySQL数据库
Spark JDBC方式连接MySQL数据库 一.JDBC connection properties(属性名称和含义) 二.spark jdbc read MySQL 三.jdbc(url: Str ...
- apache https 双向证书生成
Https分单向认证和双向认证 单向认证表现形式:网站URL链接为https://xxx.com格式 双向认证表现心事:网站URL链接为https://xxx.com格式,并且需要客户端浏览器安装一个 ...
- go语言常见面试题
前言 从网上找了一些面试题,觉得有意思的我都记录下来,自己学习和大家一起学习吧. 有些初级的题目只放答案,一些值得探讨的问题我会写上我自己的分析过程,希望大家多多交流. 原文链接 选择题 1.[初级] ...
- JDK-7新特性，更优雅的关闭流-java try-with-resource语句使用
前言 公司最近代码质量整改,需要对大方法进行调整,降低到50行以下,对方法的深度进行降低,然后有些文件涉及到流操作,很多try/catch/finally语句,导致行数超出规范值,使用这个语法可以很好 ...
- CTGU_训练实录
前言 之前做题都没有感觉,慢慢出去比赛后,打Codeforces,看别的人博客,知乎上的讨论,慢慢的对算法有一些自己的思考.特写是最近看知乎上别人说的Dijkstra利用水流去理解,LCA的学习,感觉 ...
- vector总结
vector是不定长数组,具有静态数组的稳定性和动态分配内存的灵活性,在赛场上不失为指针之外牺牲部分时间的保险之举. 本文先介绍一些vector常用的函数(部分借鉴一篇博客中的内容 链接),并以此为铺 ...