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 了,因为我们都活在梦里,所以咱们 ...
随机推荐
- 【转】使用ssh-keygen和ssh-copy-id三步实现SSH无密码登录
[原]http://blog.chinaunix.net/uid-26284395-id-2949145.html ssh-keygen 产生公钥与私钥对. ssh-copy-id 将本机的公钥复制 ...
- RestTemplate post请求
以前一开始用原生的http请求,那叫一个累,后来找到一个第三方的工具包,用起来是真的舒服,不过有一说一,第三方工具包依赖性真的强,除非和组长商量过,不然能少用,还是少用点.话说搞微服务的肯定少不了和H ...
- 如何让淘宝不卡顿？ 读写比例 动态扩容 分布式化路线 mysql 优化
作为数据库核心成员,如何让淘宝不卡顿? https://mp.weixin.qq.com/s/l-qXV8NI6ywnUvp3S6an3g
- compare-algorithms-for-heapqsmallest
Compare algorithms for heapq.smallest « Python recipes « ActiveState Code http://code.activestate.co ...
- spring boot 启动 开启注解 加载 bean
业务描述:创建一个cache类然后交给spring 管理. @Component @Scope("singleton") public class Cache { public C ...
- 端口被占用通过域名的处理 把www.domain.com均衡到本机不同的端口 反向代理 隐藏端口 Nginx做非80端口转发 搭建nginx反向代理用做内网域名转发 location 规则
负载均衡-Nginx中文文档 http://www.nginx.cn/doc/example/loadbanlance.html 负载均衡 一个简单的负载均衡的示例,把www.domain.com均衡 ...
- hbuilder使用技巧总结
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写,它基于Ecl ...
- 一：Spring Boot 的配置文件 application.properties
Spring Boot 的配置文件 application.properties 1.位置问题 2.普通的属性注入 3.类型安全的属性注入 1.位置问题 当我们创建一个 Spring Boot 工程时 ...
- java压缩图片设置宽高
package html2pdf_2; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; ...
- samba 、 FTP 、 lrzsz工具
samba Samba是一个实现不同操作系统(Windows.Linux.UNIX)之间文件共享和打印机共享的一种SMB协议的免费软件:linux与linux之间共享用NFS:samba基于cs架构: ...