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

相关推荐
昔人'1 分钟前
css 高度从 0 到 auto 的动画效果 `interpolate-size: allow-keywords`
前端·css
理想国的女研究僧2 分钟前
Jupyter Notebook操作指南(1)
ide·python·学习·jupyter
百思可瑞教育14 分钟前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
GilgameshJSS28 分钟前
【学习K230-例程19】GT6700-TCP-Client
网络·python·网络协议·学习·tcp/ip
IT_陈寒35 分钟前
Python 3.12 新特性实战:10个性能优化技巧让你的代码快如闪电⚡
前端·人工智能·后端
Wiktok1 小时前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
冲!!1 小时前
SCSS 中的Mixins 和 Includes,%是什么意思
前端·css·scss
悠悠~飘1 小时前
php学习(第五天)
学习·php
能不能别报错1 小时前
K8s学习笔记(二):Pod
笔记·学习·kubernetes