WHAT - React 学习系列(三)

Editor Setup

A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them!

Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable! Some editors come with these features built in, but others might require adding an extension.

linting
https://react.dev/learn/editor-setup#linting

formatting
https://react.dev/learn/editor-setup#formatting

Using Typescript

https://react.dev/learn/typescript

Out of the box, TypeScript supports JSX and you can get full React Web support by adding @types/react and @types/react-dom to your project.

The following compiler options need to be set in your tsconfig.json:

  1. dom must be included in lib (Note: If no lib option is specified, dom is included by default).
  2. jsx must be set to one of the valid options. preserve should suffice for most applications. If you're publishing a library, consult the jsx documentationon what value to choose.

Every file containing JSX must use the .tsx file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX. These types in .tsx can be used for correctness checking and providing inline documentation in editors

tips:

To get type-checking, you can use the TypeScript Playground or use a more fully-featured online sandbox.
https://www.typescriptlang.org/play

we can look at a few examples of how to provide types for Hooks.

usestate https://react.dev/learn/typescript#typing-usestate

usereducer https://react.dev/learn/typescript#typing-usereducer

usecontext https://react.dev/learn/typescript#typing-usecontext

usememo https://react.dev/learn/typescript#typing-usememo

usecallback https://react.dev/learn/typescript#typing-usecallback

There is quite an expansive set of types which come from the @types/react package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them in React's folder in DefinitelyTyped.

DefinitelyTyped/types/react/index.d.ts at master · DefinitelyTyped/DefinitelyTyped

(1)dom events https://react.dev/learn/typescript#typing-dom-events

(2)children https://react.dev/learn/typescript#typing-children (React.ReactNode、React.ReactElement)

(3)style props https://react.dev/learn/typescript#typing-style-props (React.CSSProperties)

待学习

principles for structuring state
https://react.dev/learn/choosing-the-state-structure#principles-for-structuring-state

相关推荐
类人_猿36 分钟前
ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布
前端·iis·asp.net·.net·http站点服务器
一尘之中2 小时前
使用 PyTorch TunableOp 加速 ROCm 上的模型
人工智能·pytorch·学习
honey ball2 小时前
LLC与反激电路设计【学习笔记】
单片机·嵌入式硬件·学习
组态软件4 小时前
web组态软件
前端·后端·物联网·编辑器·html
前端Hardy4 小时前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
如生命般费解的谜团5 小时前
LLM学习笔记(7)Scaled Dot-product Attention
人工智能·笔记·学习·语言模型·json
loey_ln5 小时前
观察者模式和发布订阅模式
javascript·观察者模式·react.js
cnsxjean7 小时前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
Mephisto.java7 小时前
【大数据学习 | Spark-Core】详解Spark的Shuffle阶段
大数据·学习·spark
南宫生7 小时前
力扣-位运算-3【算法学习day.43】
学习·算法·leetcode