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 了,因为我们都活在梦里,所以咱们 ...
随机推荐
- your service shouldn’t know anything about HTTP headers, or gRPC error codes 干净架构 服务不应知道 HTTP头、gRPC错误码 服务仅知道服务相关的
Go kit - Frequently asked questions https://gokit.io/faq/ Services - What is a Go kit service? Servi ...
- fastjson的deserializer的主要优化算法 漏洞
JSON最佳实践 | kimmking's blog http://kimmking.github.io/2017/06/06/json-best-practice/ Fastjson内幕 Java综 ...
- python中贪婪与非贪婪
Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符: 非贪婪则相反,总是尝试匹配尽可能少的字符. 在"*","?", ...
- 分布式缓存 — redis
redis是一种支持Key-Value等多种数据结构的存储系统.可用于缓存,事件发布或订阅,高速队列等场景.该数据库使用ANSI C语言编写,支持网络,提供字符串,哈希,列表,队列,集合结构直接存取, ...
- Display属性学习总结
HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...
- SSH入门开发（实现一个简单的登录功能）详解
开头,首先想记录下一首诗,是今天拇指阅读看到的:很有感触,所以乐于分享: 那么,下面正式开始进入正题,搭建一个 SSH完整的项目: 首先,我们需要在WEB-ROOT下创建一个login.jsp(登录) ...
- Go语言学习笔记（2）——零散的话题（反射）
这部分是<Go语言编程>这本书的第9章的内容.书中给该章节的定位是一个文章集,其包含了一些Go语言中比较少涉及,或是比较深入的讨论的内容.因为第一节就是反射,而反射在我看来是比较重要的内容 ...
- scala的隐式转换学习总结（详细）
一,隐式转换函数 1, 格式, implicit def 函数名(参数):返回值类型={ //函数体 //返回值 } 2,例子: //导入对应的规则类,以免出现警告 scala> import ...
- sql 工具类function
--判断是否为整数 create or replace function is_number(param VARCHAR2) return NUMBER is v_num NUMBER; begin ...
- Nginx图文详解
想必大家一定听说过 Nginx,若没听说过它,那么一定听过它的"同行"Apache 吧! Nginx 的产生 Nginx 同 Apache 一样都是一种 Web 服务器.基于 RE ...