Showing preview only (5,312K chars total). Download the full file or copy to clipboard to get everything.
Repository: reactjs/ja.reactjs.org
Branch: main
Commit: f97f53da242d
Files: 436
Total size: 3.8 MB
Directory structure:
gitextract_jl4wrltp/
├── .claude/
│ ├── agents/
│ │ └── docs-reviewer.md
│ ├── settings.json
│ └── skills/
│ ├── docs-components/
│ │ └── SKILL.md
│ ├── docs-sandpack/
│ │ └── SKILL.md
│ ├── docs-voice/
│ │ └── SKILL.md
│ ├── docs-writer-blog/
│ │ └── SKILL.md
│ ├── docs-writer-learn/
│ │ └── SKILL.md
│ ├── docs-writer-reference/
│ │ └── SKILL.md
│ ├── react-expert/
│ │ └── SKILL.md
│ └── review-docs/
│ └── SKILL.md
├── .eslintignore
├── .eslintrc
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── 0-bug.yml
│ │ ├── 1-typo.yml
│ │ ├── 2-suggestion.yml
│ │ ├── 3-framework.yml
│ │ └── config.yml
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ └── workflows/
│ ├── analyze.yml
│ ├── analyze_comment.yml
│ ├── discord_notify.yml
│ ├── label_core_team_prs.yml
│ └── site_lint.yml
├── .gitignore
├── .husky/
│ └── pre-commit
├── .prettierignore
├── .prettierrc
├── CLAUDE.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE-DOCS.md
├── README.md
├── colors.js
├── eslint-local-rules/
│ ├── __tests__/
│ │ ├── fixtures/
│ │ │ └── src/
│ │ │ └── content/
│ │ │ ├── basic-error.md
│ │ │ ├── duplicate-metadata.md
│ │ │ ├── malformed-metadata.md
│ │ │ ├── mixed-language.md
│ │ │ ├── stale-expected-error.md
│ │ │ └── suppressed-error.md
│ │ └── lint-markdown-code-blocks.test.js
│ ├── index.js
│ ├── package.json
│ ├── parser.js
│ └── rules/
│ ├── diagnostics.js
│ ├── lint-markdown-code-blocks.js
│ ├── markdown.js
│ ├── metadata.js
│ └── react-compiler.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── plugins/
│ ├── gatsby-remark-japanese-fix/
│ │ ├── index.js
│ │ └── package.json
│ ├── markdownToHtml.js
│ ├── remark-header-custom-ids.js
│ └── remark-smartypants.js
├── postcss.config.js
├── public/
│ ├── .well-known/
│ │ └── atproto-did
│ ├── browserconfig.xml
│ ├── html/
│ │ └── single-file-example.html
│ ├── js/
│ │ ├── jsfiddle-integration-babel.js
│ │ └── jsfiddle-integration.js
│ ├── robots.txt
│ └── site.webmanifest
├── scripts/
│ ├── copyright.js
│ ├── deadLinkChecker.js
│ ├── downloadFonts.mjs
│ ├── generateRss.js
│ ├── headingIDHelpers/
│ │ ├── generateHeadingIDs.js
│ │ ├── validateHeadingIDs.js
│ │ └── walk.js
│ └── headingIdLinter.js
├── src/
│ ├── components/
│ │ ├── Breadcrumbs.tsx
│ │ ├── Button.tsx
│ │ ├── ButtonLink.tsx
│ │ ├── DocsFooter.tsx
│ │ ├── ErrorDecoderContext.tsx
│ │ ├── ExternalLink.tsx
│ │ ├── Icon/
│ │ │ ├── IconArrow.tsx
│ │ │ ├── IconArrowSmall.tsx
│ │ │ ├── IconBsky.tsx
│ │ │ ├── IconCanary.tsx
│ │ │ ├── IconChevron.tsx
│ │ │ ├── IconClose.tsx
│ │ │ ├── IconCodeBlock.tsx
│ │ │ ├── IconCopy.tsx
│ │ │ ├── IconDeepDive.tsx
│ │ │ ├── IconDownload.tsx
│ │ │ ├── IconError.tsx
│ │ │ ├── IconExperimental.tsx
│ │ │ ├── IconFacebookCircle.tsx
│ │ │ ├── IconGitHub.tsx
│ │ │ ├── IconHamburger.tsx
│ │ │ ├── IconHint.tsx
│ │ │ ├── IconInstagram.tsx
│ │ │ ├── IconLink.tsx
│ │ │ ├── IconNavArrow.tsx
│ │ │ ├── IconNewPage.tsx
│ │ │ ├── IconNote.tsx
│ │ │ ├── IconPitfall.tsx
│ │ │ ├── IconRestart.tsx
│ │ │ ├── IconRocket.tsx
│ │ │ ├── IconRss.tsx
│ │ │ ├── IconSearch.tsx
│ │ │ ├── IconSolution.tsx
│ │ │ ├── IconTerminal.tsx
│ │ │ ├── IconThreads.tsx
│ │ │ ├── IconTwitter.tsx
│ │ │ └── IconWarning.tsx
│ │ ├── Layout/
│ │ │ ├── Footer.tsx
│ │ │ ├── HomeContent.js
│ │ │ ├── Page.tsx
│ │ │ ├── Sidebar/
│ │ │ │ ├── SidebarButton.tsx
│ │ │ │ ├── SidebarLink.tsx
│ │ │ │ ├── SidebarRouteTree.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── SidebarNav/
│ │ │ │ ├── SidebarNav.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Toc.tsx
│ │ │ ├── TopNav/
│ │ │ │ ├── BrandMenu.tsx
│ │ │ │ ├── TopNav.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── getRouteMeta.tsx
│ │ │ └── useTocHighlight.tsx
│ │ ├── Logo.tsx
│ │ ├── MDX/
│ │ │ ├── BlogCard.tsx
│ │ │ ├── Challenges/
│ │ │ │ ├── Challenge.tsx
│ │ │ │ ├── Challenges.tsx
│ │ │ │ ├── Navigation.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── CodeBlock/
│ │ │ │ ├── CodeBlock.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── CodeDiagram.tsx
│ │ │ ├── ConsoleBlock.tsx
│ │ │ ├── Diagram.tsx
│ │ │ ├── DiagramGroup.tsx
│ │ │ ├── ErrorDecoder.tsx
│ │ │ ├── ExpandableCallout.tsx
│ │ │ ├── ExpandableExample.tsx
│ │ │ ├── Heading.tsx
│ │ │ ├── InlineCode.tsx
│ │ │ ├── Intro.tsx
│ │ │ ├── LanguagesContext.tsx
│ │ │ ├── Link.tsx
│ │ │ ├── MDXComponents.module.css
│ │ │ ├── MDXComponents.tsx
│ │ │ ├── PackageImport.tsx
│ │ │ ├── Recap.tsx
│ │ │ ├── Sandpack/
│ │ │ │ ├── ClearButton.tsx
│ │ │ │ ├── Console.tsx
│ │ │ │ ├── CustomPreset.tsx
│ │ │ │ ├── DownloadButton.tsx
│ │ │ │ ├── ErrorMessage.tsx
│ │ │ │ ├── LoadingOverlay.tsx
│ │ │ │ ├── NavigationBar.tsx
│ │ │ │ ├── OpenInCodeSandboxButton.tsx
│ │ │ │ ├── OpenInTypeScriptPlayground.tsx
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── ReloadButton.tsx
│ │ │ │ ├── SandpackRoot.tsx
│ │ │ │ ├── Themes.tsx
│ │ │ │ ├── createFileMap.ts
│ │ │ │ ├── index.tsx
│ │ │ │ ├── runESLint.tsx
│ │ │ │ ├── template.ts
│ │ │ │ └── useSandpackLint.tsx
│ │ │ ├── SandpackWithHTMLOutput.tsx
│ │ │ ├── SimpleCallout.tsx
│ │ │ ├── TeamMember.tsx
│ │ │ ├── TerminalBlock.tsx
│ │ │ ├── TocContext.tsx
│ │ │ └── YouWillLearnCard.tsx
│ │ ├── PageHeading.tsx
│ │ ├── Search.tsx
│ │ ├── Seo.tsx
│ │ ├── SocialBanner.tsx
│ │ └── Tag.tsx
│ ├── content/
│ │ ├── blog/
│ │ │ ├── 2020/
│ │ │ │ └── 12/
│ │ │ │ └── 21/
│ │ │ │ └── data-fetching-with-react-server-components.md
│ │ │ ├── 2021/
│ │ │ │ ├── 06/
│ │ │ │ │ └── 08/
│ │ │ │ │ └── the-plan-for-react-18.md
│ │ │ │ └── 12/
│ │ │ │ └── 17/
│ │ │ │ └── react-conf-2021-recap.md
│ │ │ ├── 2022/
│ │ │ │ ├── 03/
│ │ │ │ │ ├── 08/
│ │ │ │ │ │ └── react-18-upgrade-guide.md
│ │ │ │ │ └── 29/
│ │ │ │ │ └── react-v18.md
│ │ │ │ └── 06/
│ │ │ │ └── 15/
│ │ │ │ └── react-labs-what-we-have-been-working-on-june-2022.md
│ │ │ ├── 2023/
│ │ │ │ ├── 03/
│ │ │ │ │ ├── 16/
│ │ │ │ │ │ └── introducing-react-dev.md
│ │ │ │ │ └── 22/
│ │ │ │ │ └── react-labs-what-we-have-been-working-on-march-2023.md
│ │ │ │ └── 05/
│ │ │ │ └── 03/
│ │ │ │ └── react-canaries.md
│ │ │ ├── 2024/
│ │ │ │ ├── 02/
│ │ │ │ │ └── 15/
│ │ │ │ │ └── react-labs-what-we-have-been-working-on-february-2024.md
│ │ │ │ ├── 04/
│ │ │ │ │ └── 25/
│ │ │ │ │ └── react-19-upgrade-guide.md
│ │ │ │ ├── 05/
│ │ │ │ │ └── 22/
│ │ │ │ │ └── react-conf-2024-recap.md
│ │ │ │ ├── 10/
│ │ │ │ │ └── 21/
│ │ │ │ │ └── react-compiler-beta-release.md
│ │ │ │ └── 12/
│ │ │ │ └── 05/
│ │ │ │ └── react-19.md
│ │ │ ├── 2025/
│ │ │ │ ├── 02/
│ │ │ │ │ └── 14/
│ │ │ │ │ └── sunsetting-create-react-app.md
│ │ │ │ ├── 04/
│ │ │ │ │ └── 23/
│ │ │ │ │ └── react-labs-view-transitions-activity-and-more.md
│ │ │ │ ├── 10/
│ │ │ │ │ ├── 01/
│ │ │ │ │ │ └── react-19-2.md
│ │ │ │ │ ├── 07/
│ │ │ │ │ │ ├── introducing-the-react-foundation.md
│ │ │ │ │ │ └── react-compiler-1.md
│ │ │ │ │ └── 16/
│ │ │ │ │ └── react-conf-2025-recap.md
│ │ │ │ └── 12/
│ │ │ │ ├── 03/
│ │ │ │ │ └── critical-security-vulnerability-in-react-server-components.md
│ │ │ │ └── 11/
│ │ │ │ └── denial-of-service-and-source-code-exposure-in-react-server-components.md
│ │ │ └── index.md
│ │ ├── community/
│ │ │ ├── acknowledgements.md
│ │ │ ├── conferences.md
│ │ │ ├── docs-contributors.md
│ │ │ ├── index.md
│ │ │ ├── meetups.md
│ │ │ ├── team.md
│ │ │ ├── translations.md
│ │ │ ├── versioning-policy.md
│ │ │ └── videos.md
│ │ ├── errors/
│ │ │ ├── 377.md
│ │ │ ├── generic.md
│ │ │ └── index.md
│ │ ├── index.md
│ │ ├── learn/
│ │ │ ├── add-react-to-an-existing-project.md
│ │ │ ├── adding-interactivity.md
│ │ │ ├── build-a-react-app-from-scratch.md
│ │ │ ├── choosing-the-state-structure.md
│ │ │ ├── conditional-rendering.md
│ │ │ ├── creating-a-react-app.md
│ │ │ ├── describing-the-ui.md
│ │ │ ├── editor-setup.md
│ │ │ ├── escape-hatches.md
│ │ │ ├── extracting-state-logic-into-a-reducer.md
│ │ │ ├── importing-and-exporting-components.md
│ │ │ ├── index.md
│ │ │ ├── installation.md
│ │ │ ├── javascript-in-jsx-with-curly-braces.md
│ │ │ ├── keeping-components-pure.md
│ │ │ ├── lifecycle-of-reactive-effects.md
│ │ │ ├── managing-state.md
│ │ │ ├── manipulating-the-dom-with-refs.md
│ │ │ ├── passing-data-deeply-with-context.md
│ │ │ ├── passing-props-to-a-component.md
│ │ │ ├── preserving-and-resetting-state.md
│ │ │ ├── queueing-a-series-of-state-updates.md
│ │ │ ├── react-compiler/
│ │ │ │ ├── debugging.md
│ │ │ │ ├── incremental-adoption.md
│ │ │ │ ├── index.md
│ │ │ │ ├── installation.md
│ │ │ │ └── introduction.md
│ │ │ ├── react-developer-tools.md
│ │ │ ├── reacting-to-input-with-state.md
│ │ │ ├── referencing-values-with-refs.md
│ │ │ ├── removing-effect-dependencies.md
│ │ │ ├── render-and-commit.md
│ │ │ ├── rendering-lists.md
│ │ │ ├── responding-to-events.md
│ │ │ ├── reusing-logic-with-custom-hooks.md
│ │ │ ├── scaling-up-with-reducer-and-context.md
│ │ │ ├── separating-events-from-effects.md
│ │ │ ├── setup.md
│ │ │ ├── sharing-state-between-components.md
│ │ │ ├── state-a-components-memory.md
│ │ │ ├── state-as-a-snapshot.md
│ │ │ ├── synchronizing-with-effects.md
│ │ │ ├── thinking-in-react.md
│ │ │ ├── tutorial-tic-tac-toe.md
│ │ │ ├── typescript.md
│ │ │ ├── understanding-your-ui-as-a-tree.md
│ │ │ ├── updating-arrays-in-state.md
│ │ │ ├── updating-objects-in-state.md
│ │ │ ├── writing-markup-with-jsx.md
│ │ │ ├── you-might-not-need-an-effect.md
│ │ │ └── your-first-component.md
│ │ ├── reference/
│ │ │ ├── dev-tools/
│ │ │ │ └── react-performance-tracks.md
│ │ │ ├── eslint-plugin-react-hooks/
│ │ │ │ ├── index.md
│ │ │ │ └── lints/
│ │ │ │ ├── component-hook-factories.md
│ │ │ │ ├── config.md
│ │ │ │ ├── error-boundaries.md
│ │ │ │ ├── exhaustive-deps.md
│ │ │ │ ├── gating.md
│ │ │ │ ├── globals.md
│ │ │ │ ├── immutability.md
│ │ │ │ ├── incompatible-library.md
│ │ │ │ ├── preserve-manual-memoization.md
│ │ │ │ ├── purity.md
│ │ │ │ ├── refs.md
│ │ │ │ ├── rules-of-hooks.md
│ │ │ │ ├── set-state-in-effect.md
│ │ │ │ ├── set-state-in-render.md
│ │ │ │ ├── static-components.md
│ │ │ │ ├── unsupported-syntax.md
│ │ │ │ └── use-memo.md
│ │ │ ├── react/
│ │ │ │ ├── Activity.md
│ │ │ │ ├── Children.md
│ │ │ │ ├── Component.md
│ │ │ │ ├── Fragment.md
│ │ │ │ ├── Profiler.md
│ │ │ │ ├── PureComponent.md
│ │ │ │ ├── StrictMode.md
│ │ │ │ ├── Suspense.md
│ │ │ │ ├── ViewTransition.md
│ │ │ │ ├── act.md
│ │ │ │ ├── addTransitionType.md
│ │ │ │ ├── apis.md
│ │ │ │ ├── cache.md
│ │ │ │ ├── cacheSignal.md
│ │ │ │ ├── captureOwnerStack.md
│ │ │ │ ├── cloneElement.md
│ │ │ │ ├── components.md
│ │ │ │ ├── createContext.md
│ │ │ │ ├── createElement.md
│ │ │ │ ├── createRef.md
│ │ │ │ ├── experimental_taintObjectReference.md
│ │ │ │ ├── experimental_taintUniqueValue.md
│ │ │ │ ├── forwardRef.md
│ │ │ │ ├── hooks.md
│ │ │ │ ├── index.md
│ │ │ │ ├── isValidElement.md
│ │ │ │ ├── lazy.md
│ │ │ │ ├── legacy.md
│ │ │ │ ├── memo.md
│ │ │ │ ├── startTransition.md
│ │ │ │ ├── use.md
│ │ │ │ ├── useActionState.md
│ │ │ │ ├── useCallback.md
│ │ │ │ ├── useContext.md
│ │ │ │ ├── useDebugValue.md
│ │ │ │ ├── useDeferredValue.md
│ │ │ │ ├── useEffect.md
│ │ │ │ ├── useEffectEvent.md
│ │ │ │ ├── useId.md
│ │ │ │ ├── useImperativeHandle.md
│ │ │ │ ├── useInsertionEffect.md
│ │ │ │ ├── useLayoutEffect.md
│ │ │ │ ├── useMemo.md
│ │ │ │ ├── useOptimistic.md
│ │ │ │ ├── useReducer.md
│ │ │ │ ├── useRef.md
│ │ │ │ ├── useState.md
│ │ │ │ ├── useSyncExternalStore.md
│ │ │ │ └── useTransition.md
│ │ │ ├── react-compiler/
│ │ │ │ ├── compilationMode.md
│ │ │ │ ├── compiling-libraries.md
│ │ │ │ ├── configuration.md
│ │ │ │ ├── directives/
│ │ │ │ │ ├── use-memo.md
│ │ │ │ │ └── use-no-memo.md
│ │ │ │ ├── directives.md
│ │ │ │ ├── gating.md
│ │ │ │ ├── logger.md
│ │ │ │ ├── panicThreshold.md
│ │ │ │ └── target.md
│ │ │ ├── react-dom/
│ │ │ │ ├── client/
│ │ │ │ │ ├── createRoot.md
│ │ │ │ │ ├── hydrateRoot.md
│ │ │ │ │ └── index.md
│ │ │ │ ├── components/
│ │ │ │ │ ├── common.md
│ │ │ │ │ ├── form.md
│ │ │ │ │ ├── index.md
│ │ │ │ │ ├── input.md
│ │ │ │ │ ├── link.md
│ │ │ │ │ ├── meta.md
│ │ │ │ │ ├── option.md
│ │ │ │ │ ├── progress.md
│ │ │ │ │ ├── script.md
│ │ │ │ │ ├── select.md
│ │ │ │ │ ├── style.md
│ │ │ │ │ ├── textarea.md
│ │ │ │ │ └── title.md
│ │ │ │ ├── createPortal.md
│ │ │ │ ├── flushSync.md
│ │ │ │ ├── hooks/
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── useFormStatus.md
│ │ │ │ ├── index.md
│ │ │ │ ├── preconnect.md
│ │ │ │ ├── prefetchDNS.md
│ │ │ │ ├── preinit.md
│ │ │ │ ├── preinitModule.md
│ │ │ │ ├── preload.md
│ │ │ │ ├── preloadModule.md
│ │ │ │ ├── server/
│ │ │ │ │ ├── index.md
│ │ │ │ │ ├── renderToPipeableStream.md
│ │ │ │ │ ├── renderToReadableStream.md
│ │ │ │ │ ├── renderToStaticMarkup.md
│ │ │ │ │ ├── renderToString.md
│ │ │ │ │ ├── resume.md
│ │ │ │ │ └── resumeToPipeableStream.md
│ │ │ │ └── static/
│ │ │ │ ├── index.md
│ │ │ │ ├── prerender.md
│ │ │ │ ├── prerenderToNodeStream.md
│ │ │ │ ├── resumeAndPrerender.md
│ │ │ │ └── resumeAndPrerenderToNodeStream.md
│ │ │ ├── rsc/
│ │ │ │ ├── directives.md
│ │ │ │ ├── server-components.md
│ │ │ │ ├── server-functions.md
│ │ │ │ ├── use-client.md
│ │ │ │ └── use-server.md
│ │ │ └── rules/
│ │ │ ├── components-and-hooks-must-be-pure.md
│ │ │ ├── index.md
│ │ │ ├── react-calls-components-and-hooks.md
│ │ │ └── rules-of-hooks.md
│ │ ├── versions.md
│ │ └── warnings/
│ │ ├── invalid-aria-prop.md
│ │ ├── invalid-hook-call-warning.md
│ │ ├── react-dom-test-utils.md
│ │ ├── react-test-renderer.md
│ │ ├── special-props.md
│ │ └── unknown-prop.md
│ ├── css/
│ │ └── ja-fix.css
│ ├── hooks/
│ │ └── usePendingRoute.ts
│ ├── pages/
│ │ ├── 404.js
│ │ ├── 500.js
│ │ ├── [[...markdownPath]].js
│ │ ├── _app.tsx
│ │ ├── _document.tsx
│ │ ├── api/
│ │ │ └── md/
│ │ │ └── [...path].ts
│ │ ├── errors/
│ │ │ ├── [errorCode].tsx
│ │ │ └── index.tsx
│ │ └── llms.txt.tsx
│ ├── sidebarBlog.json
│ ├── sidebarCommunity.json
│ ├── sidebarHome.json
│ ├── sidebarLearn.json
│ ├── sidebarReference.json
│ ├── siteConfig.js
│ ├── styles/
│ │ ├── algolia.css
│ │ ├── index.css
│ │ └── sandpack.css
│ ├── types/
│ │ └── docsearch-react-modal.d.ts
│ └── utils/
│ ├── analytics.ts
│ ├── compileMDX.ts
│ ├── finishedTranslations.ts
│ ├── forwardRefWithAs.tsx
│ ├── prepareMDX.js
│ ├── processShim.js
│ ├── rafShim.js
│ ├── rss.js
│ └── toCommaSeparatedList.tsx
├── tailwind.config.js
├── textlint/
│ ├── .gitignore
│ ├── .textlintrc.json
│ ├── jp-reactjs-org-lint.js
│ ├── package.json
│ └── prh.yml
├── tsconfig.json
└── vercel.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .claude/agents/docs-reviewer.md
================================================
---
name: docs-reviewer
description: "Lean docs reviewer that dispatches reviews docs for a particular skill."
model: opus
color: cyan
---
You are a direct, critical, expert reviewer for React documentation.
Your role is to use given skills to validate given doc pages for consistency, correctness, and adherence to established patterns.
Complete this process:
## Phase 1: Task Creation
1. CRITICAL: Read the skill requested.
2. Understand the skill's requirements.
3. Create a task list to validate skills requirements.
## Phase 2: Validate
1. Read the docs files given.
2. Review each file with the task list to verify.
## Phase 3: Respond
You must respond with a checklist of the issues you identified, and line number.
DO NOT respond with passed validations, ONLY respond with the problems.
================================================
FILE: .claude/settings.json
================================================
{
"skills": {
"suggest": [
{
"pattern": "src/content/learn/**/*.md",
"skill": "docs-writer-learn"
},
{
"pattern": "src/content/reference/**/*.md",
"skill": "docs-writer-reference"
}
]
},
"permissions": {
"allow": [
"Skill(docs-voice)",
"Skill(docs-components)",
"Skill(docs-sandpack)",
"Skill(docs-writer-learn)",
"Skill(docs-writer-reference)",
"Bash(yarn lint:*)",
"Bash(yarn lint-heading-ids:*)",
"Bash(yarn lint:fix:*)",
"Bash(yarn tsc:*)",
"Bash(yarn check-all:*)",
"Bash(yarn fix-headings:*)",
"Bash(yarn deadlinks:*)",
"Bash(yarn prettier:diff:*)"
]
}
}
================================================
FILE: .claude/skills/docs-components/SKILL.md
================================================
---
name: docs-components
description: Comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, etc.) for all documentation types. Authoritative source for component usage, examples, and heading conventions.
---
# MDX Component Patterns
## Quick Reference
### Component Decision Tree
| Need | Component |
|------|-----------|
| Helpful tip or terminology | `<Note>` |
| Common mistake warning | `<Pitfall>` |
| Advanced technical explanation | `<DeepDive>` |
| Canary-only feature | `<Canary>` or `<CanaryBadge />` |
| Server Components only | `<RSC>` |
| Deprecated API | `<Deprecated>` |
| Experimental/WIP | `<Wip>` |
| Visual diagram | `<Diagram>` |
| Multiple related examples | `<Recipes>` |
| Interactive code | `<Sandpack>` (see `/docs-sandpack`) |
| Console error display | `<ConsoleBlock>` |
| End-of-page exercises | `<Challenges>` (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:**
- `<Pitfall>` followed by `<Pitfall>` - Combine into one with titled subsections, or separate with prose
- `<Note>` followed by `<Note>` - Combine into one, or separate with prose
**Allowed consecutive patterns:**
- `<DeepDive>` followed by `<DeepDive>` - OK for multi-part explorations (see useMemo.md)
- `<Pitfall>` followed by `<DeepDive>` - 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:**
```mdx
<Pitfall>
Don't do X.
</Pitfall>
<Pitfall>
Don't do Y.
</Pitfall>
```
**Correct - combined:**
```mdx
<Pitfall>
##### Don't do X {/*pitfall-x*/}
Explanation.
##### Don't do Y {/*pitfall-y*/}
Explanation.
</Pitfall>
```
**Correct - separated:**
```mdx
<Pitfall>
Don't do X.
</Pitfall>
This leads to another common mistake:
<Pitfall>
Don't do Y.
</Pitfall>
```
---
## `<Note>`
Important clarifications, conventions, or tips. Less severe than Pitfall.
### Simple Note
```mdx
<Note>
The optimization of caching return values is known as [_memoization_](https://en.wikipedia.org/wiki/Memoization).
</Note>
```
### Note with Title
Use `####` (h4) heading with an ID.
```mdx
<Note>
#### 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.
</Note>
```
### Version-Specific Note
```mdx
<Note>
Starting in React 19, you can render `<SomeContext>` as a provider.
In older versions of React, use `<SomeContext.Provider>`.
</Note>
```
---
## `<Pitfall>`
Common mistakes that cause bugs. Use for errors readers will likely make.
### Simple Pitfall
```mdx
<Pitfall>
We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
</Pitfall>
```
### Titled Pitfall
Use `#####` (h5) heading with an ID.
```mdx
<Pitfall>
##### 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>
```
### Pitfall with Wrong/Right Code
```mdx
<Pitfall>
##### `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 <form action={submit}></form>;
}
```
Instead call `useFormStatus` from inside a component located inside `<form>`.
</Pitfall>
```
---
## `<DeepDive>`
Optional deep technical content. **First child must be `####` heading with ID.**
### Standard DeepDive
```mdx
<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.
</DeepDive>
```
### Comparison DeepDive
For comparing related concepts:
```mdx
<DeepDive>
#### 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.
</DeepDive>
```
---
## `<Recipes>`
Multiple related examples showing variations. Each recipe needs `<Solution />`.
```mdx
<Recipes titleText="Basic useState examples" titleId="examples-basic">
#### Counter (number) {/*counter-number*/}
In this example, the `count` state variable holds a number.
<Sandpack>
{/* code */}
</Sandpack>
<Solution />
#### Text field (string) {/*text-field-string*/}
In this example, the `text` state variable holds a string.
<Sandpack>
{/* code */}
</Sandpack>
<Solution />
</Recipes>
```
**Common titleText/titleId combinations:**
- "Basic [hookName] examples" / `examples-basic`
- "Examples of [concept]" / `examples-[concept]`
- "The difference between [A] and [B]" / `examples-[topic]`
---
## `<Challenges>`
End-of-page exercises. **Learn pages only.** Each challenge needs problem + solution Sandpack.
```mdx
<Challenges>
#### Fix the bug {/*fix-the-bug*/}
Problem description...
<Hint>
Optional hint text.
</Hint>
<Sandpack>
{/* problem code */}
</Sandpack>
<Solution>
Explanation...
<Sandpack>
{/* solution code */}
</Sandpack>
</Solution>
</Challenges>
```
**Guidelines:**
- Only at end of standard Learn pages
- No Challenges in chapter intros or tutorials
- Each challenge has `####` heading with ID
---
## `<Deprecated>`
For deprecated APIs. Content should explain what to use instead.
### Page-Level Deprecation
```mdx
<Deprecated>
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).
</Deprecated>
```
### Method-Level Deprecation
```mdx
### `componentWillMount()` {/*componentwillmount*/}
<Deprecated>
This API has been renamed from `componentWillMount` to [`UNSAFE_componentWillMount`.](#unsafe_componentwillmount)
Run the [`rename-unsafe-lifecycles` codemod](codemod-link) to automatically update.
</Deprecated>
```
---
## `<RSC>`
For APIs that only work with React Server Components.
### Basic RSC
```mdx
<RSC>
`cache` is only for use with [React Server Components](/reference/rsc/server-components).
</RSC>
```
### Extended RSC (for Server Functions)
```mdx
<RSC>
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".
</RSC>
```
---
## `<Canary>` and `<CanaryBadge />`
For features only available in Canary releases.
### Canary Wrapper (inline in Intro)
```mdx
<Intro>
`<Fragment>` lets you group elements without a wrapper node.
<Canary>Fragments can also accept refs, enabling interaction with underlying DOM nodes.</Canary>
</Intro>
```
### CanaryBadge in Section Headings
```mdx
### <CanaryBadge /> FragmentInstance {/*fragmentinstance*/}
```
### CanaryBadge in Props Lists
```mdx
* <CanaryBadge /> **optional** `ref`: A ref object from `useRef` or callback function.
```
### CanaryBadge in Caveats
```mdx
* <CanaryBadge /> If you want to pass `ref` to a Fragment, you can't use the `<>...</>` syntax.
```
---
## `<Diagram>`
Visual explanations of module dependencies, render trees, or data flow.
```mdx
<Diagram name="use_client_module_dependency" height={250} width={545} alt="A tree graph with the top node representing the module 'App.js'. 'App.js' has three children...">
`'use client'` segments the module dependency tree, marking `InspirationGenerator.js` and all dependencies as client-rendered.
</Diagram>
```
**Attributes:**
- `name`: Diagram identifier (used for image file)
- `height`: Height in pixels
- `width`: Width in pixels
- `alt`: Accessible description of the diagram
---
## `<CodeStep>` (Use Sparingly)
Numbered callouts in prose. Pairs with code block annotations.
### Syntax
In code blocks:
```mdx
```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 <CodeStep step={1}>current state</CodeStep> initially set to the <CodeStep step={3}>initial value</CodeStep>.
2. The <CodeStep step={2}>`set` function</CodeStep> 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:
```mdx
React will compare the <CodeStep step={2}>dependencies</CodeStep> with the dependencies you passed...
```
🚫 **Avoid** - excessive highlighting:
```mdx
When an <CodeStep step={1}>Activity</CodeStep> boundary is <CodeStep step={2}>hidden</CodeStep> during its <CodeStep step={3}>initial</CodeStep> render...
```
---
## `<ConsoleBlock>`
Display console output (errors, warnings, logs).
```mdx
<ConsoleBlock level="error">
Uncaught Error: Too many re-renders.
</ConsoleBlock>
```
**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:
- `<RSC>` goes before `<Intro>` at top of page
- `<Deprecated>` goes after `<Intro>` for page-level deprecation
- `<Deprecated>` goes after method heading for method-level deprecation
- `<Canary>` wrapper goes inline within `<Intro>`
- `<CanaryBadge />` 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:** `<Experimental>`, `<ExperimentalBadge />`, `<RSCBadge />`, `<NextMajor>`, `<Wip>`
**Visuals:** `<DiagramGroup>`, `<Illustration>`, `<IllustrationBlock>`, `<CodeDiagram>`, `<FullWidth>`
**Console:** `<ConsoleBlockMulti>`, `<ConsoleLogLine>`
**Specialized:** `<TerminalBlock>`, `<BlogCard>`, `<TeamMember>`, `<YouTubeIframe>`, `<ErrorDecoder />`, `<LearnMore>`, `<Math>`, `<MathI>`, `<LanguageList>`
See existing docs for usage examples of these components.
================================================
FILE: .claude/skills/docs-sandpack/SKILL.md
================================================
---
name: docs-sandpack
description: Use when adding interactive code examples to React docs.
---
# Sandpack Patterns
## Quick Start Template
Most examples are single-file. Copy this and modify:
```mdx
<Sandpack>
` ` `js
import { useState } from 'react';
export default function Example() {
const [value, setValue] = useState(0);
return (
<button onClick={() => setValue(value + 1)}>
Clicked {value} times
</button>
);
}
` ` `
</Sandpack>
```
---
## File Naming
| Pattern | Usage |
|---------|-------|
| ` ```js ` | Main file (no prefix) |
| ` ```js src/FileName.js ` | Supporting files |
| ` ```js src/File.js active ` | Active file (reference pages) |
| ` ```js src/data.js hidden ` | Hidden files |
| ` ```css ` | CSS styles |
| ` ```json package.json ` | External dependencies |
**Critical:** Main file must have `export default`.
## Line Highlighting
```mdx
```js {2-4}
function Example() {
// Lines 2-4
// will be
// highlighted
return null;
}
```
## Code References (numbered callouts)
```mdx
```js [[1, 4, "age"], [2, 4, "setAge"]]
// Creates numbered markers pointing to "age" and "setAge" on line 4
```
## Expected Errors (intentionally broken examples)
```mdx
```js {expectedErrors: {'react-compiler': [7]}}
// Line 7 shows as expected error
```
## Multi-File Example
```mdx
<Sandpack>
```js src/App.js
import Gallery from './Gallery.js';
export default function App() {
return <Gallery />;
}
```
```js src/Gallery.js
export default function Gallery() {
return <h1>Gallery</h1>;
}
```
```css
h1 { color: purple; }
```
</Sandpack>
```
## External Dependencies
```mdx
<Sandpack>
```js
import { useImmer } from 'use-immer';
// ...
```
```json package.json
{
"dependencies": {
"immer": "1.7.3",
"use-immer": "0.5.1",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest"
}
}
```
</Sandpack>
```
## Code Style in Sandpack (Required)
Sandpack examples are held to strict code style standards:
1. **Function declarations** for components (not arrows)
2. **`e`** for event parameters
3. **Single quotes** in JSX
4. **`const`** unless reassignment needed
5. **Spaces in destructuring**: `({ props })` not `({props})`
6. **Two-line createRoot**: separate declaration and render call
7. **Multiline if statements**: always use braces
### Don't Create Hydration Mismatches
Sandpack examples must produce the same output on server and client:
```js
// 🚫 This will cause hydration warnings
export default function App() {
const isClient = typeof window !== 'undefined';
return <div>{isClient ? 'Client' : 'Server'}</div>;
}
```
### Use Ref for Non-Rendered State
```js
// 🚫 Don't trigger re-renders for non-visual state
const [mounted, setMounted] = useState(false);
useEffect(() => { setMounted(true); }, []);
// ✅ Use ref instead
const mounted = useRef(false);
useEffect(() => { mounted.current = true; }, []);
```
## forwardRef and memo Patterns
### forwardRef - Use Named Function
```js
// ✅ Named function for DevTools display name
const MyInput = forwardRef(function MyInput(props, ref) {
return <input {...props} ref={ref} />;
});
// 🚫 Anonymous loses name
const MyInput = forwardRef((props, ref) => { ... });
```
### memo - Use Named Function
```js
// ✅ Preserves component name
const Greeting = memo(function Greeting({ name }) {
return <h1>Hello, {name}</h1>;
});
```
## Line Length
- Prose: ~80 characters
- Code: ~60-70 characters
- Break long lines to avoid horizontal scrolling
## Anti-Patterns
| Pattern | Problem | Fix |
|---------|---------|-----|
| `const Comp = () => {}` | Not standard | `function Comp() {}` |
| `onClick={(event) => ...}` | Conflicts with global | `onClick={(e) => ...}` |
| `useState` for non-rendered values | Re-renders | Use `useRef` |
| Reading `window` during render | Hydration mismatch | Check in useEffect |
| Single-line if without braces | Harder to debug | Use multiline with braces |
| Chained `createRoot().render()` | Less clear | Two statements |
| `//...` without space | Inconsistent | `// ...` with space |
| Tabs | Inconsistent | 2 spaces |
| `ReactDOM.render` | Deprecated | Use `createRoot` |
| Fake package names | Confusing | Use `'./your-storage-layer'` |
| `PropsWithChildren` | Outdated | `children?: ReactNode` |
| Missing `key` in lists | Warnings | Always include key |
## Additional Code Quality Rules
### Always Include Keys in Lists
```js
// ✅ Correct
{items.map(item => <li key={item.id}>{item.name}</li>)}
// 🚫 Wrong - missing key
{items.map(item => <li>{item.name}</li>)}
```
### Use Realistic Import Paths
```js
// ✅ Correct - descriptive path
import { fetchData } from './your-data-layer';
// 🚫 Wrong - looks like a real npm package
import { fetchData } from 'cool-data-lib';
```
### Console.log Labels
```js
// ✅ Correct - labeled for clarity
console.log('User:', user);
console.log('Component Stack:', errorInfo.componentStack);
// 🚫 Wrong - unlabeled
console.log(user);
```
### Keep Delays Reasonable
```js
// ✅ Correct - 1-1.5 seconds
setTimeout(() => setLoading(false), 1000);
// 🚫 Wrong - too long, feels sluggish
setTimeout(() => setLoading(false), 3000);
```
## Updating Line Highlights
When modifying code in examples with line highlights (`{2-4}`), **always update the highlight line numbers** to match the new code. Incorrect line numbers cause rendering crashes.
## File Name Conventions
- Capitalize file names for component files: `Gallery.js` not `gallery.js`
- After initially explaining files are in `src/`, refer to files by name only: `Gallery.js` not `src/Gallery.js`
## Naming Conventions in Code
**Components:** PascalCase
- `Profile`, `Avatar`, `TodoList`, `PackingList`
**State variables:** Destructured pattern
- `const [count, setCount] = useState(0)`
- Booleans: `[isOnline, setIsOnline]`, `[isPacked, setIsPacked]`
- Status strings: `'typing'`, `'submitting'`, `'success'`, `'error'`
**Event handlers:**
- `handleClick`, `handleSubmit`, `handleAddTask`
**Props for callbacks:**
- `onClick`, `onChange`, `onAddTask`, `onSelect`
**Custom Hooks:**
- `useOnlineStatus`, `useChatRoom`, `useFormInput`
**Reducer actions:**
- Past tense: `'added'`, `'changed'`, `'deleted'`
- Snake_case compounds: `'changed_selection'`, `'sent_message'`
**Updater functions:** Single letter
- `setCount(n => n + 1)`
### Pedagogical Code Markers
**Wrong vs right code:**
```js
// 🔴 Avoid: redundant state and unnecessary Effect
// ✅ Good: calculated during rendering
```
**Console.log for lifecycle teaching:**
```js
console.log('✅ Connecting...');
console.log('❌ Disconnected.');
```
### Server/Client Labeling
```js
// Server Component
async function Notes() {
const notes = await db.notes.getAll();
}
// Client Component
"use client"
export default function Expandable({children}) {
const [expanded, setExpanded] = useState(false);
}
```
### Bundle Size Annotations
```js
import marked from 'marked'; // 35.9K (11.2K gzipped)
import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)
```
---
## Sandpack Example Guidelines
### Package.json Rules
**Include package.json when:**
- Using external npm packages (immer, remarkable, leaflet, toastify-js, etc.)
- Demonstrating experimental/canary React features
- Requiring specific React versions (`react: beta`, `react: 19.0.0-rc-*`)
**Omit package.json when:**
- Example uses only built-in React features
- No external dependencies needed
- Teaching basic hooks, state, or components
**Always mark package.json as hidden:**
```mdx
```json package.json hidden
{
"dependencies": {
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"immer": "1.7.3"
}
}
```
```
**Version conventions:**
- Use `"latest"` for stable features
- Use exact versions only when compatibility requires it
- Include minimal dependencies (just what the example needs)
### Hidden File Patterns
**Always hide these file types:**
| File Type | Reason |
|-----------|--------|
| `package.json` | Configuration not the teaching point |
| `sandbox.config.json` | Sandbox setup is boilerplate |
| `public/index.html` | HTML structure not the focus |
| `src/data.js` | When it contains sample/mock data |
| `src/api.js` | When showing API usage, not implementation |
| `src/styles.css` | When styling is not the lesson |
| `src/router.js` | Supporting infrastructure |
| `src/actions.js` | Server action implementation details |
**Rationale:**
- Reduces cognitive load
- Keeps focus on the primary concept
- Creates cleaner, more focused examples
**Example:**
```mdx
```js src/data.js hidden
export const items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
];
```
```
### Active File Patterns
**Mark as active when:**
- File contains the primary teaching concept
- Learner should focus on this code first
- Component demonstrates the hook/pattern being taught
**Effect of the `active` marker:**
- Sets initial editor tab focus when Sandpack loads
- Signals "this is what you should study"
- Works with hidden files to create focused examples
**Most common active file:** `src/index.js` or `src/App.js`
**Example:**
```mdx
```js src/App.js active
// This file will be focused when example loads
export default function App() {
// ...
}
```
```
### File Structure Guidelines
| Scenario | Structure | Reason |
|----------|-----------|--------|
| Basic hook usage | Single file | Simple, focused |
| Teaching imports | 2-3 files | Shows modularity |
| Context patterns | 4-5 files | Realistic structure |
| Complex state | 3+ files | Separation of concerns |
**Single File Examples (70% of cases):**
- Use for simple concepts
- 50-200 lines typical
- Best for: Counter, text inputs, basic hooks
**Multi-File Examples (30% of cases):**
- Use when teaching modularity/imports
- Use for context patterns (4-5 files)
- Use when component is reused
**File Naming:**
- Main component: `App.js` (capitalized)
- Component files: `Gallery.js`, `Button.js` (capitalized)
- Data files: `data.js` (lowercase)
- Utility files: `utils.js` (lowercase)
- Context files: `TasksContext.js` (named after what they provide)
### Code Size Limits
- Single file: **<200 lines**
- Multi-file total: **150-300 lines**
- Main component: **100-150 lines**
- Supporting files: **20-40 lines each**
### CSS Guidelines
**Always:**
- Include minimal CSS for demo interactivity
- Use semantic class names (`.panel`, `.button-primary`, `.panel-dark`)
- Support light/dark themes when showing UI concepts
- Keep CSS visible (never hidden)
**Size Guidelines:**
- Minimal (5-10 lines): Basic button styling, spacing
- Medium (15-30 lines): Panel styling, form layouts
- Complex (40+ lines): Only for layout-focused examples
================================================
FILE: .claude/skills/docs-voice/SKILL.md
================================================
---
name: docs-voice
description: Use when writing any React documentation. Provides voice, tone, and style rules for all doc types.
---
# React Docs Voice & Style
## Universal Rules
- **Capitalize React terms** when referring to the React concept in headings or as standalone concepts:
- Core: Hook, Effect, State, Context, Ref, Component, Fragment
- Concurrent: Transition, Action, Suspense
- Server: Server Component, Client Component, Server Function, Server Action
- Patterns: Error Boundary
- Canary: Activity, View Transition, Transition Type
- **In prose:** Use lowercase when paired with descriptors: "state variable", "state updates", "event handler". Capitalize when the concept stands alone or in headings: "State is isolated and private"
- General usage stays lowercase: "the page transitions", "takes an action"
- **Product names:** ESLint, TypeScript, JavaScript, Next.js (not lowercase)
- **Bold** for key concepts: **state variable**, **event handler**
- **Italics** for new terms being defined: *event handlers*
- **Inline code** for APIs: `useState`, `startTransition`, `<Suspense>`
- **Avoid:** "simple", "easy", "just", time estimates
- Frame differences as "capabilities" not "advantages/disadvantages"
- Avoid passive voice and jargon
## Tone by Page Type
| Type | Tone | Example |
|------|------|---------|
| Learn | Conversational | "Here's what that looks like...", "You might be wondering..." |
| Reference | Technical | "Call `useState` at the top level...", "This Hook returns..." |
| Blog | Accurate | Focus on facts, not marketing |
**Note:** Pitfall and DeepDive components can use slightly more conversational phrasing ("You might wonder...", "It might be tempting...") even in Reference pages, since they're explanatory asides.
## Avoiding Jargon
**Pattern:** Explain behavior first, then name it.
✅ "React waits until all code in event handlers runs before processing state updates. This is called *batching*."
❌ "React uses batching to process state updates atomically."
**Terms to avoid or explain:**
| Jargon | Plain Language |
|--------|----------------|
| atomic | all-or-nothing, batched together |
| idempotent | same inputs, same output |
| deterministic | predictable, same result every time |
| memoize | remember the result, skip recalculating |
| referentially transparent | (avoid - describe the behavior) |
| invariant | rule that must always be true |
| reify | (avoid - describe what's being created) |
**Allowed technical terms in Reference pages:**
- "stale closures" - standard JS/React term, can be used in Caveats
- "stable identity" - React term for consistent object references across renders
- "reactive" - React term for values that trigger re-renders when changed
- These don't need explanation in Reference pages (readers are expected to know them)
**Use established analogies sparingly—once when introducing a concept, not repeatedly:**
| Concept | Analogy |
|---------|---------|
| Components/React | Kitchen (components as cooks, React as waiter) |
| Render phases | Restaurant ordering (trigger/render/commit) |
| State batching | Waiter collecting full order before going to kitchen |
| State behavior | Snapshot/photograph in time |
| State storage | React storing state "on a shelf" |
| State purpose | Component's memory |
| Pure functions | Recipes (same ingredients → same dish) |
| Pure functions | Math formulas (y = 2x) |
| Props | Adjustable "knobs" |
| Children prop | "Hole" to be filled by parent |
| Keys | File names in a folder |
| Curly braces in JSX | "Window into JavaScript" |
| Declarative UI | Taxi driver (destination, not turn-by-turn) |
| Imperative UI | Turn-by-turn navigation |
| State structure | Database normalization |
| Refs | "Secret pocket" React doesn't track |
| Effects/Refs | "Escape hatch" from React |
| Context | CSS inheritance / "Teleportation" |
| Custom Hooks | Design system |
## Common Prose Patterns
**Wrong vs Right code:**
```mdx
\`\`\`js
// 🚩 Don't mutate state:
obj.x = 10;
\`\`\`
\`\`\`js
// ✅ Replace with new object:
setObj({ ...obj, x: 10 });
\`\`\`
```
**Table comparisons:**
```mdx
| passing a function | calling a function |
| `onClick={handleClick}` | `onClick={handleClick()}` |
```
**Linking:**
```mdx
[Read about state](/learn/state-a-components-memory)
[See `useState` reference](/reference/react/useState)
```
## Code Style
- Prefer JSX over createElement
- Use const/let, never var
- Prefer named function declarations for top-level functions
- Arrow functions for callbacks that need `this` preservation
## Version Documentation
When APIs change between versions:
```mdx
Starting in React 19, render `<Context>` as a provider:
\`\`\`js
<SomeContext value={value}>{children}</SomeContext>
\`\`\`
In older versions:
\`\`\`js
<SomeContext.Provider value={value}>{children}</SomeContext.Provider>
\`\`\`
```
Patterns:
- "Starting in React 19..." for new APIs
- "In older versions of React..." for legacy patterns
================================================
FILE: .claude/skills/docs-writer-blog/SKILL.md
================================================
---
name: docs-writer-blog
description: Use when writing or editing files in src/content/blog/. Provides blog post structure and conventions.
---
# Blog Post Writer
## Persona
**Voice:** Official React team voice
**Tone:** Accurate, professional, forward-looking
## Voice & Style
For tone, capitalization, jargon, and prose patterns, invoke `/docs-voice`.
---
## Frontmatter Schema
All blog posts use this YAML frontmatter structure:
```yaml
---
title: "Title in Quotes"
author: Author Name(s)
date: YYYY/MM/DD
description: One or two sentence summary.
---
```
### Field Details
| Field | Format | Example |
|-------|--------|---------|
| `title` | Quoted string | `"React v19"`, `"React Conf 2024 Recap"` |
| `author` | Unquoted, comma + "and" for multiple | `The React Team`, `Dan Abramov and Lauren Tan` |
| `date` | `YYYY/MM/DD` with forward slashes | `2024/12/05` |
| `description` | 1-2 sentences, often mirrors intro | Summarizes announcement or content |
### Title Patterns by Post Type
| Type | Pattern | Example |
|------|---------|---------|
| Release | `"React vX.Y"` or `"React X.Y"` | `"React v19"` |
| Upgrade | `"React [VERSION] Upgrade Guide"` | `"How to Upgrade to React 18"` |
| Labs | `"React Labs: [Topic] – [Month Year]"` | `"React Labs: What We've Been Working On – February 2024"` |
| Conf | `"React Conf [YEAR] Recap"` | `"React Conf 2024 Recap"` |
| Feature | `"Introducing [Feature]"` or descriptive | `"Introducing react.dev"` |
| Security | `"[Severity] Security Vulnerability in [Component]"` | `"Critical Security Vulnerability in React Server Components"` |
---
## Author Byline
Immediately after frontmatter, add a byline:
```markdown
---
Month DD, YYYY by [Author Name](social-link)
---
```
### Conventions
- Full date spelled out: `December 05, 2024`
- Team posts link to `/community/team`: `[The React Team](/community/team)`
- Individual authors link to Twitter/X or Bluesky
- Multiple authors: Oxford comma before "and"
- Followed by horizontal rule `---`
**Examples:**
```markdown
December 05, 2024 by [The React Team](/community/team)
---
```
```markdown
May 3, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), and [Andrew Clark](https://twitter.com/acdlite)
---
```
---
## Universal Post Structure
All blog posts follow this structure:
1. **Frontmatter** (YAML)
2. **Author byline** with date
3. **Horizontal rule** (`---`)
4. **`<Intro>` component** (1-3 sentences)
5. **Horizontal rule** (`---`) (optional)
6. **Main content sections** (H2 with IDs)
7. **Closing section** (Changelog, Thanks, etc.)
---
## Post Type Templates
### Major Release Announcement
```markdown
---
title: "React vX.Y"
author: The React Team
date: YYYY/MM/DD
description: React X.Y is now available on npm! In this post, we'll give an overview of the new features.
---
Month DD, YYYY by [The React Team](/community/team)
---
<Intro>
React vX.Y is now available on npm!
</Intro>
In our [Upgrade Guide](/blog/YYYY/MM/DD/react-xy-upgrade-guide), we shared step-by-step instructions for upgrading. In this post, we'll give an overview of what's new.
- [What's new in React X.Y](#whats-new)
- [Improvements](#improvements)
- [How to upgrade](#how-to-upgrade)
---
## What's new in React X.Y {/*whats-new*/}
### Feature Name {/*feature-name*/}
[Problem this solves. Before/after code examples.]
For more information, see the docs for [`Feature`](/reference/react/Feature).
---
## Improvements in React X.Y {/*improvements*/}
### Improvement Name {/*improvement-name*/}
[Description of improvement.]
---
## How to upgrade {/*how-to-upgrade*/}
See [How to Upgrade to React X.Y](/blog/YYYY/MM/DD/react-xy-upgrade-guide) for step-by-step instructions.
---
## Changelog {/*changelog*/}
### React {/*react*/}
* Add `useNewHook` for [purpose]. ([#12345](https://github.com/facebook/react/pull/12345) by [@contributor](https://github.com/contributor))
---
_Thanks to [Name](url) for reviewing this post._
```
### Upgrade Guide
```markdown
---
title: "React [VERSION] Upgrade Guide"
author: Author Name
date: YYYY/MM/DD
description: Step-by-step instructions for upgrading to React [VERSION].
---
Month DD, YYYY by [Author Name](social-url)
---
<Intro>
[Summary of upgrade and what this guide covers.]
</Intro>
<Note>
#### Stepping stone version {/*stepping-stone*/}
[If applicable, describe intermediate upgrade steps.]
</Note>
In this post, we will guide you through the steps for upgrading:
- [Installing](#installing)
- [Codemods](#codemods)
- [Breaking changes](#breaking-changes)
- [New deprecations](#new-deprecations)
---
## Installing {/*installing*/}
```bash
npm install --save-exact react@^X.Y.Z react-dom@^X.Y.Z
```
## Codemods {/*codemods*/}
<Note>
#### Run all React [VERSION] codemods {/*run-all-codemods*/}
```bash
npx codemod@latest react/[VERSION]/migration-recipe
```
</Note>
## Breaking changes {/*breaking-changes*/}
### Removed: `apiName` {/*removed-api-name*/}
`apiName` was deprecated in [Month YYYY (vX.X.X)](link).
```js
// Before
[old code]
// After
[new code]
```
<Note>
Codemod [description]:
```bash
npx codemod@latest react/[VERSION]/codemod-name
```
</Note>
## New deprecations {/*new-deprecations*/}
### Deprecated: `apiName` {/*deprecated-api-name*/}
[Explanation and migration path.]
---
Thanks to [Contributor](link) for reviewing this post.
```
### React Labs Research Update
```markdown
---
title: "React Labs: What We've Been Working On – [Month Year]"
author: Author1, Author2, and Author3
date: YYYY/MM/DD
description: In React Labs posts, we write about projects in active research and development.
---
Month DD, YYYY by [Author1](url), [Author2](url), and [Author3](url)
---
<Intro>
In React Labs posts, we write about projects in active research and development. We've made significant progress since our [last update](/blog/previous-labs-post), and we'd like to share our progress.
</Intro>
[Optional: Roadmap disclaimer about timelines]
---
## Feature Name {/*feature-name*/}
<Note>
`<FeatureName />` is now available in React's Canary channel.
</Note>
[Description of feature, motivation, current status.]
### Subsection {/*subsection*/}
[Details, examples, use cases.]
---
## Research Area {/*research-area*/}
[Problem space description. Status communication.]
This research is still early. We'll share more when we're further along.
---
_Thanks to [Reviewer](url) for reviewing this post._
Thanks for reading, and see you in the next update!
```
### React Conf Recap
```markdown
---
title: "React Conf [YEAR] Recap"
author: Author1 and Author2
date: YYYY/MM/DD
description: Last week we hosted React Conf [YEAR]. In this post, we'll summarize the talks and announcements.
---
Month DD, YYYY by [Author1](url) and [Author2](url)
---
<Intro>
Last week we hosted React Conf [YEAR] [where we announced [key announcements]].
</Intro>
---
The entire [day 1](youtube-url) and [day 2](youtube-url) streams are available online.
## Day 1 {/*day-1*/}
_[Watch the full day 1 stream here.](youtube-url)_
[Description of day 1 opening and keynote highlights.]
Watch the full day 1 keynote here:
<YouTubeIframe src="https://www.youtube.com/embed/VIDEO_ID" />
## Day 2 {/*day-2*/}
_[Watch the full day 2 stream here.](youtube-url)_
[Day 2 summary.]
<YouTubeIframe src="https://www.youtube.com/embed/VIDEO_ID" />
## Q&A {/*q-and-a*/}
* [Q&A Title](youtube-url) hosted by [Host](url)
## And more... {/*and-more*/}
We also heard talks including:
* [Talk Title](youtube-url) by [Speaker](url)
## Thank you {/*thank-you*/}
Thank you to all the staff, speakers, and participants who made React Conf [YEAR] possible.
See you next time!
```
### Feature/Tool Announcement
```markdown
---
title: "Introducing [Feature Name]"
author: Author Name
date: YYYY/MM/DD
description: Today we are announcing [feature]. In this post, we'll explain [what this post covers].
---
Month DD, YYYY by [Author Name](url)
---
<Intro>
Today we are [excited/thrilled] to announce [feature]. [What this means for users.]
</Intro>
---
## tl;dr {/*tldr*/}
* Key announcement point with [relevant link](/path).
* What users can do now.
* Availability or adoption information.
## What is [Feature]? {/*what-is-feature*/}
[Explanation of the feature/tool.]
## Why we built this {/*why-we-built-this*/}
[Motivation, history, problem being solved.]
## Getting started {/*getting-started*/}
To install [feature]:
<TerminalBlock>
npm install package-name
</TerminalBlock>
[You can find more documentation here.](/path/to/docs)
## What's next {/*whats-next*/}
[Future plans and next steps.]
## Thank you {/*thank-you*/}
[Acknowledgments to contributors.]
---
Thanks to [Reviewer](url) for reviewing this post.
```
### Security Announcement
```markdown
---
title: "[Severity] Security Vulnerability in [Component]"
author: The React Team
date: YYYY/MM/DD
description: Brief summary of the vulnerability. A fix has been published. We recommend upgrading immediately.
---
Month DD, YYYY by [The React Team](/community/team)
---
<Intro>
[One or two sentences summarizing the vulnerability.]
We recommend upgrading immediately.
</Intro>
---
On [date], [researcher] reported a security vulnerability that allows [description].
This vulnerability was disclosed as [CVE-YYYY-NNNNN](https://www.cve.org/CVERecord?id=CVE-YYYY-NNNNN) and is rated CVSS [score].
The vulnerability is present in versions [list] of:
* [package-name](https://www.npmjs.com/package/package-name)
## Immediate Action Required {/*immediate-action-required*/}
A fix was introduced in versions [linked versions]. Upgrade immediately.
### Affected frameworks {/*affected-frameworks*/}
[List of affected frameworks with npm links.]
### Vulnerability overview {/*vulnerability-overview*/}
[Technical explanation of the vulnerability.]
## Update Instructions {/*update-instructions*/}
### Framework Name {/*update-framework-name*/}
```bash
npm install package@version
```
## Timeline {/*timeline*/}
* **November 29th**: [Researcher] reported the vulnerability.
* **December 1st**: Fix was created and validated.
* **December 3rd**: Fix published and CVE disclosed.
## Attribution {/*attribution*/}
Thank you to [Researcher Name](url) for discovering and reporting this vulnerability.
```
---
## Heading Conventions
### ID Syntax
All headings require IDs using CSS comment syntax:
```markdown
## Heading Text {/*heading-id*/}
```
### ID Rules
- Lowercase
- Kebab-case (hyphens for spaces)
- Remove special characters (apostrophes, colons, backticks)
- Concise but descriptive
### Heading Patterns
| Context | Example |
|---------|---------|
| Feature section | `## New Feature: Automatic Batching {/*new-feature-automatic-batching*/}` |
| New hook | `### New hook: \`useActionState\` {/*new-hook-useactionstate*/}` |
| API in backticks | `### \`<Activity />\` {/*activity*/}` |
| Removed API | `#### Removed: \`propTypes\` {/*removed-proptypes*/}` |
| tl;dr section | `## tl;dr {/*tldr*/}` |
---
## Component Usage Guide
### Blog-Appropriate Components
| Component | Usage in Blog |
|-----------|---------------|
| `<Intro>` | **Required** - Opening summary after byline |
| `<Note>` | Callouts, caveats, important clarifications |
| `<Pitfall>` | Warnings about common mistakes |
| `<DeepDive>` | Optional technical deep dives (use sparingly) |
| `<TerminalBlock>` | CLI/installation commands |
| `<ConsoleBlock>` | Console error/warning output |
| `<ConsoleBlockMulti>` | Multi-line console output |
| `<YouTubeIframe>` | Conference video embeds |
| `<Diagram>` | Visual explanations |
| `<InlineToc />` | Auto-generated table of contents |
### `<Intro>` Pattern
Always wrap opening paragraph:
```markdown
<Intro>
React 19 is now available on npm!
</Intro>
```
### `<Note>` Patterns
**Simple note:**
```markdown
<Note>
For React Native users, React 18 ships with the New Architecture.
</Note>
```
**Titled note (H4 inside):**
```markdown
<Note>
#### React 18.3 has also been published {/*react-18-3*/}
To help with the upgrade, we've published `react@18.3`...
</Note>
```
### `<TerminalBlock>` Pattern
```markdown
<TerminalBlock>
npm install react@latest react-dom@latest
</TerminalBlock>
```
### `<YouTubeIframe>` Pattern
```markdown
<YouTubeIframe src="https://www.youtube.com/embed/VIDEO_ID" />
```
---
## Link Patterns
### Internal Links
| Type | Pattern | Example |
|------|---------|---------|
| Blog post | `/blog/YYYY/MM/DD/slug` | `/blog/2024/12/05/react-19` |
| API reference | `/reference/react/HookName` | `/reference/react/useState` |
| Learn section | `/learn/topic-name` | `/learn/react-compiler` |
| Community | `/community/team` | `/community/team` |
### External Links
| Type | Pattern |
|------|---------|
| GitHub PR | `[#12345](https://github.com/facebook/react/pull/12345)` |
| GitHub user | `[@username](https://github.com/username)` |
| Twitter/X | `[@username](https://x.com/username)` |
| Bluesky | `[Name](https://bsky.app/profile/handle)` |
| CVE | `[CVE-YYYY-NNNNN](https://www.cve.org/CVERecord?id=CVE-YYYY-NNNNN)` |
| npm package | `[package](https://www.npmjs.com/package/package)` |
### "See docs" Pattern
```markdown
For more information, see the docs for [`useActionState`](/reference/react/useActionState).
```
---
## Changelog Format
### Bullet Pattern
```markdown
* Add `useTransition` for concurrent rendering. ([#10426](https://github.com/facebook/react/pull/10426) by [@acdlite](https://github.com/acdlite))
* Fix `useReducer` observing incorrect props. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona))
```
**Structure:** `Verb` + backticked API + description + `([#PR](url) by [@user](url))`
**Verbs:** Add, Fix, Remove, Make, Improve, Allow, Deprecate
### Section Organization
```markdown
## Changelog {/*changelog*/}
### React {/*react*/}
* [changes]
### React DOM {/*react-dom*/}
* [changes]
```
---
## Acknowledgments Format
### Post-closing Thanks
```markdown
---
Thanks to [Name](url), [Name](url), and [Name](url) for reviewing this post.
```
Or italicized:
```markdown
_Thanks to [Name](url) for reviewing this post._
```
### Update Notes
For post-publication updates:
```markdown
<Note>
[Updated content]
-----
_Updated January 26, 2026._
</Note>
```
---
## Tone & Length by Post Type
| Type | Tone | Length | Key Elements |
|------|------|--------|--------------|
| Release | Celebratory, informative | Medium-long | Feature overview, upgrade link, changelog |
| Upgrade | Instructional, precise | Long | Step-by-step, codemods, breaking changes |
| Labs | Transparent, exploratory | Medium | Status updates, roadmap disclaimers |
| Conf | Enthusiastic, community-focused | Medium | YouTube embeds, speaker credits |
| Feature | Excited, explanatory | Medium | tl;dr, "why", getting started |
| Security | Urgent, factual | Short-medium | Immediate action, timeline, CVE |
---
## Do's and Don'ts
**Do:**
- Focus on facts over marketing
- Say "upcoming" explicitly for unreleased features
- Include FAQ sections for major announcements
- Credit contributors and link to GitHub
- Use "we" voice for team posts
- Link to upgrade guides from release posts
- Include table of contents for long posts
- End with acknowledgments
**Don't:**
- Promise features not yet available
- Rewrite history (add update notes instead)
- Break existing URLs
- Use hyperbolic language ("revolutionary", "game-changing")
- Skip the `<Intro>` component
- Forget heading IDs
- Use heavy component nesting in blogs
- Make time estimates or predictions
---
## Updating Old Posts
- Never break existing URLs; add redirects when URLs change
- Don't rewrite history; add update notes instead:
```markdown
<Note>
[Updated information]
-----
_Updated Month Year._
</Note>
```
---
## Critical Rules
1. **Heading IDs required:** `## Title {/*title-id*/}`
2. **`<Intro>` required:** Every post starts with `<Intro>` component
3. **Byline required:** Date + linked author(s) after frontmatter
4. **Date format:** Frontmatter uses `YYYY/MM/DD`, byline uses `Month DD, YYYY`
5. **Link to docs:** New APIs must link to reference documentation
6. **Security posts:** Always include "We recommend upgrading immediately"
---
## Components Reference
For complete MDX component patterns, invoke `/docs-components`.
Blog posts commonly use: `<Intro>`, `<Note>`, `<Pitfall>`, `<TerminalBlock>`, `<ConsoleBlock>`, `<YouTubeIframe>`, `<DeepDive>`, `<Diagram>`.
Prefer inline explanations over heavy component usage.
================================================
FILE: .claude/skills/docs-writer-learn/SKILL.md
================================================
---
name: docs-writer-learn
description: Use when writing or editing files in src/content/learn/. Provides Learn page structure and tone.
---
# Learn Page Writer
## Persona
**Voice:** Patient teacher guiding a friend through concepts
**Tone:** Conversational, warm, encouraging
## Voice & Style
For tone, capitalization, jargon, and prose patterns, invoke `/docs-voice`.
## Page Structure Variants
### 1. Standard Learn Page (Most Common)
```mdx
---
title: Page Title
---
<Intro>
1-3 sentences introducing the concept. Use *italics* for new terms.
</Intro>
<YouWillLearn>
* Learning outcome 1
* Learning outcome 2
* Learning outcome 3-5
</YouWillLearn>
## Section Name {/*section-id*/}
Content with Sandpack examples, Pitfalls, Notes, DeepDives...
## Another Section {/*another-section*/}
More content...
<Recap>
* Summary point 1
* Summary point 2
* Summary points 3-9
</Recap>
<Challenges>
#### Challenge title {/*challenge-id*/}
Description...
<Hint>
Optional guidance (single paragraph)
</Hint>
<Sandpack>
{/* Starting code */}
</Sandpack>
<Solution>
Explanation...
<Sandpack>
{/* Fixed code */}
</Sandpack>
</Solution>
</Challenges>
```
### 2. Chapter Introduction Page
For pages that introduce a chapter (like describing-the-ui.md, managing-state.md):
```mdx
<YouWillLearn isChapter={true}>
* [Sub-page title](/learn/sub-page-name) to learn...
* [Another page](/learn/another-page) to learn...
</YouWillLearn>
## Preview Section {/*section-id*/}
Preview description with mini Sandpack example
<LearnMore path="/learn/sub-page-name">
Read **[Page Title](/learn/sub-page-name)** to learn how to...
</LearnMore>
## What's next? {/*whats-next*/}
Head over to [First Page](/learn/first-page) to start reading this chapter page by page!
```
**Important:** Chapter intro pages do NOT include `<Recap>` or `<Challenges>` sections.
### 3. Tutorial Page
For step-by-step tutorials (like tutorial-tic-tac-toe.md):
```mdx
<Intro>
Brief statement of what will be built
</Intro>
<Note>
Alternative learning path offered
</Note>
Table of contents (prose listing of major sections)
## Setup {/*setup*/}
...
## Main Content {/*main-content*/}
Progressive code building with ### subsections
No YouWillLearn, Recap, or Challenges
Ends with ordered list of "extra credit" improvements
```
### 4. Reference-Style Learn Page
For pages with heavy API documentation (like typescript.md):
```mdx
<YouWillLearn>
* [Link to section](#section-anchor)
* [Link to another section](#another-section)
</YouWillLearn>
## Sections with ### subsections
## Further learning {/*further-learning*/}
No Recap or Challenges
```
## Heading ID Conventions
All headings require IDs in `{/*kebab-case*/}` format:
```markdown
## Section Title {/*section-title*/}
### Subsection Title {/*subsection-title*/}
#### DeepDive Title {/*deepdive-title*/}
```
**ID Generation Rules:**
- Lowercase everything
- Replace spaces with hyphens
- Remove apostrophes, quotes
- Remove or convert special chars (`:`, `?`, `!`, `.`, parentheses)
**Examples:**
- "What's React?" → `{/*whats-react*/}`
- "Step 1: Create the context" → `{/*step-1-create-the-context*/}`
- "Conditional (ternary) operator (? :)" → `{/*conditional-ternary-operator--*/}`
## Teaching Patterns
### Problem-First Teaching
Show broken/problematic code BEFORE the solution:
1. Present problematic approach with `// 🔴 Avoid:` comment
2. Explain WHY it's wrong (don't just say it is)
3. Show the solution with `// ✅ Good:` comment
4. Invite experimentation
### Progressive Complexity
Build understanding in layers:
1. Show simplest working version
2. Identify limitation or repetition
3. Introduce solution incrementally
4. Show complete solution
5. Invite experimentation: "Try changing..."
### Numbered Step Patterns
For multi-step processes:
**As section headings:**
```markdown
### Step 1: Action to take {/*step-1-action*/}
### Step 2: Next action {/*step-2-next-action*/}
```
**As inline lists:**
```markdown
To implement this:
1. **Declare** `inputRef` with the `useRef` Hook.
2. **Pass it** as `<input ref={inputRef}>`.
3. **Read** the input DOM node from `inputRef.current`.
```
### Interactive Invitations
After Sandpack examples, encourage experimentation:
- "Try changing X to Y. See how...?"
- "Try it in the sandbox above!"
- "Click each button separately:"
- "Have a guess!"
- "Verify that..."
### Decision Questions
Help readers build intuition:
> "When you're not sure whether some code should be in an Effect or in an event handler, ask yourself *why* this code needs to run."
## Component Placement Order
1. `<Intro>` - First after frontmatter
2. `<YouWillLearn>` - After Intro (standard/chapter pages)
3. Body content with `<Note>`, `<Pitfall>`, `<DeepDive>` placed contextually
4. `<Recap>` - Before Challenges (standard pages only)
5. `<Challenges>` - End of page (standard pages only)
For component structure and syntax, invoke `/docs-components`.
## Code Examples
For Sandpack file structure, naming conventions, code style, and pedagogical markers, invoke `/docs-sandpack`.
## Cross-Referencing
### When to Link
**Link to /learn:**
- Explaining concepts or mental models
- Teaching how things work together
- Tutorials and guides
- "Why" questions
**Link to /reference:**
- API details, Hook signatures
- Parameter lists and return values
- Rules and restrictions
- "What exactly" questions
### Link Formats
```markdown
[concept name](/learn/page-name)
[`useState`](/reference/react/useState)
[section link](/learn/page-name#section-id)
[MDN](https://developer.mozilla.org/...)
```
## Section Dividers
**Important:** Learn pages typically do NOT use `---` dividers. The heading hierarchy provides sufficient structure. Only consider dividers in exceptional cases like separating main content from meta/contribution sections.
## Do's and Don'ts
**Do:**
- Use "you" to address the reader
- Show broken code before fixes
- Explain behavior before naming concepts
- Build concepts progressively
- Include interactive Sandpack examples
- Use established analogies consistently
- Place Pitfalls AFTER explaining concepts
- Invite experimentation with "Try..." phrases
**Don't:**
- Use "simple", "easy", "just", or time estimates
- Reference concepts not yet introduced
- Skip required components for page type
- Use passive voice without reason
- Place Pitfalls before teaching the concept
- Use `---` dividers between sections
- Create unnecessary abstraction in examples
- Place consecutive Pitfalls or Notes without separating prose (combine or separate)
## Critical Rules
1. **All headings require IDs:** `## Title {/*title-id*/}`
2. **Chapter intros use `isChapter={true}` and `<LearnMore>`**
3. **Tutorial pages omit YouWillLearn/Recap/Challenges**
4. **Problem-first teaching:** Show broken → explain → fix
5. **No consecutive Pitfalls/Notes:** See `/docs-components` Callout Spacing Rules
For component patterns, invoke `/docs-components`. For Sandpack patterns, invoke `/docs-sandpack`.
================================================
FILE: .claude/skills/docs-writer-reference/SKILL.md
================================================
---
name: docs-writer-reference
description: Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack.
---
# Reference Page Writer
## Quick Reference
### Page Type Decision Tree
1. Is it a Hook? Use **Type A (Hook/Function)**
2. Is it a React component (`<Something>`)? Use **Type B (Component)**
3. Is it a compiler configuration option? Use **Type C (Configuration)**
4. Is it a directive (`'use something'`)? Use **Type D (Directive)**
5. Is it an ESLint rule? Use **Type E (ESLint Rule)**
6. Is it listing multiple APIs? Use **Type F (Index/Category)**
### Component Selection
For component selection and patterns, invoke `/docs-components`.
---
## Voice & Style
**Voice:** Authoritative technical reference writer
**Tone:** Precise, comprehensive, neutral
For tone, capitalization, jargon, and prose patterns, invoke `/docs-voice`.
**Do:**
- Start with single-line description: "`useState` is a React Hook that lets you..."
- Include Parameters, Returns, Caveats sections for every API
- Document edge cases most developers will encounter
- Use section dividers between major sections
- Include "See more examples below" links
- Be assertive, not hedging - "This is designed for..." not "This helps avoid issues with..."
- State facts, not benefits - "The callback always accesses the latest values" not "This helps avoid stale closures"
- Use minimal but meaningful names - `onEvent` or `onTick` over `onSomething`
**Don't:**
- Skip the InlineToc component
- Omit error cases or caveats
- Use conversational language
- Mix teaching with reference (that's Learn's job)
- Document past bugs or fixed issues
- Include niche edge cases (e.g., `this` binding, rare class patterns)
- Add phrases explaining "why you'd want this" - the Usage section examples do that
- Exception: Pitfall and DeepDive asides can use slightly conversational phrasing
---
## Page Templates
### Type A: Hook/Function
**When to use:** Documenting React hooks and standalone functions (useState, useEffect, memo, lazy, etc.)
```mdx
---
title: hookName
---
<Intro>
`hookName` is a React Hook that lets you [brief description].
```js
const result = hookName(arg)
```
</Intro>
<InlineToc />
---
## Reference {/*reference*/}
### `hookName(arg)` {/*hookname*/}
Call `hookName` at the top level of your component to...
```js
[signature example with annotations]
```
[See more examples below.](#usage)
#### Parameters {/*parameters*/}
* `arg`: Description of the parameter.
#### Returns {/*returns*/}
Description of return value.
#### Caveats {/*caveats*/}
* Important caveat about usage.
---
## Usage {/*usage*/}
### Common Use Case {/*common-use-case*/}
Explanation with Sandpack examples...
---
## Troubleshooting {/*troubleshooting*/}
### Common Problem {/*common-problem*/}
How to solve it...
```
---
### Type B: Component
**When to use:** Documenting React components (Suspense, Fragment, Activity, StrictMode)
```mdx
---
title: <ComponentName>
---
<Intro>
`<ComponentName>` lets you [primary action].
```js
<ComponentName prop={value}>
<Children />
</ComponentName>
```
</Intro>
<InlineToc />
---
## Reference {/*reference*/}
### `<ComponentName>` {/*componentname*/}
[Component purpose and behavior]
#### Props {/*props*/}
* `propName`: Description of the prop...
* **optional** `optionalProp`: Description...
#### Caveats {/*caveats*/}
* [Caveats specific to this component]
```
**Key differences from Hook pages:**
- Title uses JSX syntax: `<ComponentName>`
- Uses `#### Props` instead of `#### Parameters`
- Reference heading uses JSX: `` ### `<ComponentName>` ``
---
### Type C: Configuration
**When to use:** Documenting React Compiler configuration options
```mdx
---
title: optionName
---
<Intro>
The `optionName` option [controls/specifies/determines] [what it does].
</Intro>
```js
{
optionName: 'value' // Quick example
}
```
<InlineToc />
---
## Reference {/*reference*/}
### `optionName` {/*optionname*/}
[Description of the option's purpose]
#### Type {/*type*/}
```
'value1' | 'value2' | 'value3'
```
#### Default value {/*default-value*/}
`'value1'`
#### Options {/*options*/}
- **`'value1'`** (default): Description
- **`'value2'`**: Description
- **`'value3'`**: Description
#### Caveats {/*caveats*/}
* [Usage caveats]
```
---
### Type D: Directive
**When to use:** Documenting directives like 'use server', 'use client', 'use memo'
```mdx
---
title: "'use directive'"
titleForTitleTag: "'use directive' directive"
---
<RSC>
`'use directive'` is for use with [React Server Components](/reference/rsc/server-components).
</RSC>
<Intro>
`'use directive'` marks [what it marks] for [purpose].
```js {1}
function MyComponent() {
'use directive';
// ...
}
```
</Intro>
<InlineToc />
---
## Reference {/*reference*/}
### `'use directive'` {/*use-directive*/}
Add `'use directive'` at the beginning of [location] to [action].
#### Caveats {/*caveats*/}
* `'use directive'` must be at the very beginning...
* The directive must be written with single or double quotes, not backticks.
* [Other placement/syntax caveats]
```
**Key characteristics:**
- Title includes quotes: `title: "'use server'"`
- Uses `titleForTitleTag` for browser tab title
- `<RSC>` block appears before `<Intro>`
- Caveats focus on placement and syntax requirements
---
### Type E: ESLint Rule
**When to use:** Documenting ESLint plugin rules
```mdx
---
title: rule-name
---
<Intro>
Validates that [what the rule checks].
</Intro>
## Rule Details {/*rule-details*/}
[Explanation of why this rule exists and React's underlying assumptions]
## Common Violations {/*common-violations*/}
[Description of violation patterns]
### Invalid {/*invalid*/}
Examples of incorrect code for this rule:
```js
// X Missing dependency
useEffect(() => {
console.log(count);
}, []); // Missing 'count'
```
### Valid {/*valid*/}
Examples of correct code for this rule:
```js
// checkmark All dependencies included
useEffect(() => {
console.log(count);
}, [count]);
```
## Troubleshooting {/*troubleshooting*/}
### [Problem description] {/*problem-slug*/}
[Solution]
## Options {/*options*/}
[Configuration options if applicable]
```
**Key characteristics:**
- Intro is a single "Validates that..." sentence
- Uses "Invalid"/"Valid" sections with emoji-prefixed code comments
- Rule Details explains "why" not just "what"
---
### Type F: Index/Category
**When to use:** Overview pages listing multiple APIs in a category
```mdx
---
title: "Built-in React [Type]"
---
<Intro>
*Concept* let you [purpose]. Brief scope statement.
</Intro>
---
## Category Name {/*category-name*/}
*Concept* explanation with [Learn section link](/learn/topic).
To [action], use one of these [Type]:
* [`apiName`](/reference/react/apiName) lets you [action].
* [`apiName`](/reference/react/apiName) declares [thing].
```js
function Example() {
const value = useHookName(args);
}
```
---
## Your own [Type] {/*your-own-type*/}
You can also [define your own](/learn/topic) as JavaScript functions.
```
**Key characteristics:**
- Title format: "Built-in React [Type]"
- Italicized concept definitions
- Horizontal rules between sections
- Closes with "Your own [Type]" section
---
## Advanced Patterns
### Multi-Function Documentation
**When to use:** When a hook returns a function that needs its own documentation (useState's setter, useReducer's dispatch)
```md
### `hookName(args)` {/*hookname*/}
[Main hook documentation]
#### Parameters {/*parameters*/}
#### Returns {/*returns*/}
#### Caveats {/*caveats*/}
---
### `set` functions, like `setSomething(nextState)` {/*setstate*/}
The `set` function returned by `hookName` lets you [action].
#### Parameters {/*setstate-parameters*/}
#### Returns {/*setstate-returns*/}
#### Caveats {/*setstate-caveats*/}
```
**Key conventions:**
- Horizontal rule (`---`) separates main hook from returned function
- Heading IDs include prefix: `{/*setstate-parameters*/}` vs `{/*parameters*/}`
- Use generic names: "set functions" not "setCount"
---
### Compound Return Objects
**When to use:** When a function returns an object with multiple properties/methods (createContext)
```md
### `createContext(defaultValue)` {/*createcontext*/}
[Main function documentation]
#### Returns {/*returns*/}
`createContext` returns a context object.
**The context object itself does not hold any information.** It represents...
* `SomeContext` lets you provide the context value.
* `SomeContext.Consumer` is an alternative way to read context.
---
### `SomeContext` Provider {/*provider*/}
[Documentation for Provider]
#### Props {/*provider-props*/}
---
### `SomeContext.Consumer` {/*consumer*/}
[Documentation for Consumer]
#### Props {/*consumer-props*/}
```
---
## Writing Patterns
### Opening Lines by Page Type
| Page Type | Pattern | Example |
|-----------|---------|---------|
| Hook | `` `hookName` is a React Hook that lets you [action]. `` | "`useState` is a React Hook that lets you add a state variable to your component." |
| Component | `` `<ComponentName>` lets you [action]. `` | "`<Suspense>` lets you display a fallback until its children have finished loading." |
| API | `` `apiName` lets you [action]. `` | "`memo` lets you skip re-rendering a component when its props are unchanged." |
| Configuration | `` The `optionName` option [controls/specifies/determines] [what]. `` | "The `target` option specifies which React version the compiler generates code for." |
| Directive | `` `'directive'` [marks/opts/prevents] [what] for [purpose]. `` | "`'use server'` marks a function as callable from the client." |
| ESLint Rule | `` Validates that [condition]. `` | "Validates that dependency arrays for React hooks contain all necessary dependencies." |
---
### Parameter Patterns
**Simple parameter:**
```md
* `paramName`: Description of what it does.
```
**Optional parameter:**
```md
* **optional** `paramName`: Description of what it does.
```
**Parameter with special function behavior:**
```md
* `initialState`: The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial render.
* If you pass a function as `initialState`, it will be treated as an _initializer function_. It should be pure, should take no arguments, and should return a value of any type.
```
**Callback parameter with sub-parameters:**
```md
* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`. The `subscribe` function should return a function that cleans up the subscription.
```
**Nested options object:**
```md
* **optional** `options`: An object with options for this React root.
* **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary.
* **optional** `onUncaughtError`: Callback called when an error is thrown and not caught.
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by `useId`.
```
---
### Return Value Patterns
**Single value return:**
```md
`hookName` returns the current value. The value will be the same as `initialValue` during the first render.
```
**Array return (numbered list):**
```md
`useState` returns an array with exactly two values:
1. The current state. During the first render, it will match the `initialState` you have passed.
2. The [`set` function](#setstate) that lets you update the state to a different value and trigger a re-render.
```
**Object return (bulleted list):**
```md
`createElement` returns a React element object with a few properties:
* `type`: The `type` you have passed.
* `props`: The `props` you have passed except for `ref` and `key`.
* `ref`: The `ref` you have passed. If missing, `null`.
* `key`: The `key` you have passed, coerced to a string. If missing, `null`.
```
**Promise return:**
```md
`prerender` returns a Promise:
- If rendering is successful, the Promise will resolve to an object containing:
- `prelude`: a [Web Stream](MDN-link) of HTML.
- `postponed`: a JSON-serializable object for resumption.
- If rendering fails, the Promise will be rejected.
```
**Wrapped function return:**
```md
`cache` returns a cached version of `fn` with the same type signature. It does not call `fn` in the process.
When calling `cachedFn` with given arguments, it first checks if a cached result exists. If cached, it returns the result. If not, it calls `fn`, stores the result, and returns it.
```
---
### Caveats Patterns
**Standard Hook caveat (almost always first for Hooks):**
```md
* `useXxx` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
```
**Stable identity caveat (for returned functions):**
```md
* The `set` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire.
```
**Strict Mode caveat:**
```md
* In Strict Mode, React will **call your render function twice** in order to help you find accidental impurities. This is development-only behavior and does not affect production.
```
**Caveat with code example:**
```md
* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. For example, the following is discouraged:
```js
const selectedProductId = useSyncExternalStore(...);
const data = use(fetchItem(selectedProductId)) // X Don't suspend based on store value
```
```
**Canary caveat:**
```md
* <CanaryBadge /> If you want to pass `ref` to a Fragment, you can't use the `<>...</>` syntax.
```
---
### Troubleshooting Patterns
**Heading format (first person problem statements):**
```md
### I've updated the state, but logging gives me the old value {/*old-value*/}
### My initializer or updater function runs twice {/*runs-twice*/}
### I want to read the latest state from a callback {/*read-latest-state*/}
```
**Error message format:**
```md
### I'm getting an error: "Too many re-renders" {/*too-many-rerenders*/}
### I'm getting an error: "Rendered more hooks than during the previous render" {/*more-hooks*/}
```
**Lint error format:**
```md
### I'm getting a lint error: "[exact error message]" {/*lint-error-slug*/}
```
**Problem-solution structure:**
1. State the problem with code showing the issue
2. Explain why it happens
3. Provide the solution with corrected code
4. Link to Learn section for deeper understanding
---
### Code Comment Conventions
For code comment conventions (wrong/right, legacy/recommended, server/client labeling, bundle size annotations), invoke `/docs-sandpack`.
---
### Link Description Patterns
| Pattern | Example |
|---------|---------|
| "lets you" + action | "`memo` lets you skip re-rendering when props are unchanged." |
| "declares" + thing | "`useState` declares a state variable that you can update directly." |
| "reads" + thing | "`useContext` reads and subscribes to a context." |
| "connects" + thing | "`useEffect` connects a component to an external system." |
| "Used with" | "Used with [`useContext`.](/reference/react/useContext)" |
| "Similar to" | "Similar to [`useTransition`.](/reference/react/useTransition)" |
---
## Component Patterns
For comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, Deprecated, RSC, Canary, Diagram, Code Steps), invoke `/docs-components`.
For Sandpack-specific patterns and code style, invoke `/docs-sandpack`.
### Reference-Specific Component Rules
**Component placement in Reference pages:**
- `<RSC>` goes before `<Intro>` at top of page
- `<Deprecated>` goes after `<Intro>` for page-level deprecation
- `<Deprecated>` goes after method heading for method-level deprecation
- `<Canary>` wrapper goes inline within `<Intro>`
- `<CanaryBadge />` appears in headings, props lists, and caveats
**Troubleshooting-specific components:**
- Use first-person problem headings
- Cross-reference Pitfall IDs when relevant
**Callout spacing:**
- Never place consecutive Pitfalls or consecutive Notes
- Combine related warnings into one with titled subsections, or separate with prose/code
- Consecutive DeepDives OK for multi-part explorations
- See `/docs-components` Callout Spacing Rules
---
## Content Principles
### Intro Section
- **One sentence, ~15 words max** - State what the Hook does, not how it works
- ✅ "`useEffectEvent` is a React Hook that lets you separate events from Effects."
- ❌ "`useEffectEvent` is a React Hook that lets you extract non-reactive logic from your Effects into a reusable function called an Effect Event."
### Reference Code Example
- Show just the API call (5-10 lines), not a full component
- Move full component examples to Usage section
### Usage Section Structure
1. **First example: Core mental model** - Show the canonical use case with simplest concrete example
2. **Subsequent examples: Canonical use cases** - Name the *why* (e.g., "Avoid reconnecting to external systems"), show a concrete *how*
- Prefer broad canonical use cases over multiple narrow concrete examples
- The section title IS the teaching - "When would I use this?" should be answered by the heading
### What to Include vs. Exclude
- **Never** document past bugs or fixed issues
- **Include** edge cases most developers will encounter
- **Exclude** niche edge cases (e.g., `this` binding, rare class patterns)
### Caveats Section
- Include rules the linter enforces or that cause immediate errors
- Include fundamental usage restrictions
- Exclude implementation details unless they affect usage
- Exclude repetition of things explained elsewhere
- Keep each caveat to one sentence when possible
### Troubleshooting Section
- Error headings only: "I'm getting an error: '[message]'" format
- Never document past bugs - if it's fixed, it doesn't belong here
- Focus on errors developers will actually encounter today
### DeepDive Content
- **Goldilocks principle** - Deep enough for curious developers, short enough to not overwhelm
- Answer "why is it designed this way?" - not exhaustive technical details
- Readers who skip it should miss nothing essential for using the API
- If the explanation is getting long, you're probably explaining too much
---
## Domain-Specific Guidance
### Hooks
**Returned function documentation:**
- Document setter/dispatch functions as separate `###` sections
- Use generic names: "set functions" not "setCount"
- Include stable identity caveat for returned functions
**Dependency array documentation:**
- List what counts as reactive values
- Explain when dependencies are ignored
- Link to removing effect dependencies guide
**Recipes usage:**
- Group related examples with meaningful titleText
- Each recipe has brief intro, Sandpack, and `<Solution />`
---
### Components
**Props documentation:**
- Use `#### Props` instead of `#### Parameters`
- Mark optional props with `**optional**` prefix
- Use `<CanaryBadge />` inline for canary-only props
**JSX syntax in titles/headings:**
- Frontmatter title: `title: <Suspense>`
- Reference heading: `` ### `<Suspense>` {/*suspense*/} ``
---
### React-DOM
**Common props linking:**
```md
`<input>` supports all [common element props.](/reference/react-dom/components/common#common-props)
```
**Props categorization:**
- Controlled vs uncontrolled props grouped separately
- Form-specific props documented with action patterns
- MDN links for standard HTML attributes
**Environment-specific notes:**
```mdx
<Note>
This API is specific to Node.js. Environments with [Web Streams](MDN-link), like Deno and modern edge runtimes, should use [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) instead.
</Note>
```
**Progressive enhancement:**
- Document benefits for users without JavaScript
- Explain Server Function + form action integration
- Show hidden form field and `.bind()` patterns
---
### RSC
**RSC banner (before Intro):**
Always place `<RSC>` component before `<Intro>` for Server Component-only APIs.
**Serialization type lists:**
When documenting Server Function arguments, list supported types:
```md
Supported types for Server Function arguments:
* Primitives
* [string](MDN-link)
* [number](MDN-link)
* Iterables containing serializable values
* [Array](MDN-link)
* [Map](MDN-link)
Notably, these are not supported:
* React elements, or [JSX](/learn/writing-markup-with-jsx)
* Functions (other than Server Functions)
```
**Bundle size comparisons:**
- Show "Not included in bundle" for server-only imports
- Annotate client bundle sizes with gzip: `// 35.9K (11.2K gzipped)`
---
### Compiler
**Configuration page structure:**
- Type (union type or interface)
- Default value
- Options/Valid values with descriptions
**Directive documentation:**
- Placement requirements are critical
- Mode interaction tables showing combinations
- "Use sparingly" + "Plan for removal" patterns for escape hatches
**Library author guides:**
- Audience-first intro
- Benefits/Why section
- Numbered step-by-step setup
---
### ESLint
**Rule Details section:**
- Explain "why" not just "what"
- Focus on React's underlying assumptions
- Describe consequences of violations
**Invalid/Valid sections:**
- Standard intro: "Examples of [in]correct code for this rule:"
- Use X emoji for invalid, checkmark for valid
- Show inline comments explaining the violation
**Configuration options:**
- Show shared settings (preferred)
- Show rule-level options (backward compatibility)
- Note precedence when both exist
---
## Edge Cases
For deprecated, canary, and version-specific component patterns (placement, syntax, examples), invoke `/docs-components`.
**Quick placement rules:**
- `<Deprecated>` after `<Intro>` for page-level, after heading for method-level
- `<Canary>` wrapper inline in Intro, `<CanaryBadge />` in headings/props/caveats
- Version notes use `<Note>` with "Starting in React 19..." pattern
**Removed APIs on index pages:**
```md
## Removed APIs {/*removed-apis*/}
These APIs were removed in React 19:
* [`render`](https://18.react.dev/reference/react-dom/render): use [`createRoot`](/reference/react-dom/client/createRoot) instead.
```
Link to previous version docs (18.react.dev) for removed API documentation.
---
## Critical Rules
1. **Heading IDs required:** `## Title {/*title-id*/}` (lowercase, hyphens)
2. **Sandpack main file needs `export default`**
3. **Active file syntax:** ` ```js src/File.js active `
4. **Error headings in Troubleshooting:** Use `### I'm getting an error: "[message]" {/*id*/}`
5. **Section dividers (`---`)** required between headings (see Section Dividers below)
6. **InlineToc required:** Always include `<InlineToc />` after Intro
7. **Consistent parameter format:** Use `* \`paramName\`: description` with `**optional**` prefix for optional params
8. **Numbered lists for array returns:** When hooks return arrays, use numbered lists in Returns section
9. **Generic names for returned functions:** Use "set functions" not "setCount"
10. **Props vs Parameters:** Use `#### Props` for Components (Type B), `#### Parameters` for Hooks/APIs (Type A)
11. **RSC placement:** `<RSC>` component goes before `<Intro>`, not after
12. **Canary markers:** Use `<Canary>` wrapper inline in Intro, `<CanaryBadge />` in headings/props
13. **Deprecated placement:** `<Deprecated>` goes after `<Intro>` for page-level, after heading for method-level
14. **Code comment emojis:** Use X for wrong, checkmark for correct in code examples
15. **No consecutive Pitfalls/Notes:** Combine into one component with titled subsections, or separate with prose/code (see `/docs-components`)
For component heading level conventions (DeepDive, Pitfall, Note, Recipe headings), see `/docs-components`.
### Section Dividers
Use `---` horizontal rules to visually separate major sections:
- **After `<InlineToc />`** - Before `## Reference` heading
- **Between API subsections** - Between different function/hook definitions (e.g., between `useState()` and `set functions`)
- **Before `## Usage`** - Separates API reference from examples
- **Before `## Troubleshooting`** - Separates content from troubleshooting
- **Between EVERY Usage subsections** - When switching to a new major use case
Always have a blank line before and after `---`.
### Section ID Conventions
| Section | ID Format |
|---------|-----------|
| Main function | `{/*functionname*/}` |
| Returned function | `{/*setstate*/}`, `{/*dispatch*/}` |
| Sub-section of returned function | `{/*setstate-parameters*/}` |
| Troubleshooting item | `{/*problem-description-slug*/}` |
| Pitfall | `{/*pitfall-description*/}` |
| Deep dive | `{/*deep-dive-topic*/}` |
================================================
FILE: .claude/skills/react-expert/SKILL.md
================================================
---
name: react-expert
description: Use when researching React APIs or concepts for documentation. Use when you need authoritative usage examples, caveats, warnings, or errors for a React feature.
---
# React Expert Research Skill
## Overview
This skill produces exhaustive documentation research on any React API or concept by searching authoritative sources (tests, source code, PRs, issues) rather than relying on LLM training knowledge.
<CRITICAL>
**Skepticism Mandate:** You must be skeptical of your own knowledge. Claude is often trained on outdated or incorrect React patterns. Treat source material as the sole authority. If findings contradict your prior understanding, explicitly flag this discrepancy.
**Red Flags - STOP if you catch yourself thinking:**
- "I know this API does X" → Find source evidence first
- "Common pattern is Y" → Verify in test files
- Generating example code → Must have source file reference
</CRITICAL>
## Invocation
```
/react-expert useTransition
/react-expert suspense boundaries
/react-expert startTransition
```
## Sources (Priority Order)
1. **React Repo Tests** - Most authoritative for actual behavior
2. **React Source Code** - Warnings, errors, implementation details
3. **Git History** - Commit messages with context
4. **GitHub PRs & Comments** - Design rationale (via `gh` CLI)
5. **GitHub Issues** - Confusion/questions (facebook/react + reactjs/react.dev)
6. **React Working Group** - Design discussions for newer APIs
7. **Flow Types** - Source of truth for type signatures
8. **TypeScript Types** - Note discrepancies with Flow
9. **Current react.dev docs** - Baseline (not trusted as complete)
**No web search** - No Stack Overflow, blog posts, or web searches. GitHub API via `gh` CLI is allowed.
## Workflow
### Step 1: Setup React Repo
First, ensure the React repo is available locally:
```bash
# Check if React repo exists, clone or update
if [ -d ".claude/react" ]; then
cd .claude/react && git pull origin main
else
git clone --depth=100 https://github.com/facebook/react.git .claude/react
fi
```
Get the current commit hash for the research document:
```bash
cd .claude/react && git rev-parse --short HEAD
```
### Step 2: Dispatch 6 Parallel Research Agents
Spawn these agents IN PARALLEL using the Task tool. Each agent receives the skepticism preamble:
> "You are researching React's `<TOPIC>`. CRITICAL: Do NOT rely on your prior knowledge about this API. Your training may contain outdated or incorrect patterns. Only report what you find in the source files. If your findings contradict common understanding, explicitly highlight this discrepancy."
| Agent | subagent_type | Focus | Instructions |
|-------|---------------|-------|--------------|
| test-explorer | Explore | Test files for usage patterns | Search `.claude/react/packages/*/src/__tests__/` for test files mentioning the topic. Extract actual usage examples WITH file paths and line numbers. |
| source-explorer | Explore | Warnings/errors in source | Search `.claude/react/packages/*/src/` for console.error, console.warn, and error messages mentioning the topic. Document trigger conditions. |
| git-historian | Explore | Commit messages | Run `git log --all --grep="<topic>" --oneline -50` in `.claude/react`. Read full commit messages for context. |
| pr-researcher | Explore | PRs introducing/modifying API | Run `gh pr list -R facebook/react --search "<topic>" --state all --limit 20`. Read key PR descriptions and comments. |
| issue-hunter | Explore | Issues showing confusion | Search issues in both `facebook/react` and `reactjs/react.dev` repos. Look for common questions and misunderstandings. |
| types-inspector | Explore | Flow + TypeScript signatures | Find Flow types in `.claude/react/packages/*/src/*.js` (look for `@flow` annotations). Find TS types in `.claude/react/packages/*/index.d.ts`. Note discrepancies. |
### Step 3: Agent Prompts
Use these exact prompts when spawning agents:
#### test-explorer
```
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge about this API. Your training may contain outdated or incorrect patterns. Only report what you find in the source files.
Your task: Find test files in .claude/react that demonstrate <TOPIC> usage.
1. Search for test files: Glob for `**/__tests__/**/*<topic>*` and `**/__tests__/**/*.js` then grep for <topic>
2. For each relevant test file, extract:
- The test description (describe/it blocks)
- The actual usage code
- Any assertions about behavior
- Edge cases being tested
3. Report findings with exact file paths and line numbers
Format your output as:
## Test File: <path>
### Test: "<test description>"
```javascript
<exact code from test>
```
**Behavior:** <what the test asserts>
```
#### source-explorer
```
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge about this API. Only report what you find in the source files.
Your task: Find warnings, errors, and implementation details for <TOPIC>.
1. Search .claude/react/packages/*/src/ for:
- console.error mentions of <topic>
- console.warn mentions of <topic>
- Error messages mentioning <topic>
- The main implementation file
2. For each warning/error, document:
- The exact message text
- The condition that triggers it
- The source file and line number
Format your output as:
## Warnings & Errors
| Message | Trigger Condition | Source |
|---------|------------------|--------|
| "<exact message>" | <condition> | <file:line> |
## Implementation Notes
<key details from source code>
```
#### git-historian
```
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in git history.
Your task: Find commit messages that explain <TOPIC> design decisions.
1. Run: cd .claude/react && git log --all --grep="<topic>" --oneline -50
2. For significant commits, read full message: git show <hash> --stat
3. Look for:
- Initial introduction of the API
- Bug fixes (reveal edge cases)
- Behavior changes
- Deprecation notices
Format your output as:
## Key Commits
### <short hash> - <subject>
**Date:** <date>
**Context:** <why this change was made>
**Impact:** <what behavior changed>
```
#### pr-researcher
```
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in PRs.
Your task: Find PRs that introduced or modified <TOPIC>.
1. Run: gh pr list -R facebook/react --search "<topic>" --state all --limit 20 --json number,title,url
2. For promising PRs, read details: gh pr view <number> -R facebook/react
3. Look for:
- The original RFC/motivation
- Design discussions in comments
- Alternative approaches considered
- Breaking changes
Format your output as:
## Key PRs
### PR #<number>: <title>
**URL:** <url>
**Summary:** <what it introduced/changed>
**Design Rationale:** <why this approach>
**Discussion Highlights:** <key points from comments>
```
#### issue-hunter
```
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in issues.
Your task: Find issues that reveal common confusion about <TOPIC>.
1. Search facebook/react: gh issue list -R facebook/react --search "<topic>" --state all --limit 20 --json number,title,url
2. Search reactjs/react.dev: gh issue list -R reactjs/react.dev --search "<topic>" --state all --limit 20 --json number,title,url
3. For each issue, identify:
- What the user was confused about
- What the resolution was
- Any gotchas revealed
Format your output as:
## Common Confusion
### Issue #<number>: <title>
**Repo:** <facebook/react or reactjs/react.dev>
**Confusion:** <what they misunderstood>
**Resolution:** <correct understanding>
**Gotcha:** <if applicable>
```
#### types-inspector
```
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in type definitions.
Your task: Find and compare Flow and TypeScript type signatures for <TOPIC>.
1. Flow types (source of truth): Search .claude/react/packages/*/src/*.js for @flow annotations related to <topic>
2. TypeScript types: Search .claude/react/packages/*/index.d.ts and @types/react
3. Compare and note any discrepancies
Format your output as:
## Flow Types (Source of Truth)
**File:** <path>
```flow
<exact type definition>
```
## TypeScript Types
**File:** <path>
```typescript
<exact type definition>
```
## Discrepancies
<any differences between Flow and TS definitions>
```
### Step 4: Synthesize Results
After all agents complete, combine their findings into a single research document.
**DO NOT add information from your own knowledge.** Only include what agents found in sources.
### Step 5: Save Output
Write the final document to `.claude/research/<topic>.md`
Replace spaces in topic with hyphens (e.g., "suspense boundaries" → "suspense-boundaries.md")
## Output Document Template
```markdown
# React Research: <topic>
> Generated by /react-expert on YYYY-MM-DD
> Sources: React repo (commit <hash>), N PRs, M issues
## Summary
[Brief summary based SOLELY on source findings, not prior knowledge]
## API Signature
### Flow Types (Source of Truth)
[From types-inspector agent]
### TypeScript Types
[From types-inspector agent]
### Discrepancies
[Any differences between Flow and TS]
## Usage Examples
### From Tests
[From test-explorer agent - with file:line references]
### From PRs/Issues
[Real-world patterns from discussions]
## Caveats & Gotchas
[Each with source link]
- **<gotcha>** - Source: <link>
## Warnings & Errors
| Message | Trigger Condition | Source File |
|---------|------------------|-------------|
[From source-explorer agent]
## Common Confusion
[From issue-hunter agent]
## Design Decisions
[From git-historian and pr-researcher agents]
## Source Links
### Commits
- <hash>: <description>
### Pull Requests
- PR #<number>: <title> - <url>
### Issues
- Issue #<number>: <title> - <url>
```
## Common Mistakes to Avoid
1. **Trusting prior knowledge** - If you "know" something about the API, find the source evidence anyway
2. **Generating example code** - Every code example must come from an actual source file
3. **Skipping agents** - All 6 agents must run; each provides unique perspective
4. **Summarizing without sources** - Every claim needs a file:line or PR/issue reference
5. **Using web search** - No Stack Overflow, no blog posts, no social media
## Verification Checklist
Before finalizing the research document:
- [ ] React repo is at `.claude/react` with known commit hash
- [ ] All 6 agents were spawned in parallel
- [ ] Every code example has a source file reference
- [ ] Warnings/errors table has source locations
- [ ] No claims made without source evidence
- [ ] Discrepancies between Flow/TS types documented
- [ ] Source links section is complete
================================================
FILE: .claude/skills/review-docs/SKILL.md
================================================
---
name: review-docs
description: Use when reviewing React documentation for structure, components, and style compliance
---
CRITICAL: do not load these skills yourself.
Run these tasks in parallel for the given file(s). Each agent checks different aspects—not all apply to every file:
- [ ] Ask docs-reviewer agent to review {files} with docs-writer-learn (only for files in src/content/learn/).
- [ ] Ask docs-reviewer agent to review {files} with docs-writer-reference (only for files in src/content/reference/).
- [ ] Ask docs-reviewer agent to review {files} with docs-writer-blog (only for files in src/content/blog/).
- [ ] Ask docs-reviewer agent to review {files} with docs-voice (all documentation files).
- [ ] Ask docs-reviewer agent to review {files} with docs-components (all documentation files).
- [ ] Ask docs-reviewer agent to review {files} with docs-sandpack (files containing Sandpack examples).
If no file is specified, check git status for modified MDX files in `src/content/`.
The docs-reviewer will return a checklist of the issues it found. Respond with the full checklist and line numbers from all agents, and prompt the user to create a plan to fix these issues.
================================================
FILE: .eslintignore
================================================
scripts
plugins
next.config.js
.claude/
================================================
FILE: .eslintrc
================================================
{
"root": true,
"extends": "next/core-web-vitals",
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "eslint-plugin-react-compiler", "local-rules"],
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}],
"react-hooks/exhaustive-deps": "error",
"react/no-unknown-property": ["error", {"ignore": ["meta"]}],
"react-compiler/react-compiler": "error",
"local-rules/lint-markdown-code-blocks": "error"
},
"env": {
"node": true,
"commonjs": true,
"browser": true,
"es6": true
},
"overrides": [
{
"files": ["src/content/**/*.md"],
"parser": "./eslint-local-rules/parser",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "off",
"react-hooks/exhaustive-deps": "off",
"react/no-unknown-property": "off",
"react-compiler/react-compiler": "off",
"local-rules/lint-markdown-code-blocks": "error"
}
}
]
}
================================================
FILE: .github/ISSUE_TEMPLATE/0-bug.yml
================================================
name: "🐛 Report a bug"
description: "Report a problem on the website."
title: "[Bug]: "
labels: ["bug: unconfirmed"]
body:
- type: textarea
attributes:
label: Summary
description: |
A clear and concise summary of what the bug is.
placeholder: |
Example bug report:
When I click the "Submit" button on "Feedback", nothing happens.
validations:
required: true
- type: input
attributes:
label: Page
description: |
What page(s) did you encounter this bug on?
placeholder: |
https://react.dev/
validations:
required: true
- type: textarea
attributes:
label: Details
description: |
Please provide any additional details about the bug.
placeholder: |
Example details:
The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists.
validations:
required: false
================================================
FILE: .github/ISSUE_TEMPLATE/1-typo.yml
================================================
name: "🤦 Typo or mistake"
description: "Report a typo or mistake in the docs."
title: "[Typo]: "
labels: ["type: typos"]
body:
- type: textarea
attributes:
label: Summary
description: |
A clear and concise summary of what the mistake is.
placeholder: |
Example:
The code example on the "useReducer" page includes an unused variable `nextId`.
validations:
required: true
- type: input
attributes:
label: Page
description: |
What page is the typo on?
placeholder: |
https://react.dev/
validations:
required: true
- type: textarea
attributes:
label: Details
description: |
Please provide a explanation for why this is a mistake.
placeholder: |
Example mistake:
In the "useReducer" section of the "API Reference" page, the code example under "Writing a reducer function" includes an unused variable `nextId` that should be removed.
validations:
required: false
================================================
FILE: .github/ISSUE_TEMPLATE/2-suggestion.yml
================================================
name: "💡 Suggestions"
description: "Suggest a new page, section, or edit for an existing page."
title: "[Suggestion]: "
labels: ["type: documentation"]
body:
- type: textarea
attributes:
label: Summary
description: |
A clear and concise summary of what we should add.
placeholder: |
Example:
Add a new page for how to use React with TypeScript.
validations:
required: true
- type: input
attributes:
label: Page
description: |
What page is this about?
placeholder: |
https://react.dev/
validations:
required: false
- type: textarea
attributes:
label: Details
description: |
Please provide a explanation for what you're suggesting.
placeholder: |
Example:
I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation.
validations:
required: true
================================================
FILE: .github/ISSUE_TEMPLATE/3-framework.yml
================================================
name: "📄 Suggest new framework"
description: "I am a framework author applying to be included as a recommended framework."
title: "[Framework]: "
labels: ["type: framework"]
body:
- type: markdown
attributes:
value: |
## Apply to be included as a recommended React framework
_This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/creating-a-react-app). If you are not a framework author, please contact the authors before submitting._
Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production.
While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).
To be included, frameworks must meet the following criteria:
- **Free & open-source**: must be open source and free to use.
- **Well maintained**. must be actively maintained, providing bug fixes and improvements.
- **Active community**: must have a sufficiently large and active community to support users.
- **Clear onboarding**: must have clear install steps to install the React version of the framework.
- **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem.
- **Self-hosting option**: must support an option to self-host applications without losing access to features.
- **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh.
- **User experience**. must provide built-in support for common problems like routing and data-fetching.
- **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time.
Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below.
- type: input
attributes:
label: Name
description: |
What is the name of your framework?
validations:
required: true
- type: input
attributes:
label: Homepage
description: |
What is the URL of your homepage?
validations:
required: true
- type: input
attributes:
label: Install instructions
description: |
What is the URL of your getting started guide?
validations:
required: true
- type: dropdown
attributes:
label: Is your framework open source?
description: |
We only recommend free and open source frameworks.
options:
- 'No'
- 'Yes'
validations:
required: true
- type: textarea
attributes:
label: Well maintained
description: |
Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples.
validations:
required: true
- type: textarea
attributes:
label: Active community
description: |
Please describe your community. Include the size of your community, and links to community resources.
validations:
required: true
- type: textarea
attributes:
label: Clear onboarding
description: |
Please describe how a user can install your framework with React. Include links to any relevant documentation.
validations:
required: true
- type: textarea
attributes:
label: Ecosystem compatibility
description: |
Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework.
validations:
required: true
- type: textarea
attributes:
label: Self-hosting option
description: |
Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework.
validations:
required: true
- type: textarea
attributes:
label: Developer Experience
description: |
Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh.
validations:
required: true
- type: textarea
attributes:
label: User Experience
description: |
Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR.
validations:
required: true
- type: textarea
attributes:
label: Compatible with our future vision for React
description: |
Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components.
validations:
required: true
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
contact_links:
- name: 📃 Bugs in React
url: https://github.com/facebook/react/issues/new/choose
about: This issue tracker is not for bugs in React. Please file React issues here.
- name: 🤔 Questions and Help
url: https://reactjs.org/community/support.html
about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--
日本語版 (ja.react.dev) リポジトリでのPR/Issueは、日本語版固有の問題
（翻訳や日本語版独自機能に関係するもの）のみ受け付けます。
全言語に関わる問題や改善（英語部分のスペルミス、コードサンプルの修正、ビルドシステム改善等）
については、英語版リポジトリ (https://github.com/reactjs/react.dev)
でPR/Issueを作成してください。
日本語版の作業フローについては以下を参照してください。
https://github.com/reactjs/ja.react.dev/wiki
-->
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "weekly"
# Disable Dependabot. Doing it here so it propagates to translation forks.
open-pull-requests-limit: 0
================================================
FILE: .github/workflows/analyze.yml
================================================
name: Analyze Bundle
on:
pull_request:
push:
branches:
- main # change this if your default branch is named differently
workflow_dispatch:
permissions: {}
jobs:
analyze:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up node
uses: actions/setup-node@v4
with:
node-version: '20.x'
cache: yarn
cache-dependency-path: yarn.lock
- name: Restore cached node_modules
uses: actions/cache@v4
with:
path: '**/node_modules'
key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- name: Install deps
run: yarn install --frozen-lockfile
- name: Restore next build
uses: actions/cache@v4
id: restore-build-cache
env:
cache-name: cache-next-build
with:
path: .next/cache
# change this if you prefer a more strict cache
key: ${{ runner.os }}-build-${{ env.cache-name }}
- name: Build next.js app
# change this if your site requires a custom build command
run: ./node_modules/.bin/next build
# Here's the first place where next-bundle-analysis' own script is used
# This step pulls the raw bundle stats for the current bundle
- name: Analyze bundle
run: npx -p nextjs-bundle-analysis@0.5.0 report
- name: Upload bundle
uses: actions/upload-artifact@v4
with:
path: .next/analyze/__bundle_analysis.json
name: bundle_analysis.json
- name: Download base branch bundle stats
uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
if: success() && github.event.number
with:
workflow: analyze.yml
branch: ${{ github.event.pull_request.base.ref }}
name: bundle_analysis.json
path: .next/analyze/base/bundle
# And here's the second place - this runs after we have both the current and
# base branch bundle stats, and will compare them to determine what changed.
# There are two configurable arguments that come from package.json:
#
# - budget: optional, set a budget (bytes) against which size changes are measured
# it's set to 350kb here by default, as informed by the following piece:
# https://infrequently.org/2021/03/the-performance-inequality-gap/
#
# - red-status-percentage: sets the percent size increase where you get a red
# status indicator, defaults to 20%
#
# Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
# entry in your package.json file.
- name: Compare with base branch bundle
if: success() && github.event.number
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
- name: Upload analysis comment
uses: actions/upload-artifact@v4
with:
name: analysis_comment.txt
path: .next/analyze/__bundle_analysis_comment.txt
- name: Save PR number
run: echo ${{ github.event.number }} > ./pr_number
- name: Upload PR number
uses: actions/upload-artifact@v4
with:
name: pr_number
path: ./pr_number
# The actual commenting happens in the other action, matching the guidance in
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
================================================
FILE: .github/workflows/analyze_comment.yml
================================================
name: Analyze Bundle (Comment)
on:
workflow_run:
workflows: ['Analyze Bundle']
types:
- completed
permissions:
contents: read
issues: write
pull-requests: write
jobs:
comment:
runs-on: ubuntu-latest
if: >
${{ github.event.workflow_run.event == 'pull_request' &&
github.event.workflow_run.conclusion == 'success' }}
steps:
- name: Download base branch bundle stats
uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
with:
workflow: analyze.yml
run_id: ${{ github.event.workflow_run.id }}
name: analysis_comment.txt
path: analysis_comment.txt
- name: Download PR number
uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
with:
workflow: analyze.yml
run_id: ${{ github.event.workflow_run.id }}
name: pr_number
path: pr_number
- name: Get comment body
id: get-comment-body
if: success()
run: |
echo 'body<<EOF' >> $GITHUB_OUTPUT
echo '' >> $GITHUB_OUTPUT
echo '## Size changes' >> $GITHUB_OUTPUT
echo '' >> $GITHUB_OUTPUT
echo '<details>' >> $GITHUB_OUTPUT
echo '' >> $GITHUB_OUTPUT
cat analysis_comment.txt/__bundle_analysis_comment.txt >> $GITHUB_OUTPUT
echo '' >> $GITHUB_OUTPUT
echo '</details>' >> $GITHUB_OUTPUT
echo '' >> $GITHUB_OUTPUT
echo 'EOF' >> $GITHUB_OUTPUT
pr_number=$(cat pr_number/pr_number)
echo "pr-number=$pr_number" >> $GITHUB_OUTPUT
- name: Comment
uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728
with:
header: next-bundle-analysis
number: ${{ steps.get-comment-body.outputs.pr-number }}
message: ${{ steps.get-comment-body.outputs.body }}
================================================
FILE: .github/workflows/discord_notify.yml
================================================
name: Discord Notify
on:
pull_request_target:
types: [opened, ready_for_review]
permissions: {}
jobs:
check_maintainer:
uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
permissions:
# Used by check_maintainer
contents: read
with:
actor: ${{ github.event.pull_request.user.login }}
notify:
if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
needs: check_maintainer
runs-on: ubuntu-latest
steps:
- name: Discord Webhook Action
uses: tsickert/discord-webhook@v6.0.0
with:
webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
embed-author-name: ${{ github.event.pull_request.user.login }}
embed-author-url: ${{ github.event.pull_request.user.html_url }}
embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
embed-description: ${{ github.event.pull_request.body }}
embed-url: ${{ github.event.pull_request.html_url }}
================================================
FILE: .github/workflows/label_core_team_prs.yml
================================================
name: Label Core Team PRs
on:
pull_request_target:
permissions: {}
env:
TZ: /usr/share/zoneinfo/America/Los_Angeles
# https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
jobs:
check_maintainer:
uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
permissions:
# Used by check_maintainer
contents: read
with:
actor: ${{ github.event.pull_request.user.login }}
label:
if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
runs-on: ubuntu-latest
needs: check_maintainer
permissions:
# Used to add labels on issues
issues: write
# Used to add labels on PRs
pull-requests: write
steps:
- name: Label PR as React Core Team
uses: actions/github-script@v7
with:
script: |
github.rest.issues.addLabels({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: ${{ github.event.number }},
labels: ['React Core Team']
});
================================================
FILE: .github/workflows/site_lint.yml
================================================
name: Site Lint / Heading ID check
on:
push:
branches:
- main # change this if your default branch is named differently
pull_request:
types: [opened, synchronize, reopened]
permissions: {}
jobs:
lint:
runs-on: ubuntu-latest
name: Lint on node 20.x and ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Use Node.js 20.x
uses: actions/setup-node@v4
with:
node-version: 20.x
cache: yarn
cache-dependency-path: yarn.lock
- name: Restore cached node_modules
uses: actions/cache@v4
with:
path: '**/node_modules'
key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- name: Install deps
run: yarn install --frozen-lockfile
- name: Lint codebase
run: yarn ci-check
- name: Textlint (Japanese)
run: yarn textlint
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
tsconfig.tsbuildinfo
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# external fonts
public/fonts/**/Optimistic_*.woff2
# rss
public/rss.xml
# claude local settings
.claude/*.local.*
.claude/react/
================================================
FILE: .husky/pre-commit
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn lint-staged
================================================
FILE: .prettierignore
================================================
src/content/**/*.md
================================================
FILE: .prettierrc
================================================
{
"bracketSpacing": false,
"singleQuote": true,
"bracketSameLine": true,
"trailingComma": "es5",
"printWidth": 80,
"overrides": [
{
"files": "*.css",
"options": {
"parser": "css"
}
},
{
"files": "*.md",
"options": {
"parser": "mdx"
}
}
]
}
================================================
FILE: CLAUDE.md
================================================
# CLAUDE.md
This file provides guidance to Claude Code when working with this repository.
## Project Overview
This is the React documentation website (react.dev), built with Next.js 15.1.11 and React 19. Documentation is written in MDX format.
## Development Commands
```bash
yarn build # Production build
yarn lint # Run ESLint
yarn lint:fix # Auto-fix lint issues
yarn tsc # TypeScript type checking
yarn check-all # Run prettier, lint:fix, tsc, and rss together
```
## Project Structure
```
src/
├── content/ # Documentation content (MDX files)
│ ├── learn/ # Tutorial/learning content
│ ├── reference/ # API reference docs
│ ├── blog/ # Blog posts
│ └── community/ # Community pages
├── components/ # React components
├── pages/ # Next.js pages
├── hooks/ # Custom React hooks
├── utils/ # Utility functions
└── styles/ # CSS/Tailwind styles
```
## Code Conventions
### TypeScript/React
- Functional components only
- Tailwind CSS for styling
### Documentation Style
When editing files in `src/content/`, the appropriate skill will be auto-suggested:
- `src/content/learn/` - Learn page structure and tone
- `src/content/reference/` - Reference page structure and tone
For MDX components (DeepDive, Pitfall, Note, etc.), invoke `/docs-components`.
For Sandpack code examples, invoke `/docs-sandpack`.
See `.claude/docs/react-docs-patterns.md` for comprehensive style guidelines.
Prettier is used for formatting (config in `.prettierrc`).
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to make participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies within all project spaces, and it also applies when
an individual is representing the project or its community in public spaces.
Examples of representing a project or community include using an official
project e-mail address, posting via an official social media account, or acting
as an appointed representative at an online or offline event. Representation of
a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at <opensource-conduct@fb.com>. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
Thank you for your interest in contributing to the React Docs!
## Code of Conduct
Facebook has adopted a Code of Conduct that we expect project
participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct)
so that you can understand what actions will and will not be tolerated.
## Technical Writing Tips
This is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc) for things to keep in mind when writing technical docs.
## Guidelines for Text
**Different sections intentionally have different styles.**
The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below.
**[Learn React](https://react.dev/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them.
**[API Reference](https://react.dev/reference/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
**Try to follow your own instructions.**
When writing step-by-step instructions (e.g. how to install something), try to forget everything you know about the topic, and actually follow the instructions you wrote, a single step at time. Often you will discover that there is implicit knowledge that you forgot to mention, or that there are missing or out-of-order steps in the instructions. Bonus points for getting *somebody else* to follow the steps and watching what they struggle with. Often it would be something very simple that you have not anticipated.
## Guidelines for Code Examples
### Syntax
#### Prefer JSX to `createElement`.
Ignore this if you're specifically describing `createElement`.
#### Use `const` where possible, otherwise `let`. Don't use `var`.
Ignore this if you're specifically writing about ES5.
#### Don't use ES6 features when equivalent ES5 features have no downsides.
Remember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it.
In particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this` context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature.
#### Don't use features that aren't standardized yet.
For example, **don't** write this:
```js
class MyComponent extends React.Component {
state = {value: ''};
handleChange = (e) => {
this.setState({value: e.target.value});
};
}
```
Instead, **do** write this:
```js
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {value: ''};
}
handleChange(e) {
this.setState({value: e.target.value});
}
}
```
Ignore this rule if you're specifically describing an experimental proposal. Make sure to mention its experimental nature in the code and in the surrounding text.
### Style
- Use semicolons.
- No space between function names and parens (`method() {}` not `method () {}`).
- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
- Always capitalize React concepts such as Hooks, Effects, and Transitions.
### Highlighting
Use `js` as the highlighting language in Markdown code blocks:
````
```js
// code
```
````
Sometimes you'll see blocks with numbers.
They tell the website to highlight specific lines.
You can highlight a single line:
````
```js {2}
function hello() {
// this line will get highlighted
}
```
````
A range of lines:
````
```js {2-4}
function hello() {
// these lines
// will get
// highlighted
}
```
````
Or even multiple ranges:
````
```js {2-4,6}
function hello() {
// these lines
// will get
// highlighted
console.log('hello');
// also this one
console.log('there');
}
```
````
Be mindful that if you move some code in an example with highlighting, you also need to update the highlighting.
Don't be afraid to often use highlighting! It is very valuable when you need to focus the reader's attention on a particular detail that's easy to miss.
================================================
FILE: LICENSE-DOCS.md
================================================
Attribution 4.0 International
=======================================================================
Creative Commons Corporation ("Creative Commons") is not a law firm and
does not provide legal services or legal advice. Distribution of
Creative Commons public licenses does not create a lawyer-client or
other relationship. Creative Commons makes its licenses and related
information available on an "as-is" basis. Creative Commons gives no
warranties regarding its licenses, any material licensed under their
terms and conditions, or any related information. Creative Commons
disclaims all liability for damages resulting from their use to the
fullest extent possible.
Using Creative Commons Public Licenses
Creative Commons public licenses provide a standard set of terms and
conditions that creators and other rights holders may use to share
original works of authorship and other material subject to copyright
and certain other rights specified in the public license below. The
following considerations are for informational purposes only, are not
exhaustive, and do not form part of our licenses.
Considerations for licensors: Our public licenses are
intended for use by those authorized to give the public
permission to use material in ways otherwise restricted by
copyright and certain other rights. Our licenses are
irrevocable. Licensors should read and understand the terms
and conditions of the license they choose before applying it.
Licensors should also secure all rights necessary before
applying our licenses so that the public can reuse the
material as expected. Licensors should clearly mark any
material not subject to the license. This includes other CC-
licensed material, or material used under an exception or
limitation to copyright. More considerations for licensors:
wiki.creativecommons.org/Considerations_for_licensors
Considerations for the public: By using one of our public
licenses, a licensor grants the public permission to use the
licensed material under specified terms and conditions. If
the licensor's permission is not necessary for any reason--for
example, because of any applicable exception or limitation to
copyright--then that use is not regulated by the license. Our
licenses grant only permissions under copyright and certain
other rights that a licensor has authority to grant. Use of
the licensed material may still be restricted for other
reasons, including because others have copyright or other
rights in the material. A licensor may make special requests,
such as asking that all changes be marked or described.
Although not required by our licenses, you are encouraged to
respect those requests where reasonable. More_considerations
for the public:
wiki.creativecommons.org/Considerations_for_licensees
=======================================================================
Creative Commons Attribution 4.0 International Public License
By exercising the Licensed Rights (defined below), You accept and agree
to be bound by the terms and conditions of this Creative Commons
Attribution 4.0 International Public License ("Public License"). To the
extent this Public License may be interpreted as a contract, You are
granted the Licensed Rights in consideration of Your acceptance of
these terms and conditions, and the Licensor grants You such rights in
consideration of benefits the Licensor receives from making the
Licensed Material available under these terms and conditions.
Section 1 -- Definitions.
a. Adapted Material means material subject to Copyright and Similar
Rights that is derived from or based upon the Licensed Material
and in which the Licensed Material is translated, altered,
arranged, transformed, or otherwise modified in a manner requiring
permission under the Copyright and Similar Rights held by the
Licensor. For purposes of this Public License, where the Licensed
Material is a musical work, performance, or sound recording,
Adapted Material is always produced where the Licensed Material is
synched in timed relation with a moving image.
b. Adapter's License means the license You apply to Your Copyright
and Similar Rights in Your contributions to Adapted Material in
accordance with the terms and conditions of this Public License.
c. Copyright and Similar Rights means copyright and/or similar rights
closely related to copyright including, without limitation,
performance, broadcast, sound recording, and Sui Generis Database
Rights, without regard to how the rights are labeled or
categorized. For purposes of this Public License, the rights
specified in Section 2(b)(1)-(2) are not Copyright and Similar
Rights.
d. Effective Technological Measures means those measures that, in the
absence of proper authority, may not be circumvented under laws
fulfilling obligations under Article 11 of the WIPO Copyright
Treaty adopted on December 20, 1996, and/or similar international
agreements.
e. Exceptions and Limitations means fair use, fair dealing, and/or
any other exception or limitation to Copyright and Similar Rights
that applies to Your use of the Licensed Material.
f. Licensed Material means the artistic or literary work, database,
or other material to which the Licensor applied this Public
License.
g. Licensed Rights means the rights granted to You subject to the
terms and conditions of this Public License, which are limited to
all Copyright and Similar Rights that apply to Your use of the
Licensed Material and that the Licensor has authority to license.
h. Licensor means the individual(s) or entity(ies) granting rights
under this Public License.
i. Share means to provide material to the public by any means or
process that requires permission under the Licensed Rights, such
as reproduction, public display, public performance, distribution,
dissemination, communication, or importation, and to make material
available to the public including in ways that members of the
public may access the material from a place and at a time
individually chosen by them.
j. Sui Generis Database Rights means rights other than copyright
resulting from Directive 96/9/EC of the European Parliament and of
the Council of 11 March 1996 on the legal protection of databases,
as amended and/or succeeded, as well as other essentially
equivalent rights anywhere in the world.
k. You means the individual or entity exercising the Licensed Rights
under this Public License. Your has a corresponding meaning.
Section 2 -- Scope.
a. License grant.
1. Subject to the terms and conditions of this Public License,
the Licensor hereby grants You a worldwide, royalty-free,
non-sublicensable, non-exclusive, irrevocable license to
exercise the Licensed Rights in the Licensed Material to:
a. reproduce and Share the Licensed Material, in whole or
in part; and
b. produce, reproduce, and Share Adapted Material.
2. Exceptions and Limitations. For the avoidance of doubt, where
Exceptions and Limitations apply to Your use, this Public
License does not apply, and You do not need to comply with
its terms and conditions.
3. Term. The term of this Public License is specified in Section
6(a).
4. Media and formats; technical modifications allowed. The
Licensor authorizes You to exercise the Licensed Rights in
all media and formats whether now known or hereafter created,
and to make technical modifications necessary to do so. The
Licensor waives and/or agrees not to assert any right or
authority to forbid You from making technical modifications
necessary to exercise the Licensed Rights, including
technical modifications necessary to circumvent Effective
Technological Measures. For purposes of this Public License,
simply making modifications authorized by this Section 2(a)
(4) never produces Adapted Material.
5. Downstream recipients.
a. Offer from the Licensor -- Licensed Material. Every
recipient of the Licensed Material automatically
receives an offer from the Licensor to exercise the
Licensed Rights under the terms and conditions of this
Public License.
b. No downstream restrictions. You may not offer or impose
any additional or different terms or conditions on, or
apply any Effective Technological Measures to, the
Licensed Material if doing so restricts exercise of the
Licensed Rights by any recipient of the Licensed
Material.
6. No endorsement. Nothing in this Public License constitutes or
may be construed as permission to assert or imply that You
are, or that Your use of the Licensed Material is, connected
with, or sponsored, endorsed, or granted official status by,
the Licensor or others designated to receive attribution as
provided in Section 3(a)(1)(A)(i).
b. Other rights.
1. Moral rights, such as the right of integrity, are not
licensed under this Public License, nor are publicity,
privacy, and/or other similar personality rights; however, to
the extent possible, the Licensor waives and/or agrees not to
assert any such rights held by the Licensor to the limited
extent necessary to allow You to exercise the Licensed
Rights, but not otherwise.
2. Patent and trademark rights are not licensed under this
Public License.
3. To the extent possible, the Licensor waives any right to
collect royalties from You for the exercise of the Licensed
Rights, whether directly or through a collecting society
under any voluntary or waivable statutory or compulsory
licensing scheme. In all other cases the Licensor expressly
reserves any right to collect such royalties.
Section 3 -- License Conditions.
Your exercise of the Licensed Rights is expressly made subject to the
following conditions.
a. Attribution.
1. If You Share the Licensed Material (including in modified
form), You must:
a. retain the following if it is supplied by the Licensor
with the Licensed Material:
i. identification of the creator(s) of the Licensed
Material and any others designated to receive
attribution, in any reasonable manner requested by
the Licensor (including by pseudonym if
designated);
ii. a copyright notice;
iii. a notice that refers to this Public License;
iv. a notice that refers to the disclaimer of
warranties;
v. a URI or hyperlink to the Licensed Material to the
extent reasonably practicable;
b. indicate if You modified the Licensed Material and
retain an indication of any previous modifications; and
c. indicate the Licensed Material is licensed under this
Public License, and include the text of, or the URI or
hyperlink to, this Public License.
2. You may satisfy the conditions in Section 3(a)(1) in any
reasonable manner based on the medium, means, and context in
which You Share the Licensed Material. For example, it may be
reasonable to satisfy the conditions by providing a URI or
hyperlink to a resource that includes the required
information.
3. If requested by the Licensor, You must remove any of the
information required by Section 3(a)(1)(A) to the extent
reasonably practicable.
4. If You Share Adapted Material You produce, the Adapter's
License You apply must not prevent recipients of the Adapted
Material from complying with this Public License.
Section 4 -- Sui Generis Database Rights.
Where the Licensed Rights include Sui Generis Database Rights that
apply to Your use of the Licensed Material:
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
to extract, reuse, reproduce, and Share all or a substantial
portion of the contents of the database;
b. if You include all or a substantial portion of the database
contents in a database in which You have Sui Generis Database
Rights, then the database in which You have Sui Generis Database
Rights (but not its individual contents) is Adapted Material; and
c. You must comply with the conditions in Section 3(a) if You Share
all or a substantial portion of the contents of the database.
For the avoidance of doubt, this Section 4 supplements and does not
replace Your obligations under this Public License where the Licensed
Rights include other Copyright and Similar Rights.
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
c. The disclaimer of warranties and limitation of liability provided
above shall be interpreted in a manner that, to the extent
possible, most closely approximates an absolute disclaimer and
waiver of all liability.
Section 6 -- Term and Termination.
a. This Public License applies for the term of the Copyright and
Similar Rights licensed here. However, if You fail to comply with
this Public License, then Your rights under this Public License
terminate automatically.
b. Where Your right to use the Licensed Material has terminated under
Section 6(a), it reinstates:
1. automatically as of the date the violation is cured, provided
it is cured within 30 days of Your discovery of the
violation; or
2. upon express reinstatement by the Licensor.
For the avoidance of doubt, this Section 6(b) does not affect any
right the Licensor may have to seek remedies for Your violations
of this Public License.
c. For the avoidance of doubt, the Licensor may also offer the
Licensed Material under separate terms or conditions or stop
distributing the Licensed Material at any time; however, doing so
will not terminate this Public License.
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
License.
Section 7 -- Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different
terms or conditions communicated by You unless expressly agreed.
b. Any arrangements, understandings, or agreements regarding the
Licensed Material not stated herein are separate from and
independent of the terms and conditions of this Public License.
Section 8 -- Interpretation.
a. For the avoidance of doubt, this Public License does not, and
shall not be interpreted to, reduce, limit, restrict, or impose
conditions on any use of the Licensed Material that could lawfully
be made without permission under this Public License.
b. To the extent possible, if any provision of this Public License is
deemed unenforceable, it shall be automatically reformed to the
minimum extent necessary to make it enforceable. If the provision
cannot be reformed, it shall be severed from this Public License
without affecting the enforceability of the remaining terms and
conditions.
c. No term or condition of this Public License will be waived and no
failure to comply consented to unless expressly agreed to by the
Licensor.
d. Nothing in this Public License constitutes or may be interpreted
as a limitation upon, or waiver of, any privileges and immunities
that apply to the Licensor or You, including from the legal
processes of any jurisdiction or authority.
=======================================================================
Creative Commons is not a party to its public licenses.
Notwithstanding, Creative Commons may elect to apply one of its public
licenses to material it publishes and in those instances will be
considered the "Licensor." Except for the limited purpose of indicating
that material is shared under a Creative Commons public license or as
otherwise permitted by the Creative Commons policies published at
creativecommons.org/policies, Creative Commons does not authorize the
use of the trademark "Creative Commons" or any other trademark or logo
of Creative Commons without its prior written consent including,
without limitation, in connection with any unauthorized modifications
to any of its public licenses or any other arrangements,
understandings, or agreements concerning use of licensed material. For
the avoidance of doubt, this paragraph does not form part of the public
licenses.
Creative Commons may be contacted at creativecommons.org.
================================================
FILE: README.md
================================================
# react.dev
This repo contains the source code and documentation powering [react.dev](https://react.dev/).
> 以下はオリジナル（英語版）リポジトリの README です。日本語版 React ドキュメントへの貢献（翻訳・修正など）に興味がある方は[こちらの Wiki ページ](https://github.com/reactjs/ja.react.dev/wiki)を参照してください。
## Getting started
### Prerequisites
1. Git
1. Node: any version starting with v16.8.0 or greater
1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
1. A fork of the repo (for any contributions)
1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine
### Installation
1. `cd react.dev` to go into the project root
3. `yarn` to install the website's npm dependencies
### Running locally
1. `yarn dev` to start the development server (powered by [Next.js](https://nextjs.org/))
1. `open http://localhost:3000` to open the site in your favorite browser
## Contributing
### Guidelines
The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
### Create a branch
1. `git checkout main` from any folder in your local `react.dev` repository
1. `git pull origin main` to ensure you have the latest main code
1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch
### Make the change
1. Follow the ["Running locally"](#running-locally) instructions
1. Save the files and check in the browser
1. Changes to React components in `src` will hot-reload
1. Changes to markdown files in `content` will hot-reload
1. If working with plugins, you may need to remove the `.cache` directory and restart the server
### Test the change
1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
2. Run `yarn check-all`. (This will run Prettier, ESLint and validate types.)
### Push it
1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes
1. `git push my-fork-name the-name-of-my-branch`
1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches.
1. Follow GitHub's instructions.
1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.
## Translation
If you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135).
## License
Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file.
================================================
FILE: colors.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
module.exports = {
// Text colors
primary: '#23272F', // gray-90
'primary-dark': '#F6F7F9', // gray-5
secondary: '#404756', // gray-70
'secondary-dark': '#EBECF0', // gray-10
tertiary: '#5E687E', // gray-50
'tertiary-dark': '#99A1B3', // gray-30
link: '#087EA4', // blue-50
'link-dark': '#58C4DC', // blue-40
syntax: '#EBECF0', // gray-10
wash: '#FFFFFF',
'wash-dark': '#23272F', // gray-90
card: '#F6F7F9', // gray-05
'card-dark': '#343A46', // gray-80
highlight: '#E6F7FF', // blue-10
'highlight-dark': 'rgba(88,175,223,.1)',
border: '#EBECF0', // gray-10
'border-dark': '#343A46', // gray-80
'secondary-button': '#EBECF0', // gray-10
'secondary-button-dark': '#404756', // gray-70
brand: '#087EA4', // blue-40
'brand-dark': '#58C4DC', // blue-40
// Gray
'gray-95': '#16181D',
'gray-90': '#23272F',
'gray-80': '#343A46',
'gray-70': '#404756',
'gray-60': '#4E5769',
'gray-50': '#5E687E',
'gray-40': '#78839B',
'gray-30': '#99A1B3',
'gray-20': '#BCC1CD',
'gray-15': '#D0D3DC',
'gray-10': '#EBECF0',
'gray-5': '#F6F7F9',
// Blue
'blue-80': '#043849',
'blue-60': '#045975',
'blue-50': '#087EA4',
'blue-40': '#149ECA', // Brand Blue
'blue-30': '#58C4DC', // unused
'blue-20': '#ABE2ED',
'blue-10': '#E6F7FF', // todo: doesn't match illustrations
'blue-5': '#E6F6FA',
// Yellow
'yellow-60': '#B65700',
'yellow-50': '#C76A15',
'yellow-40': '#DB7D27', // unused
'yellow-30': '#FABD62', // unused
'yellow-20': '#FCDEB0', // unused
'yellow-10': '#FDE7C7',
'yellow-5': '#FEF5E7',
// Purple
'purple-60': '#2B3491', // unused
'purple-50': '#575FB7',
'purple-40': '#6B75DB',
'purple-30': '#8891EC',
'purple-20': '#C3C8F5', // unused
'purple-10': '#E7E9FB',
'purple-5': '#F3F4FD',
// Green
'green-60': '#2B6E62',
'green-50': '#388F7F',
'green-40': '#44AC99',
'green-30': '#7FCCBF',
'green-20': '#ABDED5',
'green-10': '#E5F5F2',
'green-5': '#F4FBF9',
// RED
'red-60': '#712D28',
'red-50': '#A6423A', // unused
'red-40': '#C1554D',
'red-30': '#D07D77',
'red-20': '#E5B7B3', // unused
'red-10': '#F2DBD9', // unused
'red-5': '#FAF1F0',
// MISC
'code-block': '#99a1b30f', // gray-30 @ 6%
'gradient-blue': '#58C4DC', // Only used for the landing gradient for now.
github: {
highlight: '#fffbdd',
},
};
================================================
FILE: eslint-local-rules/__tests__/fixtures/src/content/basic-error.md
================================================
```jsx
import {useState} from 'react';
function Counter() {
const [count, setCount] = useState(0);
setCount(count + 1);
return <div>{count}</div>;
}
```
================================================
FILE: eslint-local-rules/__tests__/fixtures/src/content/duplicate-metadata.md
================================================
```jsx title="Counter" {expectedErrors: {'react-compiler': [99]}} {expectedErrors: {'react-compiler': [2]}}
import {useState} from 'react';
function Counter() {
const [count, setCount] = useState(0);
setCount(count + 1);
return <div>{count}</div>;
}
```
================================================
FILE: eslint-local-rules/__tests__/fixtures/src/content/malformed-metadata.md
================================================
```jsx {expectedErrors: {'react-compiler': 'invalid'}}
import {useState} from 'react';
function Counter() {
const [count, setCount] = useState(0);
setCount(count + 1);
return <div>{count}</div>;
}
```
================================================
FILE: eslint-local-rules/__tests__/fixtures/src/content/mixed-language.md
================================================
```bash
setCount()
```
```txt
import {useState} from 'react';
```
================================================
FILE: eslint-local-rules/__tests__/fixtures/src/content/stale-expected-error.md
================================================
```jsx {expectedErrors: {'react-compiler': [3]}}
function Hello() {
return <h1>Hello</h1>;
}
```
================================================
FILE: eslint-local-rules/__tests__/fixtures/src/content/suppressed-error.md
================================================
```jsx {expectedErrors: {'react-compiler': [4]}}
import {useState} from 'react';
function Counter() {
const [count, setCount] = useState(0);
setCount(count + 1);
return <div>{count}</div>;
}
```
================================================
FILE: eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const assert = require('assert');
const fs = require('fs');
const path = require('path');
const {ESLint} = require('eslint');
const plugin = require('..');
const FIXTURES_DIR = path.join(
__dirname,
'fixtures',
'src',
'content'
);
const PARSER_PATH = path.join(__dirname, '..', 'parser.js');
function createESLint({fix = false} = {}) {
return new ESLint({
useEslintrc: false,
fix,
plugins: {
'local-rules': plugin,
},
overrideConfig: {
parser: PARSER_PATH,
plugins: ['local-rules'],
rules: {
'local-rules/lint-markdown-code-blocks': 'error',
},
parserOptions: {
sourceType: 'module',
},
},
});
}
function readFixture(name) {
return fs.readFileSync(path.join(FIXTURES_DIR, name), 'utf8');
}
async function lintFixture(name, {fix = false} = {}) {
const eslint = createESLint({fix});
const filePath = path.join(FIXTURES_DIR, name);
const markdown = readFixture(name);
const [result] = await eslint.lintText(markdown, {filePath});
return result;
}
async function run() {
const basicResult = await lintFixture('basic-error.md');
assert.strictEqual(
basicResult.messages.length,
1,
'expected one diagnostic'
);
assert(
basicResult.messages[0].message.includes('Calling setState during render'),
'expected message to mention setState during render'
);
const suppressedResult = await lintFixture('suppressed-error.md');
assert.strictEqual(
suppressedResult.messages.length,
0,
'expected suppression metadata to silence diagnostic'
);
const staleResult = await lintFixture('stale-expected-error.md');
assert.strictEqual(
staleResult.messages.length,
1,
'expected stale metadata error'
);
assert.strictEqual(
staleResult.messages[0].message,
'React Compiler expected error on line 3 was not triggered'
);
const duplicateResult = await lintFixture('duplicate-metadata.md');
assert.strictEqual(
duplicateResult.messages.length,
2,
'expected duplicate metadata to surface compiler diagnostic and stale metadata notice'
);
const duplicateFixed = await lintFixture('duplicate-metadata.md', {
fix: true,
});
assert(
duplicateFixed.output.includes(
"{expectedErrors: {'react-compiler': [4]}}"
),
'expected duplicates to be rewritten to a single canonical block'
);
assert(
!duplicateFixed.output.includes('[99]'),
'expected stale line numbers to be removed from metadata'
);
const mixedLanguageResult = await lintFixture('mixed-language.md');
assert.strictEqual(
mixedLanguageResult.messages.length,
0,
'expected non-js code fences to be ignored'
);
const malformedResult = await lintFixture('malformed-metadata.md');
assert.strictEqual(
malformedResult.messages.length,
1,
'expected malformed metadata to fall back to compiler diagnostics'
);
const malformedFixed = await lintFixture('malformed-metadata.md', {
fix: true,
});
assert(
malformedFixed.output.includes(
"{expectedErrors: {'react-compiler': [4]}}"
),
'expected malformed metadata to be replaced with canonical form'
);
}
run().catch(error => {
console.error(error);
process.exitCode = 1;
});
================================================
FILE: eslint-local-rules/index.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const lintMarkdownCodeBlocks = require('./rules/lint-markdown-code-blocks');
module.exports = {
rules: {
'lint-markdown-code-blocks': lintMarkdownCodeBlocks,
},
};
================================================
FILE: eslint-local-rules/package.json
================================================
{
"name": "eslint-plugin-local-rules",
"version": "0.0.0",
"main": "index.js",
"private": "true",
"scripts": {
"test": "node __tests__/lint-markdown-code-blocks.test.js"
},
"devDependencies": {
"eslint-mdx": "^2"
}
}
================================================
FILE: eslint-local-rules/parser.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
module.exports = require('eslint-mdx');
================================================
FILE: eslint-local-rules/rules/diagnostics.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
function getRelativeLine(loc) {
return loc?.start?.line ?? loc?.line ?? 1;
}
function getRelativeColumn(loc) {
return loc?.start?.column ?? loc?.column ?? 0;
}
function getRelativeEndLine(loc, fallbackLine) {
if (loc?.end?.line != null) {
return loc.end.line;
}
if (loc?.line != null) {
return loc.line;
}
return fallbackLine;
}
function getRelativeEndColumn(loc, fallbackColumn) {
if (loc?.end?.column != null) {
return loc.end.column;
}
if (loc?.column != null) {
return loc.column;
}
return fallbackColumn;
}
/**
* @param {import('./markdown').MarkdownCodeBlock} block
* @param {Array<{detail: any, loc: any, message: string}>} diagnostics
* @returns {Array<{detail: any, message: string, relativeStartLine: number, markdownLoc: {start: {line: number, column: number}, end: {line: number, column: number}}}>}
*/
function normalizeDiagnostics(block, diagnostics) {
return diagnostics.map(({detail, loc, message}) => {
const relativeStartLine = Math.max(getRelativeLine(loc), 1);
const relativeStartColumn = Math.max(getRelativeColumn(loc), 0);
const relativeEndLine = Math.max(
getRelativeEndLine(loc, relativeStartLine),
relativeStartLine
);
const relativeEndColumn = Math.max(
getRelativeEndColumn(loc, relativeStartColumn),
relativeStartColumn
);
const markdownStartLine = block.codeStartLine + relativeStartLine - 1;
const markdownEndLine = block.codeStartLine + relativeEndLine - 1;
return {
detail,
message,
relativeStartLine,
markdownLoc: {
start: {
line: markdownStartLine,
column: relativeStartColumn,
},
end: {
line: markdownEndLine,
column: relativeEndColumn,
},
},
};
});
}
module.exports = {
normalizeDiagnostics,
};
================================================
FILE: eslint-local-rules/rules/lint-markdown-code-blocks.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const {
buildFenceLine,
getCompilerExpectedLines,
getSortedUniqueNumbers,
hasCompilerEntry,
metadataEquals,
metadataHasExpectedErrorsToken,
removeCompilerExpectedLines,
setCompilerExpectedLines,
} = require('./metadata');
const {normalizeDiagnostics} = require('./diagnostics');
const {parseMarkdownFile} = require('./markdown');
const {runReactCompiler} = require('./react-compiler');
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'Run React Compiler on markdown code blocks',
category: 'Possible Errors',
},
fixable: 'code',
hasSuggestions: true,
schema: [],
},
create(context) {
return {
Program(node) {
const filename = context.getFilename();
if (!filename.endsWith('.md') || !filename.includes('src/content')) {
return;
}
const sourceCode = context.getSourceCode();
const {blocks} = parseMarkdownFile(sourceCode.text, filename);
// For each supported code block, run the compiler and reconcile metadata.
for (const block of blocks) {
const compilerResult = runReactCompiler(
block.code,
`${filename}#codeblock`
);
const expectedLines = getCompilerExpectedLines(block.metadata);
const expectedLineSet = new Set(expectedLines);
const diagnostics = normalizeDiagnostics(
block,
compilerResult.diagnostics
);
const errorLines = new Set();
const unexpectedDiagnostics = [];
for (const diagnostic of diagnostics) {
const line = diagnostic.relativeStartLine;
errorLines.add(line);
if (!expectedLineSet.has(line)) {
unexpectedDiagnostics.push(diagnostic);
}
}
const normalizedErrorLines = getSortedUniqueNumbers(
Array.from(errorLines)
);
const missingExpectedLines = expectedLines.filter(
(line) => !errorLines.has(line)
);
const desiredMetadata = normalizedErrorLines.length
? setCompilerExpectedLines(block.metadata, normalizedErrorLines)
: removeCompilerExpectedLines(block.metadata);
// Compute canonical metadata and attach an autofix when it differs.
const metadataChanged = !metadataEquals(
block.metadata,
desiredMetadata
);
const replacementLine = buildFenceLine(block.lang, desiredMetadata);
const replacementDiffers = block.fence.rawText !== replacementLine;
const applyReplacementFix = replacementDiffers
? (fixer) =>
fixer.replaceTextRange(block.fence.range, replacementLine)
: null;
const hasDuplicateMetadata =
block.metadata.hadDuplicateExpectedErrors;
const hasExpectedErrorsMetadata = metadataHasExpectedErrorsToken(
block.metadata
);
const shouldFixUnexpected =
Boolean(applyReplacementFix) &&
normalizedErrorLines.length > 0 &&
(metadataChanged ||
hasDuplicateMetadata ||
!hasExpectedErrorsMetadata);
let fixAlreadyAttached = false;
for (const diagnostic of unexpectedDiagnostics) {
const reportData = {
node,
loc: diagnostic.markdownLoc,
message: diagnostic.message,
};
if (
shouldFixUnexpected &&
applyReplacementFix &&
!fixAlreadyAttached
) {
reportData.fix = applyReplacementFix;
reportData.suggest = [
{
desc: 'Add expectedErrors metadata to suppress these errors',
fix: applyReplacementFix,
},
];
fixAlreadyAttached = true;
}
context.report(reportData);
}
// Assert that expectedErrors is actually needed
if (
Boolean(applyReplacementFix) &&
missingExpectedLines.length > 0 &&
hasCompilerEntry(block.metadata)
) {
const plural = missingExpectedLines.length > 1;
const message = plural
? `React Compiler expected errors on lines ${missingExpectedLines.join(
', '
)} were not triggered`
: `React Compiler expected error on line ${missingExpectedLines[0]} was not triggered`;
const reportData = {
node,
loc: {
start: {
line: block.position.start.line,
column: 0,
},
end: {
line: block.position.start.line,
column: block.fence.rawText.length,
},
},
message,
};
if (!fixAlreadyAttached && applyReplacementFix) {
reportData.fix = applyReplacementFix;
fixAlreadyAttached = true;
} else if (applyReplacementFix) {
reportData.suggest = [
{
desc: 'Remove stale expectedErrors metadata',
fix: applyReplacementFix,
},
];
}
context.report(reportData);
}
}
},
};
},
};
================================================
FILE: eslint-local-rules/rules/markdown.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const remark = require('remark');
const {parseFenceMetadata} = require('./metadata');
/**
* @typedef {Object} MarkdownCodeBlock
* @property {string} code
* @property {number} codeStartLine
* @property {{start: {line: number, column: number}, end: {line: number, column: number}}} position
* @property {{lineIndex: number, rawText: string, metaText: string, range: [number, number]}} fence
* @property {string} filePath
* @property {string} lang
* @property {import('./metadata').FenceMetadata} metadata
*/
const SUPPORTED_LANGUAGES = new Set([
'js',
'jsx',
'javascript',
'ts',
'tsx',
'typescript',
]);
function computeLineOffsets(lines) {
const offsets = [];
let currentOffset = 0;
for (const line of lines) {
offsets.push(currentOffset);
currentOffset += line.length + 1;
}
return offsets;
}
function parseMarkdownFile(content, filePath) {
const tree = remark().parse(content);
const lines = content.split('\n');
const lineOffsets = computeLineOffsets(lines);
const blocks = [];
function traverse(node) {
if (!node || typeof node !== 'object') {
return;
}
if (node.type === 'code') {
const rawLang = node.lang || '';
const normalizedLang = rawLang.toLowerCase();
if (!normalizedLang || !SUPPORTED_LANGUAGES.has(normalizedLang)) {
return;
}
const fenceLineIndex = (node.position?.start?.line ?? 1) - 1;
const fenceStartOffset = node.position?.start?.offset ?? 0;
const fenceLine = lines[fenceLineIndex] ?? '';
const fenceEndOffset = fenceStartOffset + fenceLine.length;
let metaText = '';
if (fenceLine) {
const prefixMatch = fenceLine.match(/^`{3,}\s*/);
const prefixLength = prefixMatch ? prefixMatch[0].length : 3;
metaText = fenceLine.slice(prefixLength + rawLang.length);
} else if (node.meta) {
metaText = ` ${node.meta}`;
}
const metadata = parseFenceMetadata(metaText);
blocks.push({
lang: rawLang || normalizedLang,
metadata,
filePath,
code: node.value || '',
codeStartLine: (node.position?.start?.line ?? 1) + 1,
position: {
start: {
line: fenceLineIndex + 1,
column: (node.position?.start?.column ?? 1) - 1,
},
end: {
line: fenceLineIndex + 1,
column: (node.position?.start?.column ?? 1) - 1 + fenceLine.length,
},
},
fence: {
lineIndex: fenceLineIndex,
rawText: fenceLine,
metaText,
range: [fenceStartOffset, fenceEndOffset],
},
});
return;
}
if ('children' in node && Array.isArray(node.children)) {
for (const child of node.children) {
traverse(child);
}
}
}
traverse(tree);
return {
content,
blocks,
lines,
lineOffsets,
};
}
module.exports = {
SUPPORTED_LANGUAGES,
computeLineOffsets,
parseMarkdownFile,
};
================================================
FILE: eslint-local-rules/rules/metadata.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @typedef {{type: 'text', raw: string}} TextToken
* @typedef {{
* type: 'expectedErrors',
* entries: Record<string, Array<number>>,
* raw?: string,
* }} ExpectedErrorsToken
* @typedef {TextToken | ExpectedErrorsToken} MetadataToken
*
* @typedef {{
* leading: string,
* trailing: string,
* tokens: Array<MetadataToken>,
* parseError: boolean,
* hadDuplicateExpectedErrors: boolean,
* }} FenceMetadata
*/
const EXPECTED_ERRORS_BLOCK_REGEX = /\{\s*expectedErrors\s*:/;
const REACT_COMPILER_KEY = 'react-compiler';
function getSortedUniqueNumbers(values) {
return Array.from(new Set(values))
.filter((value) => typeof value === 'number' && !Number.isNaN(value))
.sort((a, b) => a - b);
}
function tokenizeMeta(body) {
if (!body) {
return [];
}
const tokens = [];
let current = '';
let depth = 0;
for (let i = 0; i < body.length; i++) {
const char = body[i];
if (char === '{') {
depth++;
} else if (char === '}') {
depth = Math.max(depth - 1, 0);
}
if (char === ' ' && depth === 0) {
if (current) {
tokens.push(current);
current = '';
}
continue;
}
current += char;
}
if (current) {
tokens.push(current);
}
return tokens;
}
function normalizeEntryValues(values) {
if (!Array.isArray(values)) {
return [];
}
return getSortedUniqueNumbers(values);
}
function parseExpectedErrorsEntries(rawEntries) {
const normalized = rawEntries
.replace(/([{,]\s*)([a-zA-Z_$][\w$]*)\s*:/g, '$1"$2":')
.replace(/'([^']*)'/g, '"$1"');
const parsed = JSON.parse(normalized);
const entries = {};
if (parsed && typeof parsed === 'object') {
for (const [key, value] of Object.entries(parsed)) {
entries[key] = normalizeEntryValues(Array.isArray(value) ? value.flat() : value);
}
}
return entries;
}
function parseExpectedErrorsToken(tokenText) {
const match = tokenText.match(/^\{\s*expectedErrors\s*:\s*(\{[\s\S]*\})\s*\}$/);
if (!match) {
return null;
}
const entriesSource = match[1];
let parseError = false;
let entries;
try {
entries = parseExpectedErrorsEntries(entriesSource);
} catch (error) {
parseError = true;
entries = {};
}
return {
token: {
type: 'expectedErrors',
entries,
raw: tokenText,
},
parseError,
};
}
function parseFenceMetadata(metaText) {
if (!metaText) {
return {
leading: '',
trailing: '',
tokens: [],
parseError: false,
hadDuplicateExpectedErrors: false,
};
}
const leading = metaText.match(/^\s*/)?.[0] ?? '';
const trailing = metaText.match(/\s*$/)?.[0] ?? '';
const bodyStart = leading.length;
const bodyEnd = metaText.length - trailing.length;
const body = metaText.slice(bodyStart, bodyEnd).trim();
if (!body) {
return {
leading,
trailing,
tokens: [],
parseError: false,
hadDuplicateExpectedErrors: false,
};
}
const tokens = [];
let parseError = false;
let sawExpectedErrors = false;
let hadDuplicateExpectedErrors = false;
for (const rawToken of tokenizeMeta(body)) {
const normalizedToken = rawToken.trim();
if (!normalizedToken) {
continue;
}
if (EXPECTED_ERRORS_BLOCK_REGEX.test(normalizedToken)) {
const parsed = parseExpectedErrorsToken(normalizedToken);
if (parsed) {
if (sawExpectedErrors) {
hadDuplicateExpectedErrors = true;
// Drop duplicates. We'll rebuild the canonical block on write.
continue;
}
tokens.push(parsed.token);
parseError = parseError || parsed.parseError;
sawExpectedErrors = true;
continue;
}
}
tokens.push({type: 'text', raw: normalizedToken});
}
return {
leading,
trailing,
tokens,
parseError,
hadDuplicateExpectedErrors,
};
}
function cloneMetadata(metadata) {
return {
leading: metadata.leading,
trailing: metadata.trailing,
parseError: metadata.parseError,
hadDuplicateExpectedErrors: metadata.hadDuplicateExpectedErrors,
tokens: metadata.tokens.map((token) => {
if (token.type === 'expectedErrors') {
const clonedEntries = {};
for (const [key, value] of Object.entries(token.entries)) {
clonedEntries[key] = [...value];
}
return {type: 'expectedErrors', entries: clonedEntries};
}
return {type: 'text', raw: token.raw};
}),
};
}
function findExpectedErrorsToken(metadata) {
return metadata.tokens.find((token) => token.type === 'expectedErrors') || null;
}
function getCompilerExpectedLines(metadata) {
const token = findExpectedErrorsToken(metadata);
if (!token) {
return [];
}
return getSortedUniqueNumbers(token.entries[REACT_COMPILER_KEY] || []);
}
function hasCompilerEntry(metadata) {
const token = findExpectedErrorsToken(metadata);
return Boolean(token && token.entries[REACT_COMPILER_KEY]?.length);
}
function metadataHasExpectedErrorsToken(metadata) {
return Boolean(findExpectedErrorsToken(metadata));
}
function stringifyExpectedErrorsToken(token) {
const entries = token.entries || {};
const keys = Object.keys(entries).filter((key) => entries[key].length > 0);
if (keys.length === 0) {
return '';
}
keys.sort();
const segments = keys.map((key) => {
const values = entries[key];
return `'${key}': [${values.join(', ')}]`;
});
return `{expectedErrors: {${segments.join(', ')}}}`;
}
function stringifyFenceMetadata(metadata) {
if (!metadata.tokens.length) {
return '';
}
const parts = metadata.tokens
.map((token) => {
if (token.type === 'expectedErrors') {
return stringifyExpectedErrorsToken(token);
}
return token.raw;
})
.filter(Boolean);
if (!parts.length) {
return '';
}
const leading = metadata.leading || ' ';
const trailing = metadata.trailing ? metadata.trailing.trimEnd() : '';
const body = parts.join(' ');
return `${leading}${body}${trailing}`;
}
function buildFenceLine(lang, metadata) {
const meta = stringifyFenceMetadata(metadata);
return meta ? `\`\`\`${lang}${meta}` : `\`\`\`${lang}`;
}
function metadataEquals(a, b) {
if (a.leading !== b.leading || a.trailing !== b.trailing) {
return false;
}
if (a.tokens.length !== b.tokens.length) {
return false;
}
for (let i = 0; i < a.tokens.length; i++) {
const left = a.tokens[i];
const right = b.tokens[i];
if (left.type !== right.type) {
return false;
}
if (left.type === 'text') {
if (left.raw !== right.raw) {
return false;
}
} else {
const leftKeys = Object.keys(left.entries).sort();
const rightKeys = Object.keys(right.entries).sort();
if (leftKeys.length !== rightKeys.length) {
return false;
}
for (let j = 0; j < leftKeys.length; j++) {
if (leftKeys[j] !== rightKeys[j]) {
return false;
}
const lValues = getSortedUniqueNumbers(left.entries[leftKeys[j]]);
const rValues = getSortedUniqueNumbers(right.entries[rightKeys[j]]);
if (lValues.length !== rValues.length) {
return false;
}
for (let k = 0; k < lValues.length; k++) {
if (lValues[k] !== rValues[k]) {
return false;
}
}
}
}
}
return true;
}
function normalizeMetadata(metadata) {
const normalized = cloneMetadata(metadata);
normalized.hadDuplicateExpectedErrors = false;
normalized.parseError = false;
if (!normalized.tokens.length) {
normalized.leading = '';
normalized.trailing = '';
}
return normalized;
}
function setCompilerExpectedLines(metadata, lines) {
const normalizedLines = getSortedUniqueNumbers(lines);
if (normalizedLines.length === 0) {
return removeCompilerExpectedLines(metadata);
}
const next = cloneMetadata(metadata);
let token = findExpectedErrorsToken(next);
if (!token) {
token = {type: 'expectedErrors', entries: {}};
next.tokens = [token, ...next.tokens];
}
token.entries[REACT_COMPILER_KEY] = normalizedLines;
return normalizeMetadata(next);
}
function removeCompilerExpectedLines(metadata) {
const next = cloneMetadata(metadata);
const token = findExpectedErrorsToken(next);
if (!token) {
return normalizeMetadata(next);
}
delete token.entries[REACT_COMPILER_KEY];
const hasEntries = Object.values(token.entries).some(
(value) => Array.isArray(value) && value.length > 0
);
if (!hasEntries) {
next.tokens = next.tokens.filter((item) => item !== token);
}
return normalizeMetadata(next);
}
module.exports = {
buildFenceLine,
getCompilerExpectedLines,
getSortedUniqueNumbers,
hasCompilerEntry,
metadataEquals,
metadataHasExpectedErrorsToken,
parseFenceMetadata,
removeCompilerExpectedLines,
setCompilerExpectedLines,
stringifyFenceMetadata,
};
================================================
FILE: eslint-local-rules/rules/react-compiler.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const {transformFromAstSync} = require('@babel/core');
const {parse: babelParse} = require('@babel/parser');
const BabelPluginReactCompiler = require('babel-plugin-react-compiler').default;
const {
parsePluginOptions,
validateEnvironmentConfig,
} = require('babel-plugin-react-compiler');
const COMPILER_OPTIONS = {
noEmit: true,
panicThreshold: 'none',
environment: validateEnvironmentConfig({
validateRefAccessDuringRender: true,
validateNoSetStateInRender: true,
validateNoSetStateInEffects: true,
validateNoJSXInTryStatements: true,
validateNoImpureFunctionsInRender: true,
validateStaticComponents: true,
validateNoFreezingKnownMutableFunctions: true,
validateNoVoidUseMemo: true,
validateNoCapitalizedCalls: [],
validateHooksUsage: true,
validateNoDerivedComputationsInEffects: true,
}),
};
function hasRelevantCode(code) {
const functionPattern = /^(export\s+)?(default\s+)?function\s+\w+/m;
const arrowPattern =
/^(export\s+)?(const|let|var)\s+\w+\s*=\s*(\([^)]*\)|\w+)\s*=>/m;
const hasImports = /^import\s+/m.test(code);
return functionPattern.test(code) || arrowPattern.test(code) || hasImports;
}
function runReactCompiler(code, filename) {
const result = {
sourceCode: code,
events: [],
};
if (!hasRelevantCode(code)) {
return {...result, diagnostics: []};
}
const options = parsePluginOptions({
...COMPILER_OPTIONS,
});
options.logger = {
logEvent: (_, event) => {
if (event.kind === 'CompileError') {
const category = event.detail?.category;
if (category === 'Todo' || category === 'Invariant') {
return;
}
result.events.push(event);
}
},
};
try {
const ast = babelParse(code, {
sourceFilename: filename,
sourceType: 'module',
plugins: ['jsx', 'typescript'],
});
transformFromAstSync(ast, code, {
filename,
highlightCode: false,
retainLines: true,
plugins: [[BabelPluginReactCompiler, options]],
sourceType: 'module',
configFile: false,
babelrc: false,
});
} catch (error) {
return {...result, diagnostics: []};
}
const diagnostics = [];
for (const event of result.events) {
if (event.kind !== 'CompileError') {
continue;
}
const detail = event.detail;
if (!detail) {
continue;
}
const loc = typeof detail.primaryLocation === 'function'
? detail.primaryLocation()
: null;
if (loc == null || typeof loc === 'symbol') {
continue;
}
const message = typeof detail.printErrorMessage === 'function'
? detail.printErrorMessage(result.sourceCode, {eslint: true})
: detail.description || 'Unknown React Compiler error';
diagnostics.push({detail, loc, message});
}
return {...result, diagnostics};
}
module.exports = {
hasRelevantCode,
runReactCompiler,
};
================================================
FILE: next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
================================================
FILE: next.config.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
/**
* @type {import('next').NextConfig}
**/
const nextConfig = {
pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
reactStrictMode: true,
experimental: {
scrollRestoration: true,
reactCompiler: true,
},
async rewrites() {
return {
beforeFiles: [
// Serve markdown when Accept header prefers text/markdown
// Useful for LLM agents - https://www.skeptrune.com/posts/use-the-accept-header-to-serve-markdown-instead-of-html-to-llms/
{
source: '/:path((?!llms.txt).*)',
has: [
{
type: 'header',
key: 'accept',
value: '(.*text/markdown.*)',
},
],
destination: '/api/md/:path*',
},
// Explicit .md extension also serves markdown
{
source: '/:path*.md',
destination: '/api/md/:path*',
},
],
};
},
env: {},
webpack: (config, {dev, isServer, ...options}) => {
if (process.env.ANALYZE) {
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: options.isServer
? '../analyze/server.html'
: './analyze/client.html',
})
);
}
// Don't bundle the shim unnecessarily.
config.resolve.alias['use-sync-external-store/shim'] = 'react';
// ESLint depends on the CommonJS version of esquery,
// but Webpack loads the ESM version by default. This
// alias ensures the correct version is used.
//
// More info:
// https://github.com/reactjs/react.dev/pull/8115
config.resolve.alias['esquery'] = 'esquery/dist/esquery.min.js';
const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
config.plugins.push(
new NormalModuleReplacementPlugin(
/^raf$/,
require.resolve('./src/utils/rafShim.js')
),
new NormalModuleReplacementPlugin(
/^process$/,
require.resolve('./src/utils/processShim.js')
),
new IgnorePlugin({
checkResource(resource, context) {
if (
/\/eslint\/lib\/rules$/.test(context) &&
/\.\/[\w-]+(\.js)?$/.test(resource)
) {
// Skips imports of built-in rules that ESLint
// tries to carry into the bundle by default.
// We only want the engine and the React rules.
return true;
}
return false;
},
})
);
return config;
},
};
module.exports = nextConfig;
================================================
FILE: package.json
================================================
{
"name": "react-dev",
"version": "1.0.0",
"private": true,
"license": "CC",
"scripts": {
"analyze": "ANALYZE=true next build",
"dev": "next-remote-watch ./src/content",
"build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs",
"lint": "next lint && eslint \"src/content/**/*.md\"",
"lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix",
"format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
"nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
"prettier": "yarn format:source",
"prettier:diff": "yarn nit:source",
"lint-heading-ids": "node scripts/headingIdLinter.js",
"fix-headings": "node scripts/headingIdLinter.js --fix",
"ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss deadlinks",
"tsc": "tsc --noEmit",
"start": "next start",
"postinstall": "yarn --cwd eslint-local-rules install && is-ci || husky install .husky",
"check-all": "npm-run-all prettier lint:fix tsc rss",
"rss": "node scripts/generateRss.js",
"deadlinks": "node scripts/deadLinkChecker.js",
"copyright": "node scripts/copyright.js",
"test:eslint-local-rules": "yarn --cwd eslint-local-rules test",
"textlint": "cd textlint && yarn --frozen-lockfile && yarn textlint",
"textlint-staged": "cd textlint && yarn --frozen-lockfile && yarn textlint-staged --"
},
"dependencies": {
"@codesandbox/sandpack-react": "2.13.5",
"@docsearch/css": "^3.8.3",
"@docsearch/react": "^3.8.3",
"@headlessui/react": "^1.7.0",
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
"classnames": "^2.2.6",
"debounce": "^1.2.1",
"github-slugger": "^1.3.0",
"next": "15.1.12",
"next-remote-watch": "^1.0.0",
"parse-numeric-range": "^1.2.0",
"react": "^19.0.0",
"react-collapsed": "4.0.4",
"react-dom": "^19.0.0",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-transform-modules-commonjs": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"@mdx-js/mdx": "^2.1.3",
"@types/body-scroll-lock": "^2.6.1",
"@types/classnames": "^2.2.10",
"@types/debounce": "^1.2.1",
"@types/github-slugger": "^1.3.0",
"@types/mdx-js__react": "^1.5.2",
"@types/node": "^14.6.4",
"@types/parse-numeric-range": "^0.0.1",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"asyncro": "^3.0.0",
"autoprefixer": "^10.4.2",
"babel-eslint": "10.x",
"babel-plugin-react-compiler": "^1.0.0",
"chalk": "4.1.2",
"eslint": "7.x",
"eslint-config-next": "12.0.3",
"eslint-config-react-app": "^5.2.1",
"eslint-plugin-flowtype": "4.x",
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-local-rules": "link:eslint-local-rules",
"eslint-plugin-react": "7.x",
"eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
"eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
"fs-extra": "^9.0.1",
"globby": "^11.0.1",
"gray-matter": "^4.0.2",
"husky": "^7.0.4",
"is-ci": "^3.0.1",
"lint-staged": ">=10",
"mdast-util-to-string": "^1.1.0",
"metro-cache": "0.72.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.5",
"postcss-flexbugs-fixes": "4.2.1",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.5.1",
"reading-time": "^1.2.0",
"remark": "^12.0.1",
"remark-external-links": "^7.0.0",
"remark-html": "^12.0.0",
"remark-images": "^2.0.0",
"remark-slug": "^7.0.0",
"remark-unwrap-images": "^2.0.0",
"retext": "^7.0.1",
"retext-smartypants": "^4.0.0",
"rss": "^1.2.2",
"tailwindcss": "^3.4.1",
"typescript": "^5.7.2",
"unist-util-visit": "^2.0.3",
"webpack-bundle-analyzer": "^4.5.0"
},
"engines": {
"node": ">=16.8.0"
},
"nextBundleAnalysis": {
"budget": null,
"budgetPercentIncreaseRed": 10,
"showDetails": true
},
"lint-staged": {
"*.{js,ts,jsx,tsx,css}": "yarn prettier",
"src/**/*.md": ["yarn fix-headings", "yarn textlint-staged --"]
},
"packageManager": "yarn@1.22.22"
}
================================================
FILE: plugins/gatsby-remark-japanese-fix/index.js
================================================
const toString = require('mdast-util-to-string');
const visit = require('unist-util-visit');
const hasJapaneseCharacter = (str) => {
// Detects katakana, hiragana, iteration marks, and CJK unified ideographs
return /[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u4e00-\u9fea。、]/.test(str);
};
/**
* Iterates over emphases (<em>'s) within the AST created by remark.
* Applies 'em-ja' class only when it contains a Japanese character,
* so that it can be displayed with a different style.
*/
module.exports = ({markdownAST}, options) => {
visit(markdownAST, 'emphasis', (node) => {
const nodeStr = toString(node);
if (hasJapaneseCharacter(nodeStr)) {
// Patch AST
node.data = node.data || {};
node.data.hProperties = node.data.hProperties || {};
node.data.hProperties.class = 'em-ja';
}
});
return markdownAST;
};
================================================
FILE: plugins/gatsby-remark-japanese-fix/package.json
================================================
{
"name": "gatsby-remark-japanese-fix",
"version": "0.0.1"
}
================================================
FILE: plugins/markdownToHtml.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const remark = require('remark');
const externalLinks = require('remark-external-links'); // Add _target and rel to external links
const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n
const images = require('remark-images'); // Improved image syntax
const unrwapImages = require('remark-unwrap-images'); // Removes <p> wrapper around images
const smartyPants = require('./remark-smartypants'); // Cleans up typography
const html = require('remark-html');
module.exports = {
remarkPlugins: [
externalLinks,
customHeaders,
images,
unrwapImages,
smartyPants,
],
markdownToHtml,
};
async function markdownToHtml(markdown) {
const result = await remark()
.use(externalLinks)
.use(customHeaders)
.use(images)
.use(unrwapImages)
.use(smartyPants)
.use(html)
.process(markdown);
return result.toString();
}
================================================
FILE: plugins/remark-header-custom-ids.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*!
* Based on 'gatsby-remark-autolink-headers'
* Original Author: Kyle Mathews <mathews.kyle@gmail.com>
* Updated by Jared Palmer;
* Copyright (c) 2015 Gatsbyjs
*/
const toString = require('mdast-util-to-string');
const visit = require('unist-util-visit');
const toSlug = require('github-slugger').slug;
function patch(context, key, value) {
if (!context[key]) {
context[key] = value;
}
return context[key];
}
const svgIcon = `<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`;
module.exports = ({icon = svgIcon, className = `anchor`} = {}) => {
return function transformer(tree) {
const ids = new Set();
visit(tree, 'heading', (node) => {
let children = [...node.children];
let id;
if (children[children.length - 1].type === 'mdxTextExpression') {
// # My header {/*my-header*/}
id = children.pop().value;
const isValidCustomId = id.startsWith('/*') && id.endsWith('*/');
if (!isValidCustomId) {
throw Error(
'Expected header ID to be like: {/*some-header*/}. ' +
'Instead, received: ' +
id
);
}
id = id.slice(2, id.length - 2);
if (id !== toSlug(id)) {
throw Error(
'Expected header ID to be a valid slug. You specified: {/*' +
id +
'*/}. Replace it with: {/*' +
toSlug(id) +
'*/}'
);
}
} else {
// # My header
id = toSlug(toString(node));
}
if (ids.has(id)) {
throw Error(
'Cannot have a duplicate header with id "' +
id +
'" on the page. ' +
'Rename the section or give it an explicit unique ID. ' +
'For example: #### Arguments {/*setstate-arguments*/}'
);
}
ids.add(id);
const data = patch(node, 'data', {});
patch(data, 'id', id);
patch(data, 'htmlAttributes', {});
patch(data, 'hProperties', {});
patch(data.htmlAttributes, 'id', id);
patch(data.hProperties, 'id', id);
});
};
};
================================================
FILE: plugins/remark-smartypants.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*!
* Based on 'silvenon/remark-smartypants'
* https://github.com/silvenon/remark-smartypants/pull/80
*/
const visit = require('unist-util-visit');
const retext = require('retext');
const smartypants = require('retext-smartypants');
function check(node, parent) {
if (node.data?.skipSmartyPants) return false;
if (parent.tagName === 'script') return false;
if (parent.tagName === 'style') return false;
return true;
}
function markSkip(node) {
if (!node) return;
node.data ??= {};
node.data.skipSmartyPants = true;
if (Array.isArray(node.children)) {
for (const child of node.children) {
markSkip(child);
}
}
}
module.exports = function (options) {
const processor = retext().use(smartypants, {
...options,
// Do not replace ellipses, dashes, backticks because they change string
// length, and we couldn't guarantee right splice of text in second visit of
// tree
ellipses: false,
dashes: false,
backticks: false,
});
const processor2 = retext().use(smartypants, {
...options,
// Do not replace quotes because they are already replaced in the first
// processor
quotes: false,
});
function transformer(tree) {
let allText = '';
let startIndex = 0;
const textOrInlineCodeNodes = [];
visit(tree, 'mdxJsxFlowElement', (node) => {
if (['TerminalBlock'].includes(node.name)) {
markSkip(node); // Mark all children to skip smarty pants
}
});
visit(tree, ['text', 'inlineCode'], (node, _, parent) => {
if (check(node, parent)) {
if (node.type === 'text') allText += node.value;
// for the case when inlineCode contains just one part of quote: `foo'bar`
else allText += 'A'.repeat(node.value.length);
textOrInlineCodeNodes.push(node);
}
});
// Concat all text into one string, to properly replace quotes around non-"text" nodes
allText = String(processor.processSync(allText));
for (const node of textOrInlineCodeNodes) {
const endIndex = startIndex + node.value.length;
if (node.type === 'text') {
const processedText = allText.slice(startIndex, endIndex);
node.value = String(processor2.processSync(processedText));
}
startIndex = endIndex;
}
}
return transformer;
};
================================================
FILE: postcss.config.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-flexbugs-fixes': {},
'postcss-preset-env': {
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
},
},
},
};
================================================
FILE: public/.well-known/atproto-did
================================================
did:plc:uorpbnp2q32vuvyeruwauyhe
================================================
FILE: public/browserconfig.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>
================================================
FILE: public/html/single-file-example.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production—do this: https://reactjs.org/docs/add-react-to-a-website#add-jsx-to-a-project -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/docs/add-react-to-a-website#try-react-with-jsx
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/start-a-new-react-project
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/add-react-to-a-website#add-react-in-one-minute
-->
</body>
</html>
================================================
FILE: public/js/jsfiddle-integration-babel.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
// Do not delete or move this file.
// Many fiddles reference it so we have to keep it here.
(function () {
var tag = document.querySelector(
'script[type="application/javascript;version=1.7"]'
);
if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
alert(
'Bad JSFiddle configuration, please fork the original React JSFiddle'
);
}
tag.setAttribute('type', 'text/babel');
tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
})();
================================================
FILE: public/js/jsfiddle-integration.js
====
gitextract_jl4wrltp/ ├── .claude/ │ ├── agents/ │ │ └── docs-reviewer.md │ ├── settings.json │ └── skills/ │ ├── docs-components/ │ │ └── SKILL.md │ ├── docs-sandpack/ │ │ └── SKILL.md │ ├── docs-voice/ │ │ └── SKILL.md │ ├── docs-writer-blog/ │ │ └── SKILL.md │ ├── docs-writer-learn/ │ │ └── SKILL.md │ ├── docs-writer-reference/ │ │ └── SKILL.md │ ├── react-expert/ │ │ └── SKILL.md │ └── review-docs/ │ └── SKILL.md ├── .eslintignore ├── .eslintrc ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── 0-bug.yml │ │ ├── 1-typo.yml │ │ ├── 2-suggestion.yml │ │ ├── 3-framework.yml │ │ └── config.yml │ ├── PULL_REQUEST_TEMPLATE.md │ ├── dependabot.yml │ └── workflows/ │ ├── analyze.yml │ ├── analyze_comment.yml │ ├── discord_notify.yml │ ├── label_core_team_prs.yml │ └── site_lint.yml ├── .gitignore ├── .husky/ │ └── pre-commit ├── .prettierignore ├── .prettierrc ├── CLAUDE.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE-DOCS.md ├── README.md ├── colors.js ├── eslint-local-rules/ │ ├── __tests__/ │ │ ├── fixtures/ │ │ │ └── src/ │ │ │ └── content/ │ │ │ ├── basic-error.md │ │ │ ├── duplicate-metadata.md │ │ │ ├── malformed-metadata.md │ │ │ ├── mixed-language.md │ │ │ ├── stale-expected-error.md │ │ │ └── suppressed-error.md │ │ └── lint-markdown-code-blocks.test.js │ ├── index.js │ ├── package.json │ ├── parser.js │ └── rules/ │ ├── diagnostics.js │ ├── lint-markdown-code-blocks.js │ ├── markdown.js │ ├── metadata.js │ └── react-compiler.js ├── next-env.d.ts ├── next.config.js ├── package.json ├── plugins/ │ ├── gatsby-remark-japanese-fix/ │ │ ├── index.js │ │ └── package.json │ ├── markdownToHtml.js │ ├── remark-header-custom-ids.js │ └── remark-smartypants.js ├── postcss.config.js ├── public/ │ ├── .well-known/ │ │ └── atproto-did │ ├── browserconfig.xml │ ├── html/ │ │ └── single-file-example.html │ ├── js/ │ │ ├── jsfiddle-integration-babel.js │ │ └── jsfiddle-integration.js │ ├── robots.txt │ └── site.webmanifest ├── scripts/ │ ├── copyright.js │ ├── deadLinkChecker.js │ ├── downloadFonts.mjs │ ├── generateRss.js │ ├── headingIDHelpers/ │ │ ├── generateHeadingIDs.js │ │ ├── validateHeadingIDs.js │ │ └── walk.js │ └── headingIdLinter.js ├── src/ │ ├── components/ │ │ ├── Breadcrumbs.tsx │ │ ├── Button.tsx │ │ ├── ButtonLink.tsx │ │ ├── DocsFooter.tsx │ │ ├── ErrorDecoderContext.tsx │ │ ├── ExternalLink.tsx │ │ ├── Icon/ │ │ │ ├── IconArrow.tsx │ │ │ ├── IconArrowSmall.tsx │ │ │ ├── IconBsky.tsx │ │ │ ├── IconCanary.tsx │ │ │ ├── IconChevron.tsx │ │ │ ├── IconClose.tsx │ │ │ ├── IconCodeBlock.tsx │ │ │ ├── IconCopy.tsx │ │ │ ├── IconDeepDive.tsx │ │ │ ├── IconDownload.tsx │ │ │ ├── IconError.tsx │ │ │ ├── IconExperimental.tsx │ │ │ ├── IconFacebookCircle.tsx │ │ │ ├── IconGitHub.tsx │ │ │ ├── IconHamburger.tsx │ │ │ ├── IconHint.tsx │ │ │ ├── IconInstagram.tsx │ │ │ ├── IconLink.tsx │ │ │ ├── IconNavArrow.tsx │ │ │ ├── IconNewPage.tsx │ │ │ ├── IconNote.tsx │ │ │ ├── IconPitfall.tsx │ │ │ ├── IconRestart.tsx │ │ │ ├── IconRocket.tsx │ │ │ ├── IconRss.tsx │ │ │ ├── IconSearch.tsx │ │ │ ├── IconSolution.tsx │ │ │ ├── IconTerminal.tsx │ │ │ ├── IconThreads.tsx │ │ │ ├── IconTwitter.tsx │ │ │ └── IconWarning.tsx │ │ ├── Layout/ │ │ │ ├── Footer.tsx │ │ │ ├── HomeContent.js │ │ │ ├── Page.tsx │ │ │ ├── Sidebar/ │ │ │ │ ├── SidebarButton.tsx │ │ │ │ ├── SidebarLink.tsx │ │ │ │ ├── SidebarRouteTree.tsx │ │ │ │ └── index.tsx │ │ │ ├── SidebarNav/ │ │ │ │ ├── SidebarNav.tsx │ │ │ │ └── index.tsx │ │ │ ├── Toc.tsx │ │ │ ├── TopNav/ │ │ │ │ ├── BrandMenu.tsx │ │ │ │ ├── TopNav.tsx │ │ │ │ └── index.tsx │ │ │ ├── getRouteMeta.tsx │ │ │ └── useTocHighlight.tsx │ │ ├── Logo.tsx │ │ ├── MDX/ │ │ │ ├── BlogCard.tsx │ │ │ ├── Challenges/ │ │ │ │ ├── Challenge.tsx │ │ │ │ ├── Challenges.tsx │ │ │ │ ├── Navigation.tsx │ │ │ │ └── index.tsx │ │ │ ├── CodeBlock/ │ │ │ │ ├── CodeBlock.tsx │ │ │ │ └── index.tsx │ │ │ ├── CodeDiagram.tsx │ │ │ ├── ConsoleBlock.tsx │ │ │ ├── Diagram.tsx │ │ │ ├── DiagramGroup.tsx │ │ │ ├── ErrorDecoder.tsx │ │ │ ├── ExpandableCallout.tsx │ │ │ ├── ExpandableExample.tsx │ │ │ ├── Heading.tsx │ │ │ ├── InlineCode.tsx │ │ │ ├── Intro.tsx │ │ │ ├── LanguagesContext.tsx │ │ │ ├── Link.tsx │ │ │ ├── MDXComponents.module.css │ │ │ ├── MDXComponents.tsx │ │ │ ├── PackageImport.tsx │ │ │ ├── Recap.tsx │ │ │ ├── Sandpack/ │ │ │ │ ├── ClearButton.tsx │ │ │ │ ├── Console.tsx │ │ │ │ ├── CustomPreset.tsx │ │ │ │ ├── DownloadButton.tsx │ │ │ │ ├── ErrorMessage.tsx │ │ │ │ ├── LoadingOverlay.tsx │ │ │ │ ├── NavigationBar.tsx │ │ │ │ ├── OpenInCodeSandboxButton.tsx │ │ │ │ ├── OpenInTypeScriptPlayground.tsx │ │ │ │ ├── Preview.tsx │ │ │ │ ├── ReloadButton.tsx │ │ │ │ ├── SandpackRoot.tsx │ │ │ │ ├── Themes.tsx │ │ │ │ ├── createFileMap.ts │ │ │ │ ├── index.tsx │ │ │ │ ├── runESLint.tsx │ │ │ │ ├── template.ts │ │ │ │ └── useSandpackLint.tsx │ │ │ ├── SandpackWithHTMLOutput.tsx │ │ │ ├── SimpleCallout.tsx │ │ │ ├── TeamMember.tsx │ │ │ ├── TerminalBlock.tsx │ │ │ ├── TocContext.tsx │ │ │ └── YouWillLearnCard.tsx │ │ ├── PageHeading.tsx │ │ ├── Search.tsx │ │ ├── Seo.tsx │ │ ├── SocialBanner.tsx │ │ └── Tag.tsx │ ├── content/ │ │ ├── blog/ │ │ │ ├── 2020/ │ │ │ │ └── 12/ │ │ │ │ └── 21/ │ │ │ │ └── data-fetching-with-react-server-components.md │ │ │ ├── 2021/ │ │ │ │ ├── 06/ │ │ │ │ │ └── 08/ │ │ │ │ │ └── the-plan-for-react-18.md │ │ │ │ └── 12/ │ │ │ │ └── 17/ │ │ │ │ └── react-conf-2021-recap.md │ │ │ ├── 2022/ │ │ │ │ ├── 03/ │ │ │ │ │ ├── 08/ │ │ │ │ │ │ └── react-18-upgrade-guide.md │ │ │ │ │ └── 29/ │ │ │ │ │ └── react-v18.md │ │ │ │ └── 06/ │ │ │ │ └── 15/ │ │ │ │ └── react-labs-what-we-have-been-working-on-june-2022.md │ │ │ ├── 2023/ │ │ │ │ ├── 03/ │ │ │ │ │ ├── 16/ │ │ │ │ │ │ └── introducing-react-dev.md │ │ │ │ │ └── 22/ │ │ │ │ │ └── react-labs-what-we-have-been-working-on-march-2023.md │ │ │ │ └── 05/ │ │ │ │ └── 03/ │ │ │ │ └── react-canaries.md │ │ │ ├── 2024/ │ │ │ │ ├── 02/ │ │ │ │ │ └── 15/ │ │ │ │ │ └── react-labs-what-we-have-been-working-on-february-2024.md │ │ │ │ ├── 04/ │ │ │ │ │ └── 25/ │ │ │ │ │ └── react-19-upgrade-guide.md │ │ │ │ ├── 05/ │ │ │ │ │ └── 22/ │ │ │ │ │ └── react-conf-2024-recap.md │ │ │ │ ├── 10/ │ │ │ │ │ └── 21/ │ │ │ │ │ └── react-compiler-beta-release.md │ │ │ │ └── 12/ │ │ │ │ └── 05/ │ │ │ │ └── react-19.md │ │ │ ├── 2025/ │ │ │ │ ├── 02/ │ │ │ │ │ └── 14/ │ │ │ │ │ └── sunsetting-create-react-app.md │ │ │ │ ├── 04/ │ │ │ │ │ └── 23/ │ │ │ │ │ └── react-labs-view-transitions-activity-and-more.md │ │ │ │ ├── 10/ │ │ │ │ │ ├── 01/ │ │ │ │ │ │ └── react-19-2.md │ │ │ │ │ ├── 07/ │ │ │ │ │ │ ├── introducing-the-react-foundation.md │ │ │ │ │ │ └── react-compiler-1.md │ │ │ │ │ └── 16/ │ │ │ │ │ └── react-conf-2025-recap.md │ │ │ │ └── 12/ │ │ │ │ ├── 03/ │ │ │ │ │ └── critical-security-vulnerability-in-react-server-components.md │ │ │ │ └── 11/ │ │ │ │ └── denial-of-service-and-source-code-exposure-in-react-server-components.md │ │ │ └── index.md │ │ ├── community/ │ │ │ ├── acknowledgements.md │ │ │ ├── conferences.md │ │ │ ├── docs-contributors.md │ │ │ ├── index.md │ │ │ ├── meetups.md │ │ │ ├── team.md │ │ │ ├── translations.md │ │ │ ├── versioning-policy.md │ │ │ └── videos.md │ │ ├── errors/ │ │ │ ├── 377.md │ │ │ ├── generic.md │ │ │ └── index.md │ │ ├── index.md │ │ ├── learn/ │ │ │ ├── add-react-to-an-existing-project.md │ │ │ ├── adding-interactivity.md │ │ │ ├── build-a-react-app-from-scratch.md │ │ │ ├── choosing-the-state-structure.md │ │ │ ├── conditional-rendering.md │ │ │ ├── creating-a-react-app.md │ │ │ ├── describing-the-ui.md │ │ │ ├── editor-setup.md │ │ │ ├── escape-hatches.md │ │ │ ├── extracting-state-logic-into-a-reducer.md │ │ │ ├── importing-and-exporting-components.md │ │ │ ├── index.md │ │ │ ├── installation.md │ │ │ ├── javascript-in-jsx-with-curly-braces.md │ │ │ ├── keeping-components-pure.md │ │ │ ├── lifecycle-of-reactive-effects.md │ │ │ ├── managing-state.md │ │ │ ├── manipulating-the-dom-with-refs.md │ │ │ ├── passing-data-deeply-with-context.md │ │ │ ├── passing-props-to-a-component.md │ │ │ ├── preserving-and-resetting-state.md │ │ │ ├── queueing-a-series-of-state-updates.md │ │ │ ├── react-compiler/ │ │ │ │ ├── debugging.md │ │ │ │ ├── incremental-adoption.md │ │ │ │ ├── index.md │ │ │ │ ├── installation.md │ │ │ │ └── introduction.md │ │ │ ├── react-developer-tools.md │ │ │ ├── reacting-to-input-with-state.md │ │ │ ├── referencing-values-with-refs.md │ │ │ ├── removing-effect-dependencies.md │ │ │ ├── render-and-commit.md │ │ │ ├── rendering-lists.md │ │ │ ├── responding-to-events.md │ │ │ ├── reusing-logic-with-custom-hooks.md │ │ │ ├── scaling-up-with-reducer-and-context.md │ │ │ ├── separating-events-from-effects.md │ │ │ ├── setup.md │ │ │ ├── sharing-state-between-components.md │ │ │ ├── state-a-components-memory.md │ │ │ ├── state-as-a-snapshot.md │ │ │ ├── synchronizing-with-effects.md │ │ │ ├── thinking-in-react.md │ │ │ ├── tutorial-tic-tac-toe.md │ │ │ ├── typescript.md │ │ │ ├── understanding-your-ui-as-a-tree.md │ │ │ ├── updating-arrays-in-state.md │ │ │ ├── updating-objects-in-state.md │ │ │ ├── writing-markup-with-jsx.md │ │ │ ├── you-might-not-need-an-effect.md │ │ │ └── your-first-component.md │ │ ├── reference/ │ │ │ ├── dev-tools/ │ │ │ │ └── react-performance-tracks.md │ │ │ ├── eslint-plugin-react-hooks/ │ │ │ │ ├── index.md │ │ │ │ └── lints/ │ │ │ │ ├── component-hook-factories.md │ │ │ │ ├── config.md │ │ │ │ ├── error-boundaries.md │ │ │ │ ├── exhaustive-deps.md │ │ │ │ ├── gating.md │ │ │ │ ├── globals.md │ │ │ │ ├── immutability.md │ │ │ │ ├── incompatible-library.md │ │ │ │ ├── preserve-manual-memoization.md │ │ │ │ ├── purity.md │ │ │ │ ├── refs.md │ │ │ │ ├── rules-of-hooks.md │ │ │ │ ├── set-state-in-effect.md │ │ │ │ ├── set-state-in-render.md │ │ │ │ ├── static-components.md │ │ │ │ ├── unsupported-syntax.md │ │ │ │ └── use-memo.md │ │ │ ├── react/ │ │ │ │ ├── Activity.md │ │ │ │ ├── Children.md │ │ │ │ ├── Component.md │ │ │ │ ├── Fragment.md │ │ │ │ ├── Profiler.md │ │ │ │ ├── PureComponent.md │ │ │ │ ├── StrictMode.md │ │ │ │ ├── Suspense.md │ │ │ │ ├── ViewTransition.md │ │ │ │ ├── act.md │ │ │ │ ├── addTransitionType.md │ │ │ │ ├── apis.md │ │ │ │ ├── cache.md │ │ │ │ ├── cacheSignal.md │ │ │ │ ├── captureOwnerStack.md │ │ │ │ ├── cloneElement.md │ │ │ │ ├── components.md │ │ │ │ ├── createContext.md │ │ │ │ ├── createElement.md │ │ │ │ ├── createRef.md │ │ │ │ ├── experimental_taintObjectReference.md │ │ │ │ ├── experimental_taintUniqueValue.md │ │ │ │ ├── forwardRef.md │ │ │ │ ├── hooks.md │ │ │ │ ├── index.md │ │ │ │ ├── isValidElement.md │ │ │ │ ├── lazy.md │ │ │ │ ├── legacy.md │ │ │ │ ├── memo.md │ │ │ │ ├── startTransition.md │ │ │ │ ├── use.md │ │ │ │ ├── useActionState.md │ │ │ │ ├── useCallback.md │ │ │ │ ├── useContext.md │ │ │ │ ├── useDebugValue.md │ │ │ │ ├── useDeferredValue.md │ │ │ │ ├── useEffect.md │ │ │ │ ├── useEffectEvent.md │ │ │ │ ├── useId.md │ │ │ │ ├── useImperativeHandle.md │ │ │ │ ├── useInsertionEffect.md │ │ │ │ ├── useLayoutEffect.md │ │ │ │ ├── useMemo.md │ │ │ │ ├── useOptimistic.md │ │ │ │ ├── useReducer.md │ │ │ │ ├── useRef.md │ │ │ │ ├── useState.md │ │ │ │ ├── useSyncExternalStore.md │ │ │ │ └── useTransition.md │ │ │ ├── react-compiler/ │ │ │ │ ├── compilationMode.md │ │ │ │ ├── compiling-libraries.md │ │ │ │ ├── configuration.md │ │ │ │ ├── directives/ │ │ │ │ │ ├── use-memo.md │ │ │ │ │ └── use-no-memo.md │ │ │ │ ├── directives.md │ │ │ │ ├── gating.md │ │ │ │ ├── logger.md │ │ │ │ ├── panicThreshold.md │ │ │ │ └── target.md │ │ │ ├── react-dom/ │ │ │ │ ├── client/ │ │ │ │ │ ├── createRoot.md │ │ │ │ │ ├── hydrateRoot.md │ │ │ │ │ └── index.md │ │ │ │ ├── components/ │ │ │ │ │ ├── common.md │ │ │ │ │ ├── form.md │ │ │ │ │ ├── index.md │ │ │ │ │ ├── input.md │ │ │ │ │ ├── link.md │ │ │ │ │ ├── meta.md │ │ │ │ │ ├── option.md │ │ │ │ │ ├── progress.md │ │ │ │ │ ├── script.md │ │ │ │ │ ├── select.md │ │ │ │ │ ├── style.md │ │ │ │ │ ├── textarea.md │ │ │ │ │ └── title.md │ │ │ │ ├── createPortal.md │ │ │ │ ├── flushSync.md │ │ │ │ ├── hooks/ │ │ │ │ │ ├── index.md │ │ │ │ │ └── useFormStatus.md │ │ │ │ ├── index.md │ │ │ │ ├── preconnect.md │ │ │ │ ├── prefetchDNS.md │ │ │ │ ├── preinit.md │ │ │ │ ├── preinitModule.md │ │ │ │ ├── preload.md │ │ │ │ ├── preloadModule.md │ │ │ │ ├── server/ │ │ │ │ │ ├── index.md │ │ │ │ │ ├── renderToPipeableStream.md │ │ │ │ │ ├── renderToReadableStream.md │ │ │ │ │ ├── renderToStaticMarkup.md │ │ │ │ │ ├── renderToString.md │ │ │ │ │ ├── resume.md │ │ │ │ │ └── resumeToPipeableStream.md │ │ │ │ └── static/ │ │ │ │ ├── index.md │ │ │ │ ├── prerender.md │ │ │ │ ├── prerenderToNodeStream.md │ │ │ │ ├── resumeAndPrerender.md │ │ │ │ └── resumeAndPrerenderToNodeStream.md │ │ │ ├── rsc/ │ │ │ │ ├── directives.md │ │ │ │ ├── server-components.md │ │ │ │ ├── server-functions.md │ │ │ │ ├── use-client.md │ │ │ │ └── use-server.md │ │ │ └── rules/ │ │ │ ├── components-and-hooks-must-be-pure.md │ │ │ ├── index.md │ │ │ ├── react-calls-components-and-hooks.md │ │ │ └── rules-of-hooks.md │ │ ├── versions.md │ │ └── warnings/ │ │ ├── invalid-aria-prop.md │ │ ├── invalid-hook-call-warning.md │ │ ├── react-dom-test-utils.md │ │ ├── react-test-renderer.md │ │ ├── special-props.md │ │ └── unknown-prop.md │ ├── css/ │ │ └── ja-fix.css │ ├── hooks/ │ │ └── usePendingRoute.ts │ ├── pages/ │ │ ├── 404.js │ │ ├── 500.js │ │ ├── [[...markdownPath]].js │ │ ├── _app.tsx │ │ ├── _document.tsx │ │ ├── api/ │ │ │ └── md/ │ │ │ └── [...path].ts │ │ ├── errors/ │ │ │ ├── [errorCode].tsx │ │ │ └── index.tsx │ │ └── llms.txt.tsx │ ├── sidebarBlog.json │ ├── sidebarCommunity.json │ ├── sidebarHome.json │ ├── sidebarLearn.json │ ├── sidebarReference.json │ ├── siteConfig.js │ ├── styles/ │ │ ├── algolia.css │ │ ├── index.css │ │ └── sandpack.css │ ├── types/ │ │ └── docsearch-react-modal.d.ts │ └── utils/ │ ├── analytics.ts │ ├── compileMDX.ts │ ├── finishedTranslations.ts │ ├── forwardRefWithAs.tsx │ ├── prepareMDX.js │ ├── processShim.js │ ├── rafShim.js │ ├── rss.js │ └── toCommaSeparatedList.tsx ├── tailwind.config.js ├── textlint/ │ ├── .gitignore │ ├── .textlintrc.json │ ├── jp-reactjs-org-lint.js │ ├── package.json │ └── prh.yml ├── tsconfig.json └── vercel.json
SYMBOL INDEX (312 symbols across 88 files)
FILE: eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js
constant FIXTURES_DIR (line 14) | const FIXTURES_DIR = path.join(
constant PARSER_PATH (line 20) | const PARSER_PATH = path.join(__dirname, '..', 'parser.js');
function createESLint (line 22) | function createESLint({fix = false} = {}) {
function readFixture (line 42) | function readFixture(name) {
function lintFixture (line 46) | async function lintFixture(name, {fix = false} = {}) {
function run (line 54) | async function run() {
FILE: eslint-local-rules/rules/diagnostics.js
function getRelativeLine (line 8) | function getRelativeLine(loc) {
function getRelativeColumn (line 12) | function getRelativeColumn(loc) {
function getRelativeEndLine (line 16) | function getRelativeEndLine(loc, fallbackLine) {
function getRelativeEndColumn (line 26) | function getRelativeEndColumn(loc, fallbackColumn) {
function normalizeDiagnostics (line 41) | function normalizeDiagnostics(block, diagnostics) {
FILE: eslint-local-rules/rules/lint-markdown-code-blocks.js
method create (line 34) | create(context) {
FILE: eslint-local-rules/rules/markdown.js
constant SUPPORTED_LANGUAGES (line 22) | const SUPPORTED_LANGUAGES = new Set([
function computeLineOffsets (line 31) | function computeLineOffsets(lines) {
function parseMarkdownFile (line 43) | function parseMarkdownFile(content, filePath) {
FILE: eslint-local-rules/rules/metadata.js
constant EXPECTED_ERRORS_BLOCK_REGEX (line 26) | const EXPECTED_ERRORS_BLOCK_REGEX = /\{\s*expectedErrors\s*:/;
constant REACT_COMPILER_KEY (line 27) | const REACT_COMPILER_KEY = 'react-compiler';
function getSortedUniqueNumbers (line 29) | function getSortedUniqueNumbers(values) {
function tokenizeMeta (line 35) | function tokenizeMeta(body) {
function normalizeEntryValues (line 70) | function normalizeEntryValues(values) {
function parseExpectedErrorsEntries (line 77) | function parseExpectedErrorsEntries(rawEntries) {
function parseExpectedErrorsToken (line 94) | function parseExpectedErrorsToken(tokenText) {
function parseFenceMetadata (line 121) | function parseFenceMetadata(metaText) {
function cloneMetadata (line 186) | function cloneMetadata(metadata) {
function findExpectedErrorsToken (line 205) | function findExpectedErrorsToken(metadata) {
function getCompilerExpectedLines (line 209) | function getCompilerExpectedLines(metadata) {
function hasCompilerEntry (line 217) | function hasCompilerEntry(metadata) {
function metadataHasExpectedErrorsToken (line 222) | function metadataHasExpectedErrorsToken(metadata) {
function stringifyExpectedErrorsToken (line 226) | function stringifyExpectedErrorsToken(token) {
function stringifyFenceMetadata (line 243) | function stringifyFenceMetadata(metadata) {
function buildFenceLine (line 267) | function buildFenceLine(lang, metadata) {
function metadataEquals (line 272) | function metadataEquals(a, b) {
function normalizeMetadata (line 318) | function normalizeMetadata(metadata) {
function setCompilerExpectedLines (line 329) | function setCompilerExpectedLines(metadata, lines) {
function removeCompilerExpectedLines (line 346) | function removeCompilerExpectedLines(metadata) {
FILE: eslint-local-rules/rules/react-compiler.js
constant COMPILER_OPTIONS (line 16) | const COMPILER_OPTIONS = {
function hasRelevantCode (line 34) | function hasRelevantCode(code) {
function runReactCompiler (line 43) | function runReactCompiler(code, filename) {
FILE: next.config.js
method rewrites (line 22) | async rewrites() {
method checkResource (line 82) | checkResource(resource, context) {
FILE: plugins/markdownToHtml.js
function markdownToHtml (line 27) | async function markdownToHtml(markdown) {
FILE: plugins/remark-header-custom-ids.js
function patch (line 19) | function patch(context, key, value) {
FILE: plugins/remark-smartypants.js
function check (line 17) | function check(node, parent) {
function markSkip (line 24) | function markSkip(node) {
function transformer (line 53) | function transformer(tree) {
FILE: scripts/copyright.js
constant META_COPYRIGHT_COMMENT_BLOCK (line 13) | const META_COPYRIGHT_COMMENT_BLOCK =
function processFile (line 53) | function processFile(file) {
FILE: scripts/deadLinkChecker.js
constant CONTENT_DIR (line 14) | const CONTENT_DIR = path.join(__dirname, '../src/content');
constant PUBLIC_DIR (line 15) | const PUBLIC_DIR = path.join(__dirname, '../public');
function readFileWithCache (line 22) | async function readFileWithCache(filePath) {
function fileExists (line 34) | async function fileExists(filePath) {
function getMarkdownFiles (line 43) | function getMarkdownFiles() {
function extractAnchorsFromContent (line 53) | function extractAnchorsFromContent(content) {
function buildAnchorMap (line 78) | async function buildAnchorMap(files) {
function extractLinksFromContent (line 88) | function extractLinksFromContent(content) {
function findTargetFile (line 114) | async function findTargetFile(urlPath) {
function validateLink (line 163) | async function validateLink(link) {
function processFile (line 263) | async function processFile(filePath) {
function buildContributorMap (line 285) | async function buildContributorMap() {
function fetchErrorCodes (line 311) | async function fetchErrorCodes() {
function buildRedirectsMap (line 327) | async function buildRedirectsMap() {
function main (line 351) | async function main() {
FILE: scripts/headingIDHelpers/generateHeadingIDs.js
function stripLinks (line 19) | function stripLinks(line) {
function addHeaderID (line 23) | function addHeaderID(line, slugger) {
function addHeaderIDs (line 65) | function addHeaderIDs(lines) {
function main (line 87) | async function main(paths) {
FILE: scripts/headingIDHelpers/validateHeadingIDs.js
function validateHeaderId (line 16) | function validateHeaderId(line) {
function validateHeaderIds (line 33) | function validateHeaderIds(lines) {
function main (line 55) | async function main(paths) {
FILE: src/components/Breadcrumbs.tsx
function Breadcrumbs (line 16) | function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
FILE: src/components/Button.tsx
type ButtonProps (line 15) | interface ButtonProps {
function Button (line 23) | function Button({
FILE: src/components/ButtonLink.tsx
type ButtonLinkProps (line 15) | interface ButtonLinkProps {
function ButtonLink (line 22) | function ButtonLink({
FILE: src/components/DocsFooter.tsx
type DocsPageFooterProps (line 18) | type DocsPageFooterProps = Pick<
function areEqual (line 23) | function areEqual(prevProps: DocsPageFooterProps, props: DocsPageFooterP...
function FooterLink (line 66) | function FooterLink({
FILE: src/components/ExternalLink.tsx
function ExternalLink (line 13) | function ExternalLink({
FILE: src/components/Layout/Footer.tsx
function Footer (line 21) | function Footer() {
function FooterLink (line 396) | function FooterLink({
FILE: src/components/Layout/HomeContent.js
function Section (line 39) | function Section({children, background = null}) {
function Header (line 60) | function Header({children}) {
function Para (line 69) | function Para({children}) {
function Center (line 77) | function Center({children}) {
function FullBleed (line 85) | function FullBleed({children}) {
function CurrentTime (line 91) | function CurrentTime() {
function HomeContent (line 123) | function HomeContent() {
function CTA (line 585) | function CTA({children, icon, href}) {
function CommunityGallery (line 760) | function CommunityGallery() {
function ExampleLayout (line 866) | function ExampleLayout({
function useCodeHover (line 942) | function useCodeHover(areas) {
function Example1 (line 964) | function Example1() {
function Example2 (line 1015) | function Example2() {
function Example3 (line 1088) | function Example3() {
function Example4 (line 1189) | function Example4() {
function useNestedScrollLock (line 1258) | function useNestedScrollLock(ref) {
function ExamplePanel (line 1288) | function ExamplePanel({
function BrowserChrome (line 1313) | function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
function ConferencePage (line 1412) | function ConferencePage({slug}) {
function TalksLoading (line 1425) | function TalksLoading() {
function Talks (line 1476) | function Talks({confId}) {
function SearchableVideoList (line 1481) | function SearchableVideoList({videos}) {
function filterVideos (line 1495) | function filterVideos(videos, query) {
function VideoList (line 1511) | function VideoList({videos, emptyHeading}) {
function SearchInput (line 1534) | function SearchInput({value, onChange}) {
function ConferenceLayout (line 1561) | function ConferenceLayout({conf, children}) {
function Cover (line 1608) | function Cover({background, children}) {
function Video (line 1625) | function Video({video}) {
function Code (line 1652) | function Code({children}) {
function Thumbnail (line 1662) | function Thumbnail({video}) {
function ThumbnailPlaceholder (line 1713) | function ThumbnailPlaceholder() {
function LikeButton (line 1736) | function LikeButton({video}) {
function SvgContainer (line 1806) | function SvgContainer({children}) {
function NativeIcons (line 1818) | function NativeIcons() {
function WebIcons (line 1869) | function WebIcons() {
function use (line 2408) | function use(promise) {
function fetchConf (line 2436) | function fetchConf(slug) {
function fetchTalks (line 2461) | function fetchTalks(confId) {
FILE: src/components/Layout/Page.tsx
type PageProps (line 34) | interface PageProps {
function Page (line 48) | function Page({
FILE: src/components/Layout/Sidebar/SidebarButton.tsx
type SidebarButtonProps (line 16) | interface SidebarButtonProps {
function SidebarButton (line 25) | function SidebarButton({
FILE: src/components/Layout/Sidebar/SidebarLink.tsx
type SidebarLinkProps (line 22) | interface SidebarLinkProps {
function SidebarLink (line 34) | function SidebarLink({
FILE: src/components/Layout/Sidebar/SidebarRouteTree.tsx
type SidebarRouteTreeProps (line 22) | interface SidebarRouteTreeProps {
function CollapseWrapper (line 29) | function CollapseWrapper({
function SidebarRouteTree (line 81) | function SidebarRouteTree({
FILE: src/components/Layout/SidebarNav/SidebarNav.tsx
type Window (line 19) | interface Window {
function SidebarNav (line 25) | function SidebarNav({
FILE: src/components/Layout/Toc.tsx
function Toc (line 16) | function Toc({headings}: {headings: Toc}) {
FILE: src/components/Layout/TopNav/BrandMenu.tsx
function MenuItem (line 15) | function MenuItem({
function DownloadMenuItem (line 31) | function DownloadMenuItem({
function BrandMenu (line 47) | function BrandMenu({children}: {children: React.ReactNode}) {
FILE: src/components/Layout/TopNav/TopNav.tsx
type Window (line 38) | interface Window {
function Link (line 114) | function Link({
function NavItem (line 129) | function NavItem({url, isActive, children}: any) {
function Kbd (line 146) | function Kbd(props: {children?: React.ReactNode; wide?: boolean}) {
function TopNav (line 158) | function TopNav({
FILE: src/components/Layout/getRouteMeta.tsx
type RouteTag (line 19) | type RouteTag =
type RouteItem (line 26) | interface RouteItem {
type Routes (line 49) | interface Routes {
type RouteMeta (line 55) | interface RouteMeta {
type TraversalContext (line 68) | type TraversalContext = RouteMeta & {
function getRouteMeta (line 72) | function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
function buildRouteMeta (line 86) | function buildRouteMeta(
function getBreadcrumbs (line 122) | function getBreadcrumbs(
FILE: src/components/Layout/useTocHighlight.tsx
constant TOP_OFFSET (line 14) | const TOP_OFFSET = 85;
function getHeaderAnchors (line 16) | function getHeaderAnchors(): HTMLAnchorElement[] {
function useTocHighlight (line 32) | function useTocHighlight() {
FILE: src/components/Logo.tsx
function Logo (line 13) | function Logo(props: SVGProps<SVGSVGElement>) {
FILE: src/components/MDX/BlogCard.tsx
type BlogCardProps (line 15) | interface BlogCardProps {
function BlogCard (line 24) | function BlogCard({title, badge, date, icon, url, children}: BlogCardPro...
FILE: src/components/MDX/Challenges/Challenge.tsx
type ChallengeProps (line 21) | interface ChallengeProps {
function Challenge (line 29) | function Challenge({
FILE: src/components/MDX/Challenges/Challenges.tsx
type ChallengesProps (line 21) | interface ChallengesProps {
type ChallengeContents (line 29) | interface ChallengeContents {
type QueuedScroll (line 82) | enum QueuedScroll {
function Challenges (line 87) | function Challenges({
FILE: src/components/MDX/Challenges/Navigation.tsx
function Navigation (line 18) | function Navigation({
FILE: src/components/MDX/Challenges/index.tsx
function Hint (line 15) | function Hint({children}: {children: React.ReactNode}) {
function Solution (line 19) | function Solution({children}: {children: React.ReactNode}) {
FILE: src/components/MDX/CodeBlock/CodeBlock.tsx
type InlineHighlight (line 23) | interface InlineHighlight {
function classNameToken (line 245) | function classNameToken(name: string): string {
function getSyntaxHighlight (line 249) | function getSyntaxHighlight(theme: any): HighlightStyle {
function getLineDecorators (line 297) | function getLineDecorators(
function getInlineDecorators (line 317) | function getInlineDecorators(
function getHighlightLines (line 365) | function getHighlightLines(meta: string): number[] {
function getInlineHighlights (line 385) | function getInlineHighlights(meta: string, code: string) {
FILE: src/components/MDX/CodeDiagram.tsx
type CodeDiagramProps (line 16) | interface CodeDiagramProps {
function CodeDiagram (line 21) | function CodeDiagram({children, flip = false}: CodeDiagramProps) {
FILE: src/components/MDX/ConsoleBlock.tsx
type LogLevel (line 18) | type LogLevel = 'warning' | 'error' | 'info';
type ConsoleBlockProps (line 20) | interface ConsoleBlockProps {
type ConsoleBlockMultiProps (line 25) | interface ConsoleBlockMultiProps {
function ConsoleBlock (line 43) | function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
function ConsoleBlockMulti (line 91) | function ConsoleBlockMulti({children}: ConsoleBlockMultiProps) {
function ConsoleLogLine (line 119) | function ConsoleLogLine({children, level}: ConsoleBlockProps) {
FILE: src/components/MDX/Diagram.tsx
type DiagramProps (line 14) | interface DiagramProps {
function Caption (line 23) | function Caption({text}: {text: string}) {
function Diagram (line 33) | function Diagram({
FILE: src/components/MDX/DiagramGroup.tsx
type DiagramGroupProps (line 14) | interface DiagramGroupProps {
function DiagramGroup (line 18) | function DiagramGroup({children}: DiagramGroupProps) {
FILE: src/components/MDX/ErrorDecoder.tsx
function replaceArgs (line 12) | function replaceArgs(
function urlify (line 37) | function urlify(str: string): React.ReactNode[] {
function parseQueryString (line 59) | function parseQueryString(search: string): Array<string | undefined> {
function ErrorDecoder (line 78) | function ErrorDecoder() {
FILE: src/components/MDX/ExpandableCallout.tsx
type CalloutVariants (line 20) | type CalloutVariants =
type ExpandableCalloutProps (line 31) | interface ExpandableCalloutProps {
function ExpandableCallout (line 115) | function ExpandableCallout({children, type = 'note'}: ExpandableCalloutP...
FILE: src/components/MDX/ExpandableExample.tsx
type ExpandableExampleProps (line 22) | interface ExpandableExampleProps {
function ExpandableExample (line 28) | function ExpandableExample({children, excerpt, type}: ExpandableExampleP...
FILE: src/components/MDX/Heading.tsx
type HeadingProps (line 15) | interface HeadingProps {
FILE: src/components/MDX/InlineCode.tsx
type InlineCodeProps (line 15) | interface InlineCodeProps {
function InlineCode (line 19) | function InlineCode({
FILE: src/components/MDX/Intro.tsx
type IntroProps (line 14) | interface IntroProps {
function Intro (line 18) | function Intro({children}: IntroProps) {
FILE: src/components/MDX/LanguagesContext.tsx
type LanguageItem (line 14) | type LanguageItem = {
type Languages (line 19) | type Languages = Array<LanguageItem>;
FILE: src/components/MDX/Link.tsx
function Link (line 18) | function Link({
FILE: src/components/MDX/MDXComponents.tsx
function CodeStep (line 49) | function CodeStep({children, step}: {children: any; step: number}) {
function LearnMore (line 183) | function LearnMore({
function ReadBlogPost (line 216) | function ReadBlogPost({path}: {path: string}) {
function Math (line 225) | function Math({children}: {children: any}) {
function MathI (line 237) | function MathI({children}: {children: any}) {
function YouWillLearn (line 249) | function YouWillLearn({
function Recipes (line 261) | function Recipes(props: any) {
function AuthorCredit (line 265) | function AuthorCredit({
function Illustration (line 300) | function Illustration({
function IllustrationBlock (line 337) | function IllustrationBlock({
type NestedTocRoot (line 388) | type NestedTocRoot = {
type NestedTocNode (line 393) | type NestedTocNode = {
function calculateNestedToc (line 398) | function calculateNestedToc(toc: Toc): NestedTocRoot {
function InlineToc (line 419) | function InlineToc() {
function InlineTocItem (line 428) | function InlineTocItem({items}: {items: Array<NestedTocNode>}) {
type TranslationProgress (line 441) | type TranslationProgress = 'complete' | 'in-progress';
function LanguageList (line 443) | function LanguageList({progress}: {progress: TranslationProgress}) {
function YouTubeIframe (line 473) | function YouTubeIframe(props: any) {
function Image (line 488) | function Image(props: any) {
method FullWidth (line 522) | FullWidth({children}: {children: any}) {
method MaxWidth (line 525) | MaxWidth({children}: {children: any}) {
FILE: src/components/MDX/PackageImport.tsx
type PackageImportProps (line 16) | interface PackageImportProps {
function PackageImport (line 20) | function PackageImport({children}: PackageImportProps) {
FILE: src/components/MDX/Recap.tsx
type RecapProps (line 15) | interface RecapProps {
function Recap (line 19) | function Recap({children}: RecapProps) {
FILE: src/components/MDX/Sandpack/ClearButton.tsx
type ClearButtonProps (line 14) | interface ClearButtonProps {
function ClearButton (line 18) | function ClearButton({onClear}: ClearButtonProps) {
FILE: src/components/MDX/Sandpack/Console.tsx
function formatStr (line 48) | function formatStr(...inputArgs: any[]): any[] {
type ConsoleData (line 92) | type ConsoleData = Array<{
constant MAX_MESSAGE_COUNT (line 98) | const MAX_MESSAGE_COUNT = 100;
FILE: src/components/MDX/Sandpack/DownloadButton.tsx
type DownloadButtonProps (line 16) | interface DownloadButtonProps {}
function subscribe (line 20) | function subscribe(cb: () => void) {
function useSupportsImportMap (line 32) | function useSupportsImportMap() {
function DownloadButton (line 43) | function DownloadButton({
FILE: src/components/MDX/Sandpack/ErrorMessage.tsx
type ErrorType (line 12) | interface ErrorType {
function ErrorMessage (line 20) | function ErrorMessage({error, ...props}: {error: ErrorType}) {
FILE: src/components/MDX/Sandpack/LoadingOverlay.tsx
constant FADE_ANIMATION_DURATION (line 17) | const FADE_ANIMATION_DURATION = 200;
FILE: src/components/MDX/Sandpack/NavigationBar.tsx
function useEvent (line 34) | function useEvent(fn: any): any {
function NavigationBar (line 51) | function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
FILE: src/components/MDX/Sandpack/Preview.tsx
type CustomPreviewProps (line 23) | type CustomPreviewProps = {
function useDebounced (line 29) | function useDebounced(value: any): any {
function Preview (line 41) | function Preview({
FILE: src/components/MDX/Sandpack/ReloadButton.tsx
type ReloadButtonProps (line 14) | interface ReloadButtonProps {
function ReloadButton (line 18) | function ReloadButton({onReload}: ReloadButtonProps) {
FILE: src/components/MDX/Sandpack/SandpackRoot.tsx
type SandpackProps (line 21) | type SandpackProps = {
function SandpackRoot (line 76) | function SandpackRoot(props: SandpackProps) {
FILE: src/components/MDX/Sandpack/createFileMap.ts
constant SUPPORTED_FILES (line 17) | const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
function splitMeta (line 22) | function splitMeta(meta: string): string[] {
FILE: src/components/MDX/Sandpack/useSandpackLint.tsx
type LintDiagnostic (line 17) | type LintDiagnostic = {
FILE: src/components/MDX/SandpackWithHTMLOutput.tsx
function createFile (line 72) | function createFile(meta: string, source: string) {
FILE: src/components/MDX/SimpleCallout.tsx
type SimpleCalloutProps (line 16) | interface SimpleCalloutProps {
function SimpleCallout (line 21) | function SimpleCallout({title, children, className}: SimpleCalloutProps) {
FILE: src/components/MDX/TeamMember.tsx
type TeamMemberProps (line 22) | interface TeamMemberProps {
function TeamMember (line 36) | function TeamMember({
FILE: src/components/MDX/TerminalBlock.tsx
type LogLevel (line 17) | type LogLevel = 'info' | 'warning' | 'error';
type TerminalBlockProps (line 19) | interface TerminalBlockProps {
function LevelText (line 24) | function LevelText({type}: {type: LogLevel}) {
function TerminalBlock (line 35) | function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
FILE: src/components/MDX/TocContext.tsx
type TocItem (line 15) | type TocItem = {
type Toc (line 20) | type Toc = Array<TocItem>;
FILE: src/components/MDX/YouWillLearnCard.tsx
type YouWillLearnCardProps (line 16) | interface YouWillLearnCardProps {
function YouWillLearnCard (line 22) | function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) {
FILE: src/components/PageHeading.tsx
type PageHeadingProps (line 20) | interface PageHeadingProps {
function PageHeading (line 30) | function PageHeading({
FILE: src/components/Search.tsx
type SearchProps (line 22) | interface SearchProps {
function Hit (line 32) | function Hit({hit, children}: any) {
function isEditingContent (line 39) | function isEditingContent(event: any) {
function useDocSearchKeyboardEvents (line 49) | function useDocSearchKeyboardEvents({
function Search (line 102) | function Search({
FILE: src/components/Seo.tsx
type SeoProps (line 18) | interface SeoProps {
function getDomain (line 32) | function getDomain(languageCode: string): string {
FILE: src/components/SocialBanner.tsx
function SocialBanner (line 16) | function SocialBanner() {
FILE: src/components/Tag.tsx
type TagProps (line 38) | interface TagProps {
function Tag (line 44) | function Tag({text, variant, className}: TagProps) {
FILE: src/pages/404.js
function NotFound (line 18) | function NotFound() {
FILE: src/pages/500.js
function NotFound (line 18) | function NotFound() {
FILE: src/pages/[[...markdownPath]].js
function Layout (line 24) | function Layout({content, toc, meta, languages}) {
function useActiveSection (line 62) | function useActiveSection() {
function reviveNodeOnClient (line 81) | function reviveNodeOnClient(parentPropertyName, val) {
function getStaticProps (line 108) | async function getStaticProps(context) {
function getStaticPaths (line 134) | async function getStaticPaths() {
FILE: src/pages/_app.tsx
function MyApp (line 32) | function MyApp({Component, pageProps}: AppProps) {
FILE: src/pages/api/md/[...path].ts
constant FOOTER (line 12) | const FOOTER = `
function handler (line 20) | function handler(req: NextApiRequest, res: NextApiResponse) {
FILE: src/pages/errors/[errorCode].tsx
type ErrorDecoderProps (line 17) | interface ErrorDecoderProps {
function ErrorDecoderPage (line 25) | function ErrorDecoderPage({
function reviveNodeOnClient (line 63) | function reviveNodeOnClient(parentPropertyName: unknown, val: any) {
FILE: src/pages/llms.txt.tsx
type RouteItem (line 13) | interface RouteItem {
type Sidebar (line 21) | interface Sidebar {
type Page (line 26) | interface Page {
type SubGroup (line 31) | interface SubGroup {
type Section (line 36) | interface Section {
function cleanSectionHeader (line 43) | function cleanSectionHeader(header: string): string {
function extractSectionedRoutes (line 55) | function extractSectionedRoutes(
function extractGroupedRoutes (line 134) | function extractGroupedRoutes(
function usesSectionHeaders (line 198) | function usesSectionHeaders(routes: RouteItem[]): boolean {
function LlmsTxt (line 267) | function LlmsTxt() {
FILE: src/utils/analytics.ts
function ga (line 16) | function ga(...args: any[]): void {
FILE: src/utils/compileMDX.ts
constant DISK_CACHE_BREAKER (line 13) | const DISK_CACHE_BREAKER = 11;
function compileMDX (line 16) | async function compileMDX(
FILE: src/utils/forwardRefWithAs.tsx
type AssignableRef (line 27) | type AssignableRef<ValueType> =
type As (line 41) | type As<BaseProps = any> = React.ElementType<BaseProps>;
type PropsWithAs (line 43) | type PropsWithAs<
type PropsFromAs (line 54) | type PropsFromAs<
type ComponentWithForwardedRef (line 60) | type ComponentWithForwardedRef<
type ComponentWithAs (line 69) | interface ComponentWithAs<ComponentType extends As, ComponentProps> {
function forwardRefWithAs (line 99) | function forwardRefWithAs<Props, ComponentType extends As>(
FILE: src/utils/prepareMDX.js
constant PREPARE_MDX_CACHE_BREAKER (line 17) | const PREPARE_MDX_CACHE_BREAKER = 3;
function prepareMDX (line 21) | function prepareMDX(rawChildren) {
function wrapChildrenInMaxWidthContainers (line 27) | function wrapChildrenInMaxWidthContainers(children) {
function getTableOfContents (line 69) | function getTableOfContents(children, depth) {
function extractHeaders (line 90) | function extractHeaders(children, depth, out) {
FILE: src/utils/processShim.js
method cwd (line 15) | cwd() {}
FILE: src/utils/toCommaSeparatedList.tsx
function toCommaSeparatedList (line 17) | function toCommaSeparatedList<Item>(
Condensed preview — 436 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (5,417K chars).
[
{
"path": ".claude/agents/docs-reviewer.md",
"chars": 806,
"preview": "---\nname: docs-reviewer\ndescription: \"Lean docs reviewer that dispatches reviews docs for a particular skill.\"\nmodel: op"
},
{
"path": ".claude/settings.json",
"chars": 719,
"preview": "{\n \"skills\": {\n \"suggest\": [\n {\n \"pattern\": \"src/content/learn/**/*.md\",\n \"skill\": \"docs-writer-l"
},
{
"path": ".claude/skills/docs-components/SKILL.md",
"chars": 11838,
"preview": "---\nname: docs-components\ndescription: Comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, etc.) for"
},
{
"path": ".claude/skills/docs-sandpack/SKILL.md",
"chars": 10723,
"preview": "---\nname: docs-sandpack\ndescription: Use when adding interactive code examples to React docs.\n---\n\n# Sandpack Patterns\n\n"
},
{
"path": ".claude/skills/docs-voice/SKILL.md",
"chars": 4983,
"preview": "---\nname: docs-voice\ndescription: Use when writing any React documentation. Provides voice, tone, and style rules for al"
},
{
"path": ".claude/skills/docs-writer-blog/SKILL.md",
"chars": 16688,
"preview": "---\nname: docs-writer-blog\ndescription: Use when writing or editing files in src/content/blog/. Provides blog post struc"
},
{
"path": ".claude/skills/docs-writer-learn/SKILL.md",
"chars": 7023,
"preview": "---\nname: docs-writer-learn\ndescription: Use when writing or editing files in src/content/learn/. Provides Learn page st"
},
{
"path": ".claude/skills/docs-writer-reference/SKILL.md",
"chars": 24981,
"preview": "---\nname: docs-writer-reference\ndescription: Reference page structure, templates, and writing patterns for src/content/r"
},
{
"path": ".claude/skills/react-expert/SKILL.md",
"chars": 10922,
"preview": "---\nname: react-expert\ndescription: Use when researching React APIs or concepts for documentation. Use when you need aut"
},
{
"path": ".claude/skills/review-docs/SKILL.md",
"chars": 1198,
"preview": "---\nname: review-docs\ndescription: Use when reviewing React documentation for structure, components, and style complianc"
},
{
"path": ".eslintignore",
"chars": 40,
"preview": "scripts\nplugins\nnext.config.js\n.claude/\n"
},
{
"path": ".eslintrc",
"chars": 1102,
"preview": "{\n \"root\": true,\n \"extends\": \"next/core-web-vitals\",\n \"parser\": \"@typescript-eslint/parser\",\n \"plugins\": [\"@typescri"
},
{
"path": ".github/ISSUE_TEMPLATE/0-bug.yml",
"chars": 979,
"preview": "name: \"🐛 Report a bug\"\ndescription: \"Report a problem on the website.\"\ntitle: \"[Bug]: \"\nlabels: [\"bug: unconfirmed\"]\nbod"
},
{
"path": ".github/ISSUE_TEMPLATE/1-typo.yml",
"chars": 1023,
"preview": "name: \"🤦 Typo or mistake\"\ndescription: \"Report a typo or mistake in the docs.\"\ntitle: \"[Typo]: \"\nlabels: [\"type: typos\"]"
},
{
"path": ".github/ISSUE_TEMPLATE/2-suggestion.yml",
"chars": 1056,
"preview": "name: \"💡 Suggestions\"\ndescription: \"Suggest a new page, section, or edit for an existing page.\"\ntitle: \"[Suggestion]: \"\n"
},
{
"path": ".github/ISSUE_TEMPLATE/3-framework.yml",
"chars": 6208,
"preview": "name: \"📄 Suggest new framework\"\ndescription: \"I am a framework author applying to be included as a recommended framework"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 398,
"preview": "contact_links:\n - name: 📃 Bugs in React\n url: https://github.com/facebook/react/issues/new/choose\n about: This is"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 284,
"preview": "<!--\n\n日本語版 (ja.react.dev) リポジトリでのPR/Issueは、日本語版固有の問題\n（翻訳や日本語版独自機能に関係するもの）のみ受け付けます。\n\n全言語に関わる問題や改善（英語部分のスペルミス、コードサンプルの修正、ビ"
},
{
"path": ".github/dependabot.yml",
"chars": 218,
"preview": "version: 2\nupdates:\n - package-ecosystem: \"npm\"\n directory: \"/\"\n schedule:\n interval: \"weekly\"\n # Disable"
},
{
"path": ".github/workflows/analyze.yml",
"chars": 3530,
"preview": "name: Analyze Bundle\n\non:\n pull_request:\n push:\n branches:\n - main # change this if your default branch is nam"
},
{
"path": ".github/workflows/analyze_comment.yml",
"chars": 1955,
"preview": "name: Analyze Bundle (Comment)\n\non:\n workflow_run:\n workflows: ['Analyze Bundle']\n types:\n - completed\n\nperm"
},
{
"path": ".github/workflows/discord_notify.yml",
"chars": 1185,
"preview": "name: Discord Notify\n\non:\n pull_request_target:\n types: [opened, ready_for_review]\n\npermissions: {}\n\njobs:\n check_m"
},
{
"path": ".github/workflows/label_core_team_prs.yml",
"chars": 1132,
"preview": "name: Label Core Team PRs\n\non:\n pull_request_target:\n\npermissions: {}\n\nenv:\n TZ: /usr/share/zoneinfo/America/Los_Angel"
},
{
"path": ".github/workflows/site_lint.yml",
"chars": 924,
"preview": "name: Site Lint / Heading ID check\n\non:\n push:\n branches:\n - main # change this if your default branch is named"
},
{
"path": ".gitignore",
"chars": 539,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n/.pnp"
},
{
"path": ".husky/pre-commit",
"chars": 58,
"preview": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nyarn lint-staged"
},
{
"path": ".prettierignore",
"chars": 20,
"preview": "src/content/**/*.md\n"
},
{
"path": ".prettierrc",
"chars": 322,
"preview": "{\n \"bracketSpacing\": false,\n \"singleQuote\": true,\n \"bracketSameLine\": true,\n \"trailingComma\": \"es5\",\n \"printWidth\":"
},
{
"path": "CLAUDE.md",
"chars": 1589,
"preview": "# CLAUDE.md\n\nThis file provides guidance to Claude Code when working with this repository.\n\n## Project Overview\n\nThis is"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3355,
"preview": "# Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and"
},
{
"path": "CONTRIBUTING.md",
"chars": 5279,
"preview": "# Contributing\n\nThank you for your interest in contributing to the React Docs!\n\n## Code of Conduct\n\nFacebook has adopted"
},
{
"path": "LICENSE-DOCS.md",
"chars": 18525,
"preview": "Attribution 4.0 International\n\n=======================================================================\n\nCreative Commons"
},
{
"path": "README.md",
"chars": 2954,
"preview": "# react.dev\n\nThis repo contains the source code and documentation powering [react.dev](https://react.dev/).\n\n> 以下はオリジナル（"
},
{
"path": "colors.js",
"chars": 2609,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "eslint-local-rules/__tests__/fixtures/src/content/basic-error.md",
"chars": 159,
"preview": "```jsx\nimport {useState} from 'react';\nfunction Counter() {\n const [count, setCount] = useState(0);\n setCount(count + "
},
{
"path": "eslint-local-rules/__tests__/fixtures/src/content/duplicate-metadata.md",
"chars": 260,
"preview": "```jsx title=\"Counter\" {expectedErrors: {'react-compiler': [99]}} {expectedErrors: {'react-compiler': [2]}}\nimport {useS"
},
{
"path": "eslint-local-rules/__tests__/fixtures/src/content/malformed-metadata.md",
"chars": 207,
"preview": "```jsx {expectedErrors: {'react-compiler': 'invalid'}}\nimport {useState} from 'react';\nfunction Counter() {\n const [cou"
},
{
"path": "eslint-local-rules/__tests__/fixtures/src/content/mixed-language.md",
"chars": 67,
"preview": "```bash\nsetCount()\n```\n\n```txt\nimport {useState} from 'react';\n```\n"
},
{
"path": "eslint-local-rules/__tests__/fixtures/src/content/stale-expected-error.md",
"chars": 99,
"preview": "```jsx {expectedErrors: {'react-compiler': [3]}}\nfunction Hello() {\n return <h1>Hello</h1>;\n}\n```\n"
},
{
"path": "eslint-local-rules/__tests__/fixtures/src/content/suppressed-error.md",
"chars": 201,
"preview": "```jsx {expectedErrors: {'react-compiler': [4]}}\nimport {useState} from 'react';\nfunction Counter() {\n const [count, se"
},
{
"path": "eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js",
"chars": 3455,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "eslint-local-rules/index.js",
"chars": 365,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "eslint-local-rules/package.json",
"chars": 241,
"preview": "{\n \"name\": \"eslint-plugin-local-rules\",\n \"version\": \"0.0.0\",\n \"main\": \"index.js\",\n \"private\": \"true\",\n \"scripts\": {"
},
{
"path": "eslint-local-rules/parser.js",
"chars": 232,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "eslint-local-rules/rules/diagnostics.js",
"chars": 2047,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "eslint-local-rules/rules/lint-markdown-code-blocks.js",
"chars": 5683,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "eslint-local-rules/rules/markdown.js",
"chars": 3195,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "eslint-local-rules/rules/metadata.js",
"chars": 9156,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "eslint-local-rules/rules/react-compiler.js",
"chars": 3114,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "next-env.d.ts",
"chars": 213,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": "next.config.js",
"chars": 2879,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "package.json",
"chars": 4420,
"preview": "{\n \"name\": \"react-dev\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"license\": \"CC\",\n \"scripts\": {\n \"analyze\": \"ANAL"
},
{
"path": "plugins/gatsby-remark-japanese-fix/index.js",
"chars": 860,
"preview": "const toString = require('mdast-util-to-string');\nconst visit = require('unist-util-visit');\n\nconst hasJapaneseCharacter"
},
{
"path": "plugins/gatsby-remark-japanese-fix/package.json",
"chars": 65,
"preview": "{\n \"name\": \"gatsby-remark-japanese-fix\",\n \"version\": \"0.0.1\"\n}\n"
},
{
"path": "plugins/markdownToHtml.js",
"chars": 1090,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "plugins/remark-header-custom-ids.js",
"chars": 2714,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "plugins/remark-smartypants.js",
"chars": 2507,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "postcss.config.js",
"chars": 542,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "public/.well-known/atproto-did",
"chars": 32,
"preview": "did:plc:uorpbnp2q32vuvyeruwauyhe"
},
{
"path": "public/browserconfig.xml",
"chars": 246,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig>\n <msapplication>\n <tile>\n <square150x150logo"
},
{
"path": "public/html/single-file-example.html",
"chars": 1325,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\" />\n <title>Hello World</title>\n <script src=\"https://unp"
},
{
"path": "public/js/jsfiddle-integration-babel.js",
"chars": 689,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "public/js/jsfiddle-integration.js",
"chars": 700,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "public/robots.txt",
"chars": 24,
"preview": "User-agent: *\nDisallow:\n"
},
{
"path": "public/site.webmanifest",
"chars": 436,
"preview": "{\n \"name\": \"React\",\n \"short_name\": \"React\",\n \"icons\": [\n {\n \"src\": \"/android-chrome-192x192.p"
},
{
"path": "scripts/copyright.js",
"chars": 1946,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "scripts/deadLinkChecker.js",
"chars": 11126,
"preview": "#!/usr/bin/env node\n/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under t"
},
{
"path": "scripts/downloadFonts.mjs",
"chars": 2718,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport { exec } from 'child_process';\nimport { mkdir, promi"
},
{
"path": "scripts/generateRss.js",
"chars": 326,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "scripts/headingIDHelpers/generateHeadingIDs.js",
"chars": 2968,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "scripts/headingIDHelpers/validateHeadingIDs.js",
"chars": 1582,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "scripts/headingIDHelpers/walk.js",
"chars": 745,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "scripts/headingIdLinter.js",
"chars": 1017,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Breadcrumbs.tsx",
"chars": 1859,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Button.tsx",
"chars": 1487,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/ButtonLink.tsx",
"chars": 1632,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/DocsFooter.tsx",
"chars": 3116,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/ErrorDecoderContext.tsx",
"chars": 1021,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/ExternalLink.tsx",
"chars": 600,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconArrow.tsx",
"chars": 1225,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconArrowSmall.tsx",
"chars": 1567,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconBsky.tsx",
"chars": 1115,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconCanary.tsx",
"chars": 3838,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconChevron.tsx",
"chars": 1974,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconClose.tsx",
"chars": 788,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconCodeBlock.tsx",
"chars": 856,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconCopy.tsx",
"chars": 2269,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconDeepDive.tsx",
"chars": 1942,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconDownload.tsx",
"chars": 2083,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconError.tsx",
"chars": 768,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconExperimental.tsx",
"chars": 3850,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconFacebookCircle.tsx",
"chars": 975,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconGitHub.tsx",
"chars": 1109,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconHamburger.tsx",
"chars": 850,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconHint.tsx",
"chars": 2012,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconInstagram.tsx",
"chars": 2186,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconLink.tsx",
"chars": 852,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconNavArrow.tsx",
"chars": 2016,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconNewPage.tsx",
"chars": 2177,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconNote.tsx",
"chars": 1540,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconPitfall.tsx",
"chars": 2084,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconRestart.tsx",
"chars": 2634,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconRocket.tsx",
"chars": 3284,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconRss.tsx",
"chars": 803,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconSearch.tsx",
"chars": 895,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconSolution.tsx",
"chars": 1298,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconTerminal.tsx",
"chars": 1256,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconThreads.tsx",
"chars": 2527,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconTwitter.tsx",
"chars": 826,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Icon/IconWarning.tsx",
"chars": 1401,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/Footer.tsx",
"chars": 31021,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/HomeContent.js",
"chars": 121162,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/Page.tsx",
"chars": 5881,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/Sidebar/SidebarButton.tsx",
"chars": 2006,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/Sidebar/SidebarLink.tsx",
"chars": 4015,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/Sidebar/SidebarRouteTree.tsx",
"chars": 5781,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/Sidebar/index.tsx",
"chars": 395,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/SidebarNav/SidebarNav.tsx",
"chars": 2050,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/SidebarNav/index.tsx",
"chars": 304,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/Toc.tsx",
"chars": 2491,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/TopNav/BrandMenu.tsx",
"chars": 4878,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/TopNav/TopNav.tsx",
"chars": 22517,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/TopNav/index.tsx",
"chars": 296,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/getRouteMeta.tsx",
"chars": 3588,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Layout/useTocHighlight.tsx",
"chars": 2383,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Logo.tsx",
"chars": 820,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/BlogCard.tsx",
"chars": 4943,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Challenges/Challenge.tsx",
"chars": 4182,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Challenges/Challenges.tsx",
"chars": 4707,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Challenges/Navigation.tsx",
"chars": 4675,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Challenges/index.tsx",
"chars": 527,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/CodeBlock/CodeBlock.tsx",
"chars": 11542,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/CodeBlock/index.tsx",
"chars": 1289,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/CodeDiagram.tsx",
"chars": 1450,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/ConsoleBlock.tsx",
"chars": 5264,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Diagram.tsx",
"chars": 1585,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/DiagramGroup.tsx",
"chars": 603,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/ErrorDecoder.tsx",
"chars": 3528,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/ExpandableCallout.tsx",
"chars": 4230,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/ExpandableExample.tsx",
"chars": 4004,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Heading.tsx",
"chars": 3145,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/InlineCode.tsx",
"chars": 1016,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Intro.tsx",
"chars": 553,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/LanguagesContext.tsx",
"chars": 489,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Link.tsx",
"chars": 1993,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/MDXComponents.module.css",
"chars": 889,
"preview": "/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\n/* Stop purging. */\n.markdown p {\n @apply mb-4 leading-7 wh"
},
{
"path": "src/components/MDX/MDXComponents.tsx",
"chars": 15639,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/PackageImport.tsx",
"chars": 1188,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Recap.tsx",
"chars": 557,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/ClearButton.tsx",
"chars": 837,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/Console.tsx",
"chars": 7655,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/CustomPreset.tsx",
"chars": 4162,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/DownloadButton.tsx",
"chars": 3091,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/ErrorMessage.tsx",
"chars": 768,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/LoadingOverlay.tsx",
"chars": 3863,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/NavigationBar.tsx",
"chars": 8084,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx",
"chars": 893,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx",
"chars": 1057,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/Preview.tsx",
"chars": 7266,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/ReloadButton.tsx",
"chars": 850,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/SandpackRoot.tsx",
"chars": 2410,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/Themes.tsx",
"chars": 1181,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/createFileMap.ts",
"chars": 3813,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/index.tsx",
"chars": 3044,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/runESLint.tsx",
"chars": 1972,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/template.ts",
"chars": 1341,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/Sandpack/useSandpackLint.tsx",
"chars": 1500,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/SandpackWithHTMLOutput.tsx",
"chars": 2472,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/SimpleCallout.tsx",
"chars": 981,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/TeamMember.tsx",
"chars": 4444,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/TerminalBlock.tsx",
"chars": 2783,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/TocContext.tsx",
"chars": 491,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/MDX/YouWillLearnCard.tsx",
"chars": 1238,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/PageHeading.tsx",
"chars": 2325,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Search.tsx",
"chars": 3896,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Seo.tsx",
"chars": 6311,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/SocialBanner.tsx",
"chars": 1591,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/components/Tag.tsx",
"chars": 1233,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "src/content/blog/2020/12/21/data-fetching-with-react-server-components.md",
"chars": 1259,
"preview": "---\ntitle: \"バンドルサイズゼロの React Server Components の紹介\"\nauthor: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markba"
},
{
"path": "src/content/blog/2021/06/08/the-plan-for-react-18.md",
"chars": 4541,
"preview": "---\ntitle: \"React 18に向けてのプラン\"\nauthor: Andrew Clark, Brian Vaughn, Christine Abernathy, Dan Abramov, Rachel Nabors, Rick "
},
{
"path": "src/content/blog/2021/12/17/react-conf-2021-recap.md",
"chars": 9517,
"preview": "---\ntitle: \"React Conf 2021 振り返り\"\nauthor: Jesslyn Tannady and Rick Hanlon\ndate: 2021/12/17\ndescription: 先週、第 6 回の React "
},
{
"path": "src/content/blog/2022/03/08/react-18-upgrade-guide.md",
"chars": 13744,
"preview": "---\ntitle: \"How to Upgrade to React 18\"\nauthor: Rick Hanlon\ndate: 2022/03/08\ndescription: リリース告知の記事でお伝えしたとおり、React 18 には"
},
{
"path": "src/content/blog/2022/03/29/react-v18.md",
"chars": 27167,
"preview": "---\ntitle: \"React v18.0\"\nauthor: The React Team\ndate: 2022/03/08\ndescription: React 18 が npm で利用可能になりました！ 前回の投稿にて、アプリを R"
},
{
"path": "src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md",
"chars": 7231,
"preview": "---\ntitle: \"React Labs: 私達のこれまでの取り組み - 2022年6月版\"\nauthor: Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh St"
},
{
"path": "src/content/blog/2023/03/16/introducing-react-dev.md",
"chars": 18875,
"preview": "---\ntitle: \"react.dev のご紹介\"\nauthor: Dan Abramov and Rachel Nabors\ndate: 2023/03/16\ndescription: 本日、React とそのドキュメントの新しいホー"
},
{
"path": "src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md",
"chars": 10164,
"preview": "---\ntitle: \"React Labs: 私達のこれまでの取り組み - 2023年3月版\"\nauthor: Joseph Savona, Josh Story, Lauren Tan, Mengdi Chen, Samuel Susl"
},
{
"path": "src/content/blog/2023/05/03/react-canaries.md",
"chars": 7318,
"preview": "---\ntitle: \"React Canary: Meta 外での段階的な新機能導入\"\nauthor: Dan Abramov, Sophie Alpert, Rick Hanlon, Sebastian Markbage, and An"
},
{
"path": "src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md",
"chars": 9807,
"preview": "---\ntitle: \"React Labs: 私達のこれまでの取り組み - 2024年2月版\"\nauthor: Joseph Savona, Ricky Hanlon, Andrew Clark, Matt Carroll, and Da"
},
{
"path": "src/content/blog/2024/04/25/react-19-upgrade-guide.md",
"chars": 24886,
"preview": "---\ntitle: \"React 19 アップグレードガイド\"\nauthor: Ricky Hanlon\ndate: 2024/04/25\ndescription: React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、"
},
{
"path": "src/content/blog/2024/05/22/react-conf-2024-recap.md",
"chars": 9352,
"preview": "---\ntitle: \"React Conf 2024 振り返り\"\nauthor: Ricky Hanlon\ndate: 2024/05/22\ndescription: 先週、ネバダ州ヘンダーソンで 700 人以上の参加者が集まり、最新の "
},
{
"path": "src/content/blog/2024/10/21/react-compiler-beta-release.md",
"chars": 7213,
"preview": "---\ntitle: \"React Compiler Beta リリース\"\nauthor: Lauren Tan\ndate: 2024/10/21\ndescription: React Conf 2024 で、React Compiler "
},
{
"path": "src/content/blog/2024/12/05/react-19.md",
"chars": 26499,
"preview": "---\ntitle: \"React v19\"\nauthor: The React Team\ndate: 2024/12/05\ndescription: React 19 が npm で利用可能になりました！ この投稿では React 19 "
},
{
"path": "src/content/blog/2025/02/14/sunsetting-create-react-app.md",
"chars": 14286,
"preview": "---\ntitle: \"Create React App の非推奨化\"\nauthor: Matt Carroll and Ricky Hanlon\ndate: 2025/02/14\ndescription: 本日、新規アプリに対して Cre"
},
{
"path": "src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md",
"chars": 327186,
"preview": "---\ntitle: \"React Labs: ビュー遷移、Activity、その他もろもろ\"\nauthor: Ricky Hanlon\ndate: 2025/04/23\ndescription: React Labs 記事では、現在活発に"
},
{
"path": "src/content/blog/2025/10/01/react-19-2.md",
"chars": 12838,
"preview": "---\ntitle: \"React 19.2\"\nauthor: The React Team\ndate: 2025/10/01\ndescription: React 19.2 では Activity、パフォーマンストラック、useEffec"
},
{
"path": "src/content/blog/2025/10/07/introducing-the-react-foundation.md",
"chars": 3253,
"preview": "---\ntitle: \"React Foundation 設立\"\nauthor: Seth Webster, Matt Carroll, Joe Savona\ndate: 2025/10/07\ndescription: 本日、React F"
},
{
"path": "src/content/blog/2025/10/07/react-compiler-1.md",
"chars": 10539,
"preview": "---\ntitle: \"React Compiler v1.0\"\nauthor: Lauren Tan, Joe Savona, and Mofei Zhang\ndate: 2025/10/07\ndescription: 本日、コンパイラの"
},
{
"path": "src/content/blog/2025/10/16/react-conf-2025-recap.md",
"chars": 10019,
"preview": "---\ntitle: \"React Conf 2025 振り返り\"\nauthor: Matt Carroll and Ricky Hanlon\ndate: 2025/10/16\ndescription: 先週 React Conf 2025"
},
{
"path": "src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md",
"chars": 7278,
"preview": "---\ntitle: \"React Server Components における重大なセキュリティ脆弱性\"\nauthor: The React Team\ndate: 2025/12/03\ndescription: React Server "
},
{
"path": "src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md",
"chars": 8123,
"preview": "---\ntitle: \"React Server Components におけるサービス拒否攻撃とソースコード露出\"\nauthor: The React Team\ndate: 2025/12/11\ndescription: セキュリティ研究"
}
]
// ... and 236 more files (download for full content)
About this extraction
This page contains the full source code of the reactjs/ja.reactjs.org GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 436 files (3.8 MB), approximately 1.0M tokens, and a symbol index with 312 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.