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的更多相关文章

  1. 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上

    写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == ...

  2. 使用typescript开发react应用

    初始化 mkdir project-dir cd project-dir yarn init -y 安装依赖 yarn add react react-dom yarn add -D typescri ...

  3. 三千字讲清TypeScript与React的实战技巧

    很多时候虽然我们了解了TypeScript相关的基础知识,但是这不足以保证我们在实际项目中可以灵活运用,比如现在绝大部分前端开发者的项目都是依赖于框架的,因此我们需要来讲一下React与TypeScr ...

  4. 使用TypeScript创建React Native

    ⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html ⒉安装React Native官方的脚手架工具 npm i ...

  5. 开始使用 TypeScript 和 React

    原文地址:Getting started with TypeScript and React 原文作者:Jack_Franklin 译者:luxj 校对者:veizz Tom Dale 和其他人有一些 ...

  6. 从零搭建TypeScript与React开发环境

    前言 平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架.   我们业务仔做的最多就是npm i和npm run dev或者npm start,然 ...

  7. TypeScript在React项目中的使用总结

    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具TypeScript游乐场 React元素相关 Re ...

  8. typescript实现react中的批次式更新

    欢迎吐槽讨论 前言 笔者在React经常使用setState,在学习过程中作笔记以作总结,欢迎讨论. 关于setState的核心观点 1 . 执行setState不都是异步的. 2 . setStat ...

  9. [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??

    0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...

随机推荐

  1. bootstrap 轮播图带缩列图两端对齐,并自动换行然后左对齐!

    禁止自动轮播 data-interval="false" 完整代码如下: 1 <!DOCTYPE html> 2 <html> 3 4 <head&g ...

  2. Linux内核[CVE-2016-5195] (dirty COW)原理分析

    [原创]Linux内核[CVE-2016-5195] (dirty COW)原理分析-二进制漏洞-看雪论坛-安全社区|安全招聘|bbs.pediy.com https://bbs.pediy.com/ ...

  3. High Performance Networking in Google Chrome 进程间通讯(IPC) 多进程资源加载

    小结: 1. 小文件存储于一个文件中: 在内部,磁盘缓存(disk cache)实现了它自己的一组数据结构, 它们被存储在一个单独的缓存目录里.其中有索引文件(在浏览器启动时加载到内存中),数据文件( ...

  4. cdq分治 笔记

    算法讲解 这个算法用于解决三维偏序问题. 三维偏序:给定 \(n\) 个三元组: \((a_i,b_i,c_i)\),求同时满足满足 \(a_i\le a_j,b_i\le b_j,c_i\le c_ ...

  5. office提示“应用程序无法正常启动(0xc0000142)。请单击确认关闭应用程序”

    打开word文档,突然弹出如下提示框: 网上查询,说应用程序无法正常启动(0xc0000142)的原因可能是缺少组件导致的.控制面板 - 时钟和区域 - 更改日期.时间或数字格式 - 管理 - 更改系 ...

  6. java架构《并发线程高级篇四》

    本章主要讲并发线程的常见的两种锁.重入锁和读写锁 一:重入锁(ReentrantLock) 概念:重入锁,在需要进行同步的代码加锁,但最后一定不要忘记释放锁,否则会造成锁永远不能释放,其他线程进不了 ...

  7. CCF CSP 202009-1 称检查点查询

    202009-1 称检查点查询 题目背景 2020年6月8日,国务院联防联控机制发布<关于加快推进新冠病毒核酸检测的实施意见>,提出对"密切接触者"等八类重点人群&qu ...

  8. C++多元组tuple使用方法?你熟悉吗?快来看看吧

  9. Linux lsblk和df命令区别

    lsblk 查看的是block device,也就是逻辑磁盘大小. df查看的是file system, 也就是文件系统层的磁盘大小

  10. Codeforces Global Round 8 B. Codeforces Subsequences(构造)

    题目链接:https://codeforces.com/contest/1368/problem/B 题意 构造最短的至少含有 $k$ 个 $codeforces$ 子序列的字符串. 题解 如下表: ...