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:
- dom must be included in lib (Note: If no lib option is specified, dom is included by default).
- 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