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

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
CSDN_PBB4 小时前
[STM32 - 野火] - - - 固件库学习笔记 - - - 十五.设置FLASH的读写保护及解除
笔记·stm32·学习
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
鸡啄米的时光机7 小时前
vscode的一些实用操作
vscode·学习
Kai HVZ7 小时前
《深度学习》——调整学习率和保存使用最优模型
人工智能·深度学习·学习