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

相关推荐
学前端搞口饭吃2 分钟前
react reducx的使用
前端·react.js·前端框架
aidingni8883 分钟前
掌握 JavaScript 中的 Map 和 Set
前端·javascript
努力往上爬de蜗牛5 分钟前
react3面试题
javascript·react.js·面试
开心不就得了7 分钟前
React 进阶
前端·javascript·react.js
Olrookie7 分钟前
ruoyi-vue(十四)——前端框架及package.json,vite.config.js, main.js文件介绍
前端·笔记
jeff渣渣富8 分钟前
Taro 2.x 分包优化实践:如何防止分包文件被打包到主包
前端·javascript
谢尔登8 分钟前
【React】React 哲学
前端·react.js·前端框架
wow_DG36 分钟前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(八):Vuex 内部机制
前端·javascript·vue.js
尚久龙36 分钟前
安卓学习 之 SeekBar(音视频播放进度条)
android·java·学习·手机·android studio
若年封尘37 分钟前
吃透 Vue 样式穿透:从 scoped 原理到组件库样式修改实战
前端·javascript·vue.js·样式穿透·scoped