docs-components

仓库: reactjs/react.dev
安装量: 36
排名: #19313

安装

npx skills add https://github.com/reactjs/react.dev --skill docs-components

MDX Component Patterns Quick Reference Component Decision Tree Need Component Helpful tip or terminology Common mistake warning Advanced technical explanation Canary-only feature or Server Components only Deprecated API Experimental/WIP Visual diagram Multiple related examples Interactive code (see /docs-sandpack ) Console error display End-of-page exercises (Learn pages only) Heading Level Conventions Component Heading Level DeepDive title

(h4) Titled Pitfall

(h5) Titled Note

(h4) Recipe items

(h4) Challenge items

(h4) Callout Spacing Rules Callout components (Note, Pitfall, DeepDive) require a blank line after the opening tag before content begins. Never place consecutively: followed by - Combine into one with titled subsections, or separate with prose followed by - Combine into one, or separate with prose Allowed consecutive patterns: followed by - OK for multi-part explorations (see useMemo.md) followed by - OK when DeepDive explains "why" behind the Pitfall Separation content: Prose paragraphs, code examples (Sandpack), or section headers. Why: Consecutive warnings create a "wall of cautions" that overwhelms readers and causes important warnings to be skimmed. Incorrect: Don't do X. Don't do Y. Correct - combined:

Don't do X {/pitfall-x/}

Explanation.

Don't do Y {/pitfall-y/}

Explanation. Correct - separated: Don't do X. This leads to another common mistake: Don't do Y. Important clarifications, conventions, or tips. Less severe than Pitfall. Simple Note The optimization of caching return values is known as memoization. Note with Title Use

(h4) heading with an ID.

There is no directive for Server Components. {/no-directive/}

A common misunderstanding is that Server Components are denoted by "use server", but there is no directive for Server Components. The "use server" directive is for Server Functions. Version-Specific Note Starting in React 19, you can render <SomeContext> as a provider. In older versions of React, use <SomeContext.Provider>. Common mistakes that cause bugs. Use for errors readers will likely make. Simple Pitfall We recommend defining components as functions instead of classes. See how to migrate. Titled Pitfall Use

(h5) heading with an ID.

Calling different memoized functions will read from different caches. {/pitfall-different-caches/}

To access the same cache, components must call the same memoized function. Pitfall with Wrong/Right Code

useFormStatus will not return status information for a <form> rendered in the same component. {/pitfall-same-component/}

``js function Form() { // 🔴pending` will never be true const { pending } = useFormStatus(); return

; } Instead call useFormStatus from inside a component located inside

. Optional deep technical content. First child must be #### heading with ID. Standard DeepDive #### Is using an updater always preferred? {/*is-updater-preferred*/} You might hear a recommendation to always write code like `setAge(a => a + 1)` if the state you're setting is calculated from the previous state. There's no harm in it, but it's also not always necessary. In most cases, there is no difference between these two approaches. React always makes sure that for intentional user actions, like clicks, the `age` state variable would be updated before the next click. Comparison DeepDive For comparing related concepts: #### When should I use `cache`, `memo`, or `useMemo`? {/*cache-memo-usememo*/} All mentioned APIs offer memoization but differ in what they memoize, who can access the cache, and when their cache is invalidated. #### `useMemo` {/*deep-dive-usememo*/} In general, you should use `useMemo` for caching expensive computations in Client Components across renders. #### `cache` {/*deep-dive-cache*/} In general, you should use `cache` in Server Components to memoize work that can be shared across components. Multiple related examples showing variations. Each recipe needs . #### Counter (number) {/*counter-number*/} In this example, the `count` state variable holds a number. {/* code */} #### Text field (string) {/*text-field-string*/} In this example, the `text` state variable holds a string. {/* code */} Common titleText/titleId combinations: "Basic [hookName] examples" / examples-basic "Examples of [concept]" / examples-[concept] "The difference between [A] and [B]" / examples-[topic] End-of-page exercises. Learn pages only. Each challenge needs problem + solution Sandpack. #### Fix the bug {/*fix-the-bug*/} Problem description... Optional hint text. {/* problem code */} Explanation... {/* solution code */} Guidelines: Only at end of standard Learn pages No Challenges in chapter intros or tutorials Each challenge has #### heading with ID For deprecated APIs. Content should explain what to use instead. Page-Level Deprecation In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead. `forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). Method-Level Deprecation ### `componentWillMount()` {/*componentwillmount*/} This API has been renamed from `componentWillMount` to [`UNSAFE_componentWillMount`.](#unsafe_componentwillmount) Run the [`rename-unsafe-lifecycles` codemod](codemod-link) to automatically update. For APIs that only work with React Server Components. Basic RSC `cache` is only for use with [React Server Components](/reference/rsc/server-components). Extended RSC (for Server Functions) Server Functions are for use in [React Server Components](/reference/rsc/server-components). **Note:** Until September 2024, we referred to all Server Functions as "Server Actions". and For features only available in Canary releases. Canary Wrapper (inline in Intro) `` lets you group elements without a wrapper node. Fragments can also accept refs, enabling interaction with underlying DOM nodes. CanaryBadge in Section Headings ### FragmentInstance {/*fragmentinstance*/} CanaryBadge in Props Lists * **optional** `ref`: A ref object from `useRef` or callback function. CanaryBadge in Caveats * If you want to pass `ref` to a Fragment, you can't use the `<>...` syntax. Visual explanations of module dependencies, render trees, or data flow. `'use client'` segments the module dependency tree, marking `InspirationGenerator.js` and all dependencies as client-rendered. Attributes: name : Diagram identifier (used for image file) height : Height in pixels width : Width in pixels alt : Accessible description of the diagram (Use Sparingly) Numbered callouts in prose. Pairs with code block annotations. Syntax In code blocks: ```js [[1, 4, "age"], [2, 4, "setAge"], [3, 4, "42"]] import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(42); } Format: `[[step_number, line_number, "text_to_highlight"], ...]` In prose: ```mdx 1. The current state initially set to the initial value. 2. The `set` function that lets you change it. Guidelines Maximum 2-3 different colors per explanation Don't highlight every keyword - only key concepts Use for terms in prose, not entire code blocks Maintain consistent usage within a section ✅ Good use - highlighting key concepts: React will compare the dependencies with the dependencies you passed... 🚫 Avoid - excessive highlighting: When an Activity boundary is hidden during its initial render... Display console output (errors, warnings, logs). Uncaught Error: Too many re-renders. Levels: error , warning , info Component Usage by Page Type Reference Pages For component placement rules specific to Reference pages, invoke /docs-writer-reference . Key placement patterns: goes before at top of page goes after for page-level deprecation goes after method heading for method-level deprecation wrapper goes inline within appears in headings, props lists, and caveats Learn Pages For Learn page structure and patterns, invoke /docs-writer-learn . Key usage patterns: Challenges only at end of standard Learn pages No Challenges in chapter intros or tutorials DeepDive for optional advanced content CodeStep should be used sparingly Blog Pages For Blog page structure and patterns, invoke /docs-writer-blog . Key usage patterns: Generally avoid deep technical components Note and Pitfall OK for clarifications Prefer inline explanations over DeepDive Other Available Components Version/Status: , , , , Visuals: , , , , Console: , Specialized: , , , , , , , , See existing docs for usage examples of these components.
← 返回排行榜