Showing preview only (6,113K chars total). Download the full file or copy to clipboard to get everything.
Repository: reactjs/ko.react.dev
Branch: main
Commit: 9067b769996d
Files: 476
Total size: 4.8 MB
Directory structure:
gitextract_nwqdaqk2/
├── .claude/
│ ├── agents/
│ │ └── docs-reviewer.md
│ ├── settings.json
│ └── skills/
│ ├── docs-components/
│ │ └── SKILL.md
│ ├── docs-rsc-sandpack/
│ │ └── 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
│ └── write/
│ └── SKILL.md
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .github/
│ ├── CODEOWNERS
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── 0-bug.yml
│ │ ├── 1-typo.yml
│ │ ├── 3-framework.yml
│ │ ├── config.yml
│ │ ├── need-translation.md
│ │ └── term.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ └── workflows/
│ ├── analyze.yml
│ ├── analyze_comment.yml
│ ├── site_lint.yml
│ ├── textlint_lint.yml
│ └── textlint_test.yml
├── .gitignore
├── .husky/
│ ├── common.sh
│ └── pre-commit
├── .prettierignore
├── .prettierrc
├── .textlintrc.js
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── 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
├── eslint.config.mjs
├── lint-staged.config.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── plugins/
│ ├── 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/
│ ├── buildRscWorker.mjs
│ ├── 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/
│ │ │ ├── Feedback.tsx
│ │ │ ├── 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
│ │ │ │ ├── ResetButton.tsx
│ │ │ │ ├── SandpackRSCRoot.tsx
│ │ │ │ ├── SandpackRoot.tsx
│ │ │ │ ├── Themes.tsx
│ │ │ │ ├── createFileMap.ts
│ │ │ │ ├── index.tsx
│ │ │ │ ├── runESLint.tsx
│ │ │ │ ├── sandpack-rsc/
│ │ │ │ │ ├── RscFileBridge.tsx
│ │ │ │ │ └── sandbox-code/
│ │ │ │ │ └── src/
│ │ │ │ │ ├── __react_refresh_init__.js
│ │ │ │ │ ├── rsc-client.js
│ │ │ │ │ ├── rsc-server.js
│ │ │ │ │ ├── webpack-shim.js
│ │ │ │ │ └── worker-bundle.dist.js
│ │ │ │ ├── template.ts
│ │ │ │ ├── templateRSC.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/
│ │ │ │ │ ├── 21/
│ │ │ │ │ │ └── react-compiler-rc.md
│ │ │ │ │ └── 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
│ │ │ ├── 2026/
│ │ │ │ └── 02/
│ │ │ │ └── 24/
│ │ │ │ └── the-react-foundation.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
│ │ │ ├── rsc-sandbox-test.md
│ │ │ ├── scaling-up-with-reducer-and-context.md
│ │ │ ├── separating-events-from-effects.md
│ │ │ ├── setup.md
│ │ │ ├── sharing-state-between-components.md
│ │ │ ├── start-a-new-react-project.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
│ │ │ │ ├── createFactory.md
│ │ │ │ ├── createRef.md
│ │ │ │ ├── experimental_taintObjectReference.md
│ │ │ │ ├── experimental_taintUniqueValue.md
│ │ │ │ ├── experimental_useEffectEvent.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
│ ├── 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/
│ ├── data/
│ │ ├── rules/
│ │ │ └── translateGlossary.js
│ │ └── utils/
│ │ ├── errMsg.spec.js
│ │ ├── is.spec.js
│ │ └── strip.spec.js
│ ├── generators/
│ │ └── genTranslateGlossaryDocs.js
│ ├── rules/
│ │ └── translateGlossary.js
│ ├── tests/
│ │ ├── rules/
│ │ │ └── translateGlossary.spec.js
│ │ └── utils/
│ │ ├── errMsg.spec.js
│ │ ├── is.spec.js
│ │ └── strip.spec.js
│ └── utils/
│ ├── errMsg.js
│ ├── is.js
│ └── strip.js
├── tsconfig.json
├── vercel.json
└── wiki/
├── best-practices-for-translation.md
├── textlint-guide.md
├── translate-glossary-legacy.md
├── translate-glossary.md
└── universal-style-guide.md
================================================
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-rsc-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-rsc-sandpack/SKILL.md
================================================
---
name: docs-rsc-sandpack
description: Use when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC>, or when modifying the RSC sandpack infrastructure.
---
# RSC Sandpack Patterns
For general Sandpack conventions (code style, naming, file naming, line highlighting, hidden files, CSS guidelines), see `/docs-sandpack`. This skill covers only RSC-specific patterns.
## Quick Start Template
Minimal single-file `<SandpackRSC>` example:
```mdx
<SandpackRSC>
` ` `js src/App.js
export default function App() {
return <h1>Hello from a Server Component!</h1>;
}
` ` `
</SandpackRSC>
```
---
## How It Differs from `<Sandpack>`
| Feature | `<Sandpack>` | `<SandpackRSC>` |
|---------|-------------|-----------------|
| Execution model | All code runs in iframe | Server code runs in Web Worker, client code in iframe |
| `'use client'` directive | Ignored (everything is client) | Required to mark client components |
| `'use server'` directive | Not supported | Marks Server Functions callable from client |
| `async` components | Not supported | Supported (server components can be async) |
| External dependencies | Supported via `package.json` | Not supported (only React + react-dom) |
| Entry point | `App.js` with `export default` | `src/App.js` with `export default` |
| Component tag | `<Sandpack>` | `<SandpackRSC>` |
---
## File Directives
Files are classified by the directive at the top of the file:
| Directive | Where it runs | Rules |
|-----------|--------------|-------|
| (none) | Web Worker (server) | Default. Can be `async`. Can import other server files. Cannot use hooks, event handlers, or browser APIs. |
| `'use client'` | Sandpack iframe (browser) | Must be first statement. Can use hooks, event handlers, browser APIs. Cannot be `async`. Cannot import server files. |
| `'use server'` | Web Worker (server) | Marks Server Functions. Can be module-level (all exports are actions) or function-level. Callable from client via props or form `action`. |
---
## Common Patterns
### 1. Server + Client Components
```mdx
<SandpackRSC>
` ` `js src/App.js
import Counter from './Counter';
export default function App() {
return (
<div>
<h1>Server-rendered heading</h1>
<Counter />
</div>
);
}
` ` `
` ` `js src/Counter.js
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
` ` `
</SandpackRSC>
```
### 2. Async Server Component with Suspense
```mdx
<SandpackRSC>
` ` `js src/App.js
import { Suspense } from 'react';
import Albums from './Albums';
export default function App() {
return (
<Suspense fallback={<p>Loading...</p>}>
<Albums />
</Suspense>
);
}
` ` `
` ` `js src/Albums.js
async function fetchAlbums() {
await new Promise(resolve => setTimeout(resolve, 1000));
return ['Abbey Road', 'Let It Be', 'Revolver'];
}
export default async function Albums() {
const albums = await fetchAlbums();
return (
<ul>
{albums.map(album => (
<li key={album}>{album}</li>
))}
</ul>
);
}
` ` `
</SandpackRSC>
```
### 3. Server Functions (Actions)
```mdx
<SandpackRSC>
` ` `js src/App.js
import { addLike, getLikeCount } from './actions';
import LikeButton from './LikeButton';
export default async function App() {
const count = await getLikeCount();
return (
<div>
<p>Likes: {count}</p>
<LikeButton addLike={addLike} />
</div>
);
}
` ` `
` ` `js src/actions.js
'use server';
let count = 0;
export async function addLike() {
count++;
}
export async function getLikeCount() {
return count;
}
` ` `
` ` `js src/LikeButton.js
'use client';
export default function LikeButton({ addLike }) {
return (
<form action={addLike}>
<button type="submit">Like</button>
</form>
);
}
` ` `
</SandpackRSC>
```
---
## File Structure Requirements
### Entry Point
- **`src/App.js` is required** as the main entry point
- Must have `export default` (function component)
- Case-insensitive fallback: `src/app.js` also works
### Auto-Injected Infrastructure Files
These files are automatically injected by `sandpack-rsc-setup.ts` and should never be included in MDX:
| File | Purpose |
|------|---------|
| `/src/index.js` | Bootstraps the RSC pipeline |
| `/src/rsc-client.js` | Client bridge — creates Worker, consumes Flight stream |
| `/src/rsc-server.js` | Wraps pre-bundled worker runtime as ES module |
| `/node_modules/__webpack_shim__/index.js` | Minimal webpack compatibility layer |
| `/node_modules/__rsdw_client__/index.js` | `react-server-dom-webpack/client` as local dependency |
### No External Dependencies
`<SandpackRSC>` does not support external npm packages. Only `react` and `react-dom` are available. Do not include `package.json` in RSC examples.
---
## Architecture Reference
### Three-Layer Architecture
```
react.dev page (Next.js)
┌─────────────────────────────────────────┐
│ <SandpackRSC> │
│ ┌─────────┐ ┌──────────────────────┐ │
│ │ Editor │ │ Preview (iframe) │ │
│ │ App.js │ │ Client React app │ │
│ │ (edit) │ │ consumes Flight │ │
│ │ │ │ stream from Worker │ │
│ └─────────┘ └──────────┬───────────┘ │
└───────────────────────────┼─────────────┘
│ postMessage
┌───────────────────────────▼─────────────┐
│ Web Worker (Blob URL) │
│ - React server build (pre-bundled) │
│ - react-server-dom-webpack/server │
│ - webpack shim │
│ - User server code (Sucrase → CJS) │
└─────────────────────────────────────────┘
```
### Key Source Files
| File | Purpose |
|-----------------------------------------------------------------|--------------------------------------------------------------------------------|
| `src/components/MDX/Sandpack/sandpack-rsc/RscFileBridge.tsx` | Monitors Sandpack; posts raw files to iframe |
| `src/components/MDX/Sandpack/SandpackRSCRoot.tsx` | SandpackProvider setup, custom bundler URL, UI layout |
| `src/components/MDX/Sandpack/templateRSC.ts` | RSC template files |
| `.../sandbox-code/src/__react_refresh_init__.js` | React Refresh shim |
| `.../sandbox-code/src/rsc-server.js` | Worker runtime: module system, Sucrase compilation, `renderToReadableStream()` |
| `.../sandbox-code/src/rsc-client.source.js` | Client bridge: Worker creation, file classification, Flight stream consumption |
| `.../sandbox-code/src/webpack-shim.js` | Minimal `__webpack_require__` / `__webpack_module_cache__` shim |
| `.../sandbox-code/src/worker-bundle.dist.js` | Pre-bundled IIFE (generated): React server + RSDW/server + Sucrase |
| `scripts/buildRscWorker.mjs` | esbuild script: bundles rsc-server.js into worker-bundle.dist.js |
---
## Build System
### Rebuilding the Worker Bundle
After modifying `rsc-server.js` or `webpack-shim.js`:
```bash
node scripts/buildRscWorker.mjs
```
This runs esbuild with:
- `format: 'iife'`, `platform: 'browser'`
- `conditions: ['react-server', 'browser']` (activates React server export conditions)
- `minify: true`
- Prepends `webpack-shim.js` to the output
### Raw-Loader Configuration
In `templateRSC.js` files are loaded as raw strings with the `!raw-loader`.
The strings are necessary to provide to Sandpack as local files (skips Sandpack bundling).
### Development Commands
```bash
node scripts/buildRscWorker.mjs # Rebuild worker bundle after source changes
yarn dev # Start dev server to test examples
```
================================================
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: .claude/skills/write/SKILL.md
================================================
---
name: write
description: Use when creating new React documentation pages or updating existing ones. Accepts instructions like "add optimisticKey reference docs", "update ViewTransition with Activity", or "transition learn docs".
---
# Documentation Writer
Orchestrates research, writing, and review for React documentation.
## Invocation
```
/write add optimisticKey → creates new reference docs
/write update ViewTransition Activity → updates ViewTransition docs to cover Activity
/write transition learn docs → creates new learn docs for transitions
/write blog post for React 20 → creates a new blog post
```
## Workflow
```dot
digraph write_flow {
rankdir=TB;
"Parse intent" [shape=box];
"Research (parallel)" [shape=box];
"Synthesize plan" [shape=box];
"Write docs" [shape=box];
"Review docs" [shape=box];
"Issues found?" [shape=diamond];
"Done" [shape=doublecircle];
"Parse intent" -> "Research (parallel)";
"Research (parallel)" -> "Synthesize plan";
"Synthesize plan" -> "Write docs";
"Write docs" -> "Review docs";
"Review docs" -> "Issues found?";
"Issues found?" -> "Write docs" [label="yes - fix"];
"Issues found?" -> "Done" [label="no"];
}
```
### Step 1: Parse Intent
Determine from the user's instruction:
| Field | How to determine |
|-------|------------------|
| **Action** | "add"/"create"/"new" = new page; "update"/"edit"/"with" = modify existing |
| **Topic** | The React API or concept (e.g., `optimisticKey`, `ViewTransition`, `transitions`) |
| **Doc type** | "reference" (default for APIs/hooks/components), "learn" (for concepts/guides), "blog" (for announcements) |
| **Target file** | For updates: find existing file in `src/content/`. For new: determine path from doc type |
If the intent is ambiguous, ask the user to clarify before proceeding.
### Step 2: Research (Parallel Agents)
Spawn these agents **in parallel**:
#### Agent 1: React Expert Research
Use a Task agent (subagent_type: `general-purpose`) to invoke `/react-expert <topic>`. This researches the React source code, tests, PRs, issues, and type signatures.
**Prompt:**
```
Invoke the /react-expert skill for <TOPIC>. Follow the skill's full workflow:
setup the React repo, dispatch all 6 research agents in parallel, synthesize
results, and save to .claude/research/<topic>.md. Return the full research document.
```
#### Agent 2: Existing Docs Audit
Use a Task agent (subagent_type: `Explore`) to find and read existing documentation for the topic.
**Prompt:**
```
Find all existing documentation related to <TOPIC> in this repo:
1. Search src/content/ for files mentioning <TOPIC>
2. Read any matching files fully
3. For updates: identify what sections exist and what's missing
4. For new pages: identify related pages to understand linking/cross-references
5. Check src/sidebarLearn.json and src/sidebarReference.json for navigation placement
Return: list of existing files with summaries, navigation structure, and gaps.
```
#### Agent 3: Use Case Research
Use a Task agent (subagent_type: `general-purpose`) with web search to find common use cases and patterns.
**Prompt:**
```
Search the web for common use cases and patterns for React's <TOPIC>.
Focus on:
1. Real-world usage patterns developers actually need
2. Common mistakes or confusion points
3. Migration patterns (if replacing an older API)
4. Framework integration patterns (Next.js, Remix, etc.)
Return a summary of the top 5-8 use cases with brief code sketches.
Do NOT search Stack Overflow. Focus on official docs, GitHub discussions,
and high-quality technical blogs.
```
### Step 3: Synthesize Writing Plan
After all research agents complete, create a writing plan that includes:
1. **Page type** (from docs-writer-reference decision tree or learn/blog type)
2. **File path** for the new or updated file
3. **Outline** with section headings matching the appropriate template
4. **Content notes** for each section, drawn from research:
- API signature and parameters (from react-expert types)
- Usage examples (from react-expert tests + use case research)
- Caveats and pitfalls (from react-expert warnings/errors/issues)
- Cross-references to related pages (from docs audit)
5. **Navigation changes** needed (sidebar JSON updates)
Present this plan to the user and confirm before proceeding.
### Step 4: Write Documentation
Dispatch a Task agent (subagent_type: `general-purpose`) to write the documentation.
**The agent prompt MUST include:**
1. The full writing plan from Step 3
2. An instruction to invoke the appropriate skill:
- `/docs-writer-reference` for reference pages
- `/docs-writer-learn` for learn pages
- `/docs-writer-blog` for blog posts
3. An instruction to invoke `/docs-components` for MDX component patterns
4. An instruction to invoke `/docs-sandpack` if adding interactive code examples
5. The research document content (key findings, not the full dump)
**Prompt template:**
```
You are writing React documentation. Follow these steps:
1. Invoke /docs-writer-<TYPE> to load the page template and conventions
2. Invoke /docs-components to load MDX component patterns
3. Invoke /docs-sandpack if you need interactive code examples
4. Write the documentation following the plan below
PLAN:
<writing plan from Step 3>
RESEARCH FINDINGS:
<key findings from Step 2 agents>
Write the file to: <target file path>
Also update <sidebar JSON> if adding a new page.
```
### Step 5: Review Documentation
Invoke `/review-docs` on the written files. This dispatches parallel review agents checking:
- Structure compliance (docs-writer-*)
- Voice and style (docs-voice)
- Component usage (docs-components)
- Sandpack patterns (docs-sandpack)
### Step 6: Fix Issues
If the review finds issues:
1. Present the review checklist to the user
2. Fix the issues identified
3. Re-run `/review-docs` on the fixed files
4. Repeat until clean
## Important Rules
- **Always research before writing.** Never write docs from LLM knowledge alone.
- **Always confirm the plan** with the user before writing.
- **Always review** with `/review-docs` after writing.
- **Match existing patterns.** Read neighboring docs to match style and depth.
- **Update navigation.** New pages need sidebar entries.
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
================================================
FILE: .eslintignore
================================================
scripts
plugins
next.config.js
.claude/
worker-bundle.dist.js
================================================
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: .gitattributes
================================================
# https://git-scm.com/docs/gitattributes
# Ensure consistent EOL(LF) for all files that Git considers text files.
* text=auto eol=lf
================================================
FILE: .github/CODEOWNERS
================================================
* @hg-pyun @gnujoow @eomttt @lumirlumir
================================================
FILE: .github/FUNDING.yml
================================================
github: [lumirlumir]
================================================
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/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/ISSUE_TEMPLATE/need-translation.md
================================================
---
name: 번역 필요
about: 번역이 필요한 문서에 대해 이 템플릿을 사용해주세요
title: '[번역 필요]: '
labels: 'need translation'
assignees: ''
---
## Summary
<!-- 번역이 필요한 부분의 요약 -->
## Page
<!-- 번역이 필요한 문서의 페이지 -->
<!-- 예시: https://ko.react.dev/reference/react/useState#parameters -->
## Details
<!-- 번역이 필요한 부분의 상세 내용 -->
================================================
FILE: .github/ISSUE_TEMPLATE/term.md
================================================
---
name: Term
about: 문서에서 사용되는 용어 번역에 논의가 필요한 경우 이 템플릿을 사용해주세요
title: ''
labels: discussion, term
assignees: ''
---
## 논의하고자 하는 용어
## 해당 용어가 등장하는 원문의 문장
---
## 논의가 완료된 후
1. 아래 코드를 업데이트 해주세요.
- [ ] [`/textlint/data/rules/translateGlossary.js`](https://github.com/reactjs/ko.react.dev/blob/main/textlint/data/rules/translateGlossary.js)
2. 용어 사전에 업데이트된 내역이 정상 반영되었나 확인해주세요. (해당 내역은 husky의 pre-commit 훅을 통해 자동 업데이트 됩니다.)
- [ ] [`/wiki/translate-glossary.md`](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md)
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--
PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다!
기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요.
-->
# <!-- 제목을 작성해주세요. -->
<!--
어떤 종류의 PR인지 상세 내용을 작성해주세요.
-->
## 필수 확인 사항
- [ ] [기여자 행동 강령 규약<sup>Code of Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md)
- [ ] [기여 가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md)
- [ ] [공통 스타일 가이드<sup>Universal Style Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md)
- [ ] [번역을 위한 모범 사례<sup>Best Practices for Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md)
- [ ] [번역 용어 정리<sup>Translate Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md)
- [ ] [`textlint` 가이드<sup>Textlint Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md)
- [ ] [맞춤법 검사<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/)
## 선택 확인 사항
- [ ] 번역 초안 작성<sup>Draft Translation</sup>
- [ ] 리뷰 반영<sup>Resolve Reviews</sup>
================================================
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/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
================================================
FILE: .github/workflows/textlint_lint.yml
================================================
name: Textlint Lint
on:
push:
branches:
- main
paths:
- 'src/**/*.md'
- 'textlint/**/*.js'
- '.github/workflows/textlint_lint.yml'
- 'package.json'
pull_request:
types:
- opened
- synchronize
- reopened
paths:
- 'src/**/*.md'
- 'textlint/**/*.js'
- '.github/workflows/textlint_lint.yml'
- 'package.json'
jobs:
Lint:
runs-on: ubuntu-latest
steps:
- name: Set up checkout
uses: actions/checkout@v4
- name: Set up node
uses: actions/setup-node@v4
with:
node-version: 20.x
cache: yarn
- name: Set up cache
uses: actions/cache@v4
with:
path: ~/.yarn-cache
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
- name: Install dependencies
run: yarn install --frozen-lockfile
# The `--frozen-lockfile` flag in Yarn ensures that dependencies are installed without modifying the `yarn.lock` file. It is useful for maintaining consistency in CI/CD environments by preventing unexpected changes to the lock file and ensuring that the same versions of dependencies are installed.
- name: Lint
run: yarn textlint-lint
================================================
FILE: .github/workflows/textlint_test.yml
================================================
name: Textlint Test
on:
push:
branches:
- main
paths:
- 'textlint/**/*.js'
- '.github/workflows/textlint_test.yml'
pull_request:
types:
- opened
- synchronize
- reopened
paths:
- 'textlint/**/*.js'
- '.github/workflows/textlint_test.yml'
jobs:
Test:
runs-on: ubuntu-latest
steps:
- name: Set up checkout
uses: actions/checkout@v4
- name: Set up node
uses: actions/setup-node@v4
with:
node-version: 20.x
cache: yarn
- name: Set up cache
uses: actions/cache@v4
with:
path: ~/.yarn-cache
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
- name: Install dependencies
run: yarn install --frozen-lockfile
# The `--frozen-lockfile` flag in Yarn ensures that dependencies are installed without modifying the `yarn.lock` file. It is useful for maintaining consistency in CI/CD environments by preventing unexpected changes to the lock file and ensuring that the same versions of dependencies are installed.
- name: Test
run: yarn textlint-test
================================================
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
# code editor
.cursor
.idea
*.code-workspace
# claude local settings
.claude/*.local.*
.claude/react/
# worktrees
.worktrees/
================================================
FILE: .husky/common.sh
================================================
#!/bin/sh
command_exists () {
command -v "$1" >/dev/null 2>&1
}
# Windows 10, Git Bash and Yarn workaround
if command_exists winpty && test -t 1; then
exec < /dev/tty
fi
================================================
FILE: .husky/pre-commit
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"
yarn lint-staged
================================================
FILE: .prettierignore
================================================
src/content/**/*.md
src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/worker-bundle.dist.js
================================================
FILE: .prettierrc
================================================
{
"bracketSpacing": false,
"singleQuote": true,
"bracketSameLine": true,
"trailingComma": "es5",
"printWidth": 80,
"overrides": [
{
"files": "*.css",
"options": {
"parser": "css"
}
},
{
"files": "*.md",
"options": {
"parser": "mdx"
}
}
]
}
================================================
FILE: .textlintrc.js
================================================
module.exports = {
rules: {
'allowed-uris': {
disallowed: {
/**
* Disallow URIs starting with the following strings:
* - https://ko.react.dev
* - http://ko.react.dev
*
* For example,
* `https://ko.react.dev/reference/rules` can be replaced with `/reference/rules`.
*/
links: [/https?:\/\/ko\.react\.dev/g],
},
},
},
filters: {
comments: true,
},
};
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"editorconfig.editorconfig"
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always"
}
}
================================================
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
================================================
# 기여자 행동 강령 규약
## 서약
우리는 구성원, 기여자 및 리더로서 커뮤니티에 참여하여
연령, 신체 크기, 눈에 보이거나 보이지 않는 장애, 민족성, 성별, 성 정체성과 표현,
경력, 학력, 사회 경제적 지위, 국적, 외모, 인종, 카스트 제도, 피부색, 종교
또는 성적 정체성과 성적 성향에 관계없이 모든 사람을 차별하지 않을 것을 서약한다.
우리는 개방적이고 친근하며 다양하고 포용적이며 건강한 커뮤니티에 기여하는
방식으로 행동하고 상호작용할 것을 서약한다.
## 표준
커뮤니티의 긍정적인 환경을 위해 기여자가 해야 할 행동은 다음과 같다.
- 다른 사람들에 대한 친절과 공감 표현
- 서로 다른 의견 및 관점, 경험에 대한 존중
- 건설적인 피드백을 제공 및 열린 마음으로 수락
- 책임을 받아들이고 실수로 인해 영향을 받은 사람들에게 사과하며 경험을 통해 배움
- 개인뿐만 아닌 전체 커뮤니티를 위한 최선의 방법에 집중
하지말아야 할 행동은 다음과 같다.
- 성적인 언어와 이미지 사용, 성적 관심이나 어떤 종류의 접근
- 소모적인 논쟁, 모욕적 또는 비하하는 댓글과 개인적 또는 정치적인 공격
- 공개적이거나 개인적인 괴롭힘
- 동의없는 집주소 또는 이메일 주소 등의 개인 정보의 공개
- 부적절한 것으로 간주될 수 있는 다른 행위
## 집행 책임
커뮤니티 리더는 허용되는 행동의 기준을 명확히 하고 집행할 책임이 있으며
부적절하다고 여겨지는 모든 행동, 위협, 공격 또는 피해에 대해 적절하고
공정한 행동을 취한다.
프로젝트 유지자는 이 행동 강령을 따르지 않은 댓글, 커밋, 코드, 위키 편집,
이슈와 그 외 다른 기여를 삭제, 수정 또는 거부할 권리와 책임이 있다. 또한,
부적당하거나 험악하거나 공격적이거나 해롭다고 생각하는 다른 행동을 한 기여자를
일시적 또는 영구적으로 퇴장시킬 수 있다.
커뮤니티 리더는 이 행동 강령을 따르지 않는 댓글, 커밋, 코드, 위키 편집,
이슈와 그 외 다른 기여를 삭제, 수정 또는 거부할 권리와 책임이 있으며,
적절한 경우 중재적 의사결정에 대한 이유를 전달할 것이다.
## 범위
이 행동 강령은 개인이 공개 영역에서 커뮤니티를 공식적으로 대표할 때를
포함하여 모든 커뮤니티 영역에 적용된다.
커뮤니티 대표의 예로 공식 이메일 주소 사용, 공식 소셜 미디어 계정을 통한 게시,
온/오프라인 이벤트에서 임명된 대표자의 활동이 있다.
## 집행
모욕적이거나 괴롭힘 또는 그 외 하지말아야 할 행동을 발견하면
<opensource-conduct@fb.com>을 통해 집행 책임이 있는 커뮤니티 리더에게 보고한다.
모든 불만사항은 신속하고 공정하게 검토되고 조사될 것이다.
커뮤니티 리더는 사건의 보고자의 사생활과 안전을 존중할 의무가 있다.
## 집행 지침
커뮤니티 리더는 행동 강령 위반으로 간주되는 행동에 대한 결과를 결정할 때,
다음의 커뮤니티 영향 지침을 준수한다:
### 1. 정정
**커뮤니티 영향**: 커뮤니티 내 부적절한 언어 사용이나
비전문적인 행동 또는 불쾌함을 주는 행동.
**결과**: 커뮤니티 리더가 별도로 위반에 대한 명확성과 부적절함에 대한
이유를 설명하고 서면 경고.
공개 사과를 요청할 수 있다.
### 2. 경고
**커뮤니티 영향**: 단일 사고 또는 연속된 행동 위반.
**결과**: 지속적인 행동에 대한 결과에 대해 경고.
특정 기간동안 행동 강령을 시행하는 사람들과의 원치 않는 상호작용을 포함한
관련된 사람들과의 상호작용 금지. 소셜 미디어와 같은 외부 채널뿐만 아닌
커뮤니티 공간에서의 상호작용도 금지된다.
이 조항을 위반하면 일시적 혹은 영구적으로 제재로 이어질 수 있다.
### 3. 일시적인 제재
**커뮤니티 영향**: 지속적으로 부적절한 행동을 포함한
심각한 커뮤니티 기준 위반.
**결과**: 특정 기간동안 커뮤니티와의 어떠한 종류의 상호작용이나
공개적 소통이 일시적 제재.
이 기간동안 행동 강령을 시행하는 사람들과의 원치 않는 상호작용을 포함한
관련된 사람들과의 상호작용 금지. 소셜 미디어와 같은 외부 채널뿐만 아닌
커뮤니티 공간에서의 상호작용도 금지된다.
이 조항을 위반하면 일시적 혹은 영구적으로 제재로 이어질 수 있다.
### 4. 영구 제재
**커뮤니티 영향**: 지속적인 부적절한 행동, 개인적인 괴롭힘 또는
개인의 계급에 대한 공격이나 폄하를 포함한 커뮤니티 표준 위반 패턴을 보임.
**결과**: 커뮤니티와의 모든 종류의 공개적 교류를 영구적으로 제재.
## 참고
이 행동 강령은 [기여자 규약][homepage] 의 2.1 버전을 변형하였습니다. 그 내용은
[https://www.contributor-covenant.org/ko/version/2/1/code-of-conduct.html][v2.1]
에서 확인할 수 있습니다.
커뮤니티 영향 지침은 [Mozilla's code of conduct enforcement ladder][Mozilla CoC]
에서 영감을 얻었습니다.
이 행동 강령에 관련한 일반적인 질문에 대한 대답은
[https://www.contributor-covenant.org/faq][FAQ]를 참고할 수 있습니다.
번역본은 [https://www.contributor-covenant.org/translations][translations]에서
볼 수 있습니다.
[homepage]: https://www.contributor-covenant.org
[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
[Mozilla CoC]: https://github.com/mozilla/diversity
[FAQ]: https://www.contributor-covenant.org/faq
[translations]: https://www.contributor-covenant.org/translations
================================================
FILE: CONTRIBUTING.md
================================================
# 기여하기
React 문서 기여에 관심을 가져주셔서 감사합니다!
## 행동 강령
페이스북<sup>Facebook</sup>은 프로젝트 참가자가 준수해야 하는 행동 강령을 채택했습니다. [전문을 읽어보세요](https://code.facebook.com/codeofconduct). 어떤 행동이 허용되고 허용되지 않는지 확인할 수 있습니다.
## 기술 문서 작성 팁
기술 문서를 작성할 때 염두에 두어야 할 사항에 대한 [좋은 요약](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc)입니다.
## 글에 대한 가이드라인
**섹션마다 의도적으로 다른 스타일을 사용합니다.**
이 문서는 다양한 학습 스타일과 사용 사례를 고려하여 분할되어 있습니다. 본문을 수정할 때는 주변 글의 톤<sup>Tone</sup>과 스타일<sup>Style</sup>에 맞게 작성하도록 주의하세요. 새로운 글을 작성할 때는 같은 섹션에 있는 다른 글들과 톤을 맞추도록 하세요. 각 섹션의 의도와 동기는 아래에서 확인할 수 있습니다.
**[React 학습하기](https://ko.react.dev/learn)** 섹션은 기초 개념을 단계별로 소개하기 위해 만들어졌습니다. 여기서 제공되는 글들은 이전에 설명된 지식을 바탕으로 하므로, 글 간 앞뒤 개념이 중복되거나 꼬이지 않도록 주의하세요. 독자는 첫 번째 글부터 마지막 글까지 순서대로 읽으며 개념을 익힐 수 있어야 하며, 추가 설명을 위해 미리 앞선 개념들을 살펴보지 않도록 해야 합니다. 이런 이유로 상태<sup>State</sup>는 이벤트<sup>Event</sup>보다 먼저 설명되고, 'React로 사고하기' 파트에서 `ref`를 사용하지 않는 등 특정 순서가 정해져 있습니다. 동시에 'React 학습하기'는 React 개념에 대한 참고 자료 역할을 하므로, 개념들에 대한 정의와 상호 관계를 엄격하게 다루어야 합니다.
**[API 참고서](https://ko.react.dev/reference/react)** 섹션은 개념이 아닌 API별로 정리되어 있으며, 가능한 한 모든 경우를 포함하는 것을 목표로 합니다. 'React 학습하기'에서 간단히 다뤘거나 생략한 예외 사항<sup>Edge Cases</sup> 혹은 권장 사항<sup>Recommendations</sup>은 해당 API의 레퍼런스 문서에 추가로 언급해야 합니다.
**스스로 작성한 지침<sup>Instructions</sup>을 실천해 보세요.**
예를 들어, 단계별 가이드를 작성한다면, 직접 그 지침을 따라가 보며 누락된 내용이나 순서가 맞지 않는 부분을 찾아보세요. 실제로 지침을 순서대로 진행하다보면, 작성자가 설명하지 않은 배경지식이 있거나, 단계가 뒤섞여 있는 등의 문제를 발견할 수 있습니다. 가능하다면 다른 사람에게 지침을 따라보게 하고, 그들이 어려움을 겪는 부분을 관찰하는 것도 좋은 방법입니다. 사소해 보이지만 예상치 못한 곳에서 문제가 생길 수 있습니다.
## 코드 예시에 대한 가이드라인
### 구문<sup>Syntax</sup>
#### 가능하면 `createElement` 대신 JSX를 사용하세요
단, `createElement` 자체를 설명해야 하는 경우는 예외입니다.
#### 가능하면 `const`, 필요한 경우에는 `let`을 사용하고, `var`는 사용하지 마세요
ES5만 다루는 경우라면 이 규칙은 무시하세요.
#### ES5의 기능만으로 간단하게 작성할 수 있는 경우, ES6의 기능을 무조건적으로 사용하지 마세요
ES6가 아직 낯선 사람도 많습니다. 이미 여러 곳에서 `const` / `let`, 클래스, 화살표 함수 등을 사용하고 있지만, 그에 상응하는 ES5 코드가 간단하고 가독성이 좋다면 ES5를 사용하는 것도 고려하세요.
특히 최상위 함수에서는 `const myFunction = () => ...`과 같은 화살표 함수 대신에 이름 있는 `function` 선언을 선호합니다. 하지만 컴포넌트 내 `this` 컨텍스트를 유지해야 하는 경우에는 화살표 함수를 사용하세요. 새로운 문법을 사용할 때는 장단점을 모두 따져보고 결정하세요.
#### 아직 표준화되지 않은 기능은 사용하지 마세요
예를 들어, 다음 코드처럼 작성하지 마세요.
```js
class MyComponent extends React.Component {
state = {value: ''};
handleChange = (e) => {
this.setState({value: e.target.value});
};
}
```
대신, 다음처럼 작성하세요.
```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});
}
}
```
실험적인 제안<sup>Experimental Proposal</sup>에 대해 설명하는 경우라면 예외로 하되, 코드와 주변 글에서 실험적임<sup>Experimental</sup>을 명시하세요.
### 스타일
- 세미콜론을 사용하세요.
- 함수 이름과 괄호 사이에는 공백을 넣지 마세요. (`method () {}`가 아닌, `method() {}` 형태.)
- 고민될 때는 [Prettier](https://prettier.io/playground/)의 기본 스타일을 따르세요.
- Hooks, Effects, Transitions 같은 React 관련 개념은 항상 대문자로 시작하세요.
### 하이라이팅
마크다운<sup>Markdown</sup>의 코드 블록에서는 `js`를 사용하세요:
````
```js
// 코드
```
````
간혹 숫자와 함께 사용되는 블록이 있습니다.
이는 특정 줄을 강조하기 위한 용도입니다.
한 줄을 강조하는 예시.
````
```js {2}
function hello() {
// 이 줄이 강조됩니다
}
```
````
일정 범위를 강조하는 예시.
````
```js {2-4}
function hello() {
// 여기부터
// 시작해서
// 여기까지 강조됩니다
}
```
````
여러 범위를 강조하는 예시.
````
```js {2-4,6}
function hello() {
// 여기부터
// 시작해서
// 여기까지 강조됩니다
console.log('hello');
// 이 줄도 강조됩니다
console.log('there');
}
```
````
코드를 이동하거나 순서를 바꿨다면, 강조하는 줄도 같이 수정해야 한다는 점을 잊지 마세요.
강조 기능은 독자가 놓치기 쉬운 구체적인 부분에 주의를 환기해주므로 적극적으로 사용하길 권장합니다.
================================================
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
================================================
# ko.react.dev
[](https://discord.gg/YXdTyCh5KF)
## 한국어 번역 정보
### 가이드
번역 혹은 기여를 진행할 때, 아래 가이드를 따라주세요.
1. [기여 가이드라인<sup>Contributing</sup>](/CONTRIBUTING.md) 및 [기여자 행동 강령 규약<sup>Code of Conduct</sup>](/CODE_OF_CONDUCT.md)을 따르고 있습니다.
1. [공통 스타일 가이드<sup>Universal Style Guide</sup>](/wiki/universal-style-guide.md)를 확인해주세요.
1. [번역을 위한 모범 사례<sup>Best Practices for Translation</sup>](/wiki/best-practices-for-translation.md)를 따라주세요.
1. 공통된 단어 번역을 위해 [번역 용어 정리<sup>Translate Glossary</sup>](/wiki/translate-glossary.md)를 참고해주세요.
1. 끌어오기 요청<sup>Pull Request</sup>시 테스트를 통과하지 못할 경우, [`textlint` 가이드<sup>Textlint Guide</sup>](/wiki/textlint-guide.md)를 참고해주세요.
1. 마지막으로 [맞춤법 검사<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/)를 진행해주세요.
이 저장소<sup>Repository</sup>는 [ko.react.dev](https://ko.react.dev/)의 소스 코드와 개발 문서를 포함하고 있습니다.
## 시작하기
### 사전 준비
1. Git
1. Node: v16.8.0 이상의 모든 버전
1. Yarn v1(`yarn@1.22.22`): [Yarn 설치 안내](https://yarnpkg.com/lang/en/docs/install/) 참고
1. 포크<sup>Fork</sup>한 개인 저장소
1. 로컬에 클론<sup>Clone</sup>한 [ko.react.dev 저장소](https://github.com/reactjs/ko.react.dev)
### 설치
1. `cd ko.react.dev`를 실행하여 프로젝트 경로로 이동합니다.
1. `yarn` 명령어를 실행하여 npm 의존성 모듈들을 설치합니다.
### 개발 서버 실행하기
1. `yarn dev` 명령어를 사용하여 개발 서버를 시작합니다. (powered by [Next.js](https://nextjs.org).)
1. `open http://localhost:3000` 명령어를 사용하여 선호하는 브라우저로 접속하세요.
## 기여 방법
### 가이드라인
이 문서는 목적이 다른 여러 섹션으로 나뉩니다. 문장을 추가할 계획이라면, 적절한 섹션에 대한 [기여 가이드라인<sup>Contributing</sup>](/CONTRIBUTING.md)을 숙지하는 것이 도움이 될 것입니다.
### 분기<sup>Branch</sup> 만들기
1. `ko.react.dev` 로컬 저장소에서 `git checkout main`을 실행합니다.
1. `git pull origin main`을 실행하여 최신 코드를 가져올 수 있습니다.
1. `git checkout -b the-name-of-my-branch`를 실행하여 분기<sup>Branch</sup>를 만듭니다. (이때, `the-name-of-my-branch`를 적절한 이름으로 교체.)
### 수정하기
1. ["개발 서버 실행하기"](#개발-서버-실행하기) 부분을 따릅니다.
1. 파일을 저장하고 브라우저에서 확인합니다.
1. `src` 안에 있는 React 컴포넌트가 수정될 경우 hot-reload가 적용됩니다.
1. `content` 안에 있는 마크다운 파일이 수정될 경우 hot-reload가 적용됩니다.
1. 플러그인을 사용하는 경우, `.cache` 디렉토리를 제거한 후 서버를 재시작해야 합니다.
### 수정사항 검사하기
1. 가능하다면, 변경한 부분에 대해서 많이 사용하는 브라우저의 최신 버전에서 시각적으로 제대로 적용되었는지 확인해주세요. (데스크탑과 모바일 모두.)
1. 프로젝트 루트에서 `yarn check-all`을 실행합니다. (이 명령어는 Prettier, ESLint, 그리고 타입 유효성 검사를 진행합니다.)
### 푸시<sup>Push</sup> 하기
1. `git add -A && git commit -m "My message"`를 실행하여 변경한 파일들을 커밋<sup>commit</sup> 해주세요. (이때, `My message` 부분을 `Fix header logo on Android` 같은 커밋 메시지로 교체.)
1. `git push my-fork-name the-name-of-my-branch`
1. [ko.react.dev 저장소](https://github.com/reactjs/ko.react.dev)에서 최근에 푸시된 분기<sup>Branch</sup>를 볼 수 있습니다.
1. 깃허브<sup>GitHub</sup> 지침을 따라주세요.
1. 가능하다면 시각적으로 변화된 부분의 스크린샷을 첨부해주세요. 변경 사항이 깃허브<sup>GitHub</sup>에 푸시<sup>Push</sup>되면 미리보기 빌드가 트리거됩니다.
## 문제 해결하기
`yarn cache-reset` 명령어를 사용하여 로컬 캐시를 초기화합니다.
## 번역
`react.dev` 번역에 흥미가 있다면, [translations.react.dev](https://translations.react.dev/)에서 현재 번역이 얼마나 진행되었는지 확인해주세요.
번역하려는 언어가 아직 진행되지 않았다면, 해당 언어에 대해 새롭게 만들 수 있습니다. [translations.react.dev 저장소](https://github.com/reactjs/translations.react.dev)를 참고해주세요.
## 저작권
위 내용에 대한 저작권은 [react.dev](https://react.dev)가 가지고 있으며, [LICENSE-DOCS.md](/LICENSE-DOCS.md)에서 볼 수 있는 CC-BY-4.0 라이센스를 따릅니다.
================================================
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: eslint.config.mjs
================================================
/* eslint-disable import/no-anonymous-default-export */
import md from 'eslint-markdown';
export default [
{
ignores: ['**/*.js', '**/*.mjs', '**/*.cjs'],
},
{
...md.configs.base,
files: ['src/content/**/*.md'],
rules: {
'md/no-curly-quote': [
'error',
{
checkLeftSingleQuotationMark: false,
checkRightSingleQuotationMark: false,
},
],
'md/no-double-space': 'error',
'md/no-git-conflict-marker': ['error', {skipCode: false}],
'md/no-irregular-whitespace': [
'error',
{skipCode: false, skipInlineCode: false},
],
},
},
];
================================================
FILE: lint-staged.config.js
================================================
module.exports = {
'*': 'yarn editorconfig-checker',
'*.{js,ts,jsx,tsx,css}': 'yarn prettier',
'src/**/*.md': ['yarn fix-headings', 'yarn textlint-lint'],
'textlint/**/*.js': 'yarn textlint-test',
'textlint/data/rules/translateGlossary.js': 'yarn textlint-docs',
'textlint/generators/genTranslateGlossaryDocs.js': 'yarn textlint-docs',
};
================================================
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.ht
gitextract_nwqdaqk2/
├── .claude/
│ ├── agents/
│ │ └── docs-reviewer.md
│ ├── settings.json
│ └── skills/
│ ├── docs-components/
│ │ └── SKILL.md
│ ├── docs-rsc-sandpack/
│ │ └── 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
│ └── write/
│ └── SKILL.md
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .github/
│ ├── CODEOWNERS
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── 0-bug.yml
│ │ ├── 1-typo.yml
│ │ ├── 3-framework.yml
│ │ ├── config.yml
│ │ ├── need-translation.md
│ │ └── term.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ └── workflows/
│ ├── analyze.yml
│ ├── analyze_comment.yml
│ ├── site_lint.yml
│ ├── textlint_lint.yml
│ └── textlint_test.yml
├── .gitignore
├── .husky/
│ ├── common.sh
│ └── pre-commit
├── .prettierignore
├── .prettierrc
├── .textlintrc.js
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── 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
├── eslint.config.mjs
├── lint-staged.config.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── plugins/
│ ├── 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/
│ ├── buildRscWorker.mjs
│ ├── 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/
│ │ │ ├── Feedback.tsx
│ │ │ ├── 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
│ │ │ │ ├── ResetButton.tsx
│ │ │ │ ├── SandpackRSCRoot.tsx
│ │ │ │ ├── SandpackRoot.tsx
│ │ │ │ ├── Themes.tsx
│ │ │ │ ├── createFileMap.ts
│ │ │ │ ├── index.tsx
│ │ │ │ ├── runESLint.tsx
│ │ │ │ ├── sandpack-rsc/
│ │ │ │ │ ├── RscFileBridge.tsx
│ │ │ │ │ └── sandbox-code/
│ │ │ │ │ └── src/
│ │ │ │ │ ├── __react_refresh_init__.js
│ │ │ │ │ ├── rsc-client.js
│ │ │ │ │ ├── rsc-server.js
│ │ │ │ │ ├── webpack-shim.js
│ │ │ │ │ └── worker-bundle.dist.js
│ │ │ │ ├── template.ts
│ │ │ │ ├── templateRSC.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/
│ │ │ │ │ ├── 21/
│ │ │ │ │ │ └── react-compiler-rc.md
│ │ │ │ │ └── 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
│ │ │ ├── 2026/
│ │ │ │ └── 02/
│ │ │ │ └── 24/
│ │ │ │ └── the-react-foundation.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
│ │ │ ├── rsc-sandbox-test.md
│ │ │ ├── scaling-up-with-reducer-and-context.md
│ │ │ ├── separating-events-from-effects.md
│ │ │ ├── setup.md
│ │ │ ├── sharing-state-between-components.md
│ │ │ ├── start-a-new-react-project.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
│ │ │ │ ├── createFactory.md
│ │ │ │ ├── createRef.md
│ │ │ │ ├── experimental_taintObjectReference.md
│ │ │ │ ├── experimental_taintUniqueValue.md
│ │ │ │ ├── experimental_useEffectEvent.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
│ ├── 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/
│ ├── data/
│ │ ├── rules/
│ │ │ └── translateGlossary.js
│ │ └── utils/
│ │ ├── errMsg.spec.js
│ │ ├── is.spec.js
│ │ └── strip.spec.js
│ ├── generators/
│ │ └── genTranslateGlossaryDocs.js
│ ├── rules/
│ │ └── translateGlossary.js
│ ├── tests/
│ │ ├── rules/
│ │ │ └── translateGlossary.spec.js
│ │ └── utils/
│ │ ├── errMsg.spec.js
│ │ ├── is.spec.js
│ │ └── strip.spec.js
│ └── utils/
│ ├── errMsg.js
│ ├── is.js
│ └── strip.js
├── tsconfig.json
├── vercel.json
└── wiki/
├── best-practices-for-translation.md
├── textlint-guide.md
├── translate-glossary-legacy.md
├── translate-glossary.md
└── universal-style-guide.md
SYMBOL INDEX (1311 symbols across 101 files)
FILE: eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js
constant FIXTURES_DIR (line 14) | const FIXTURES_DIR = path.join(__dirname, 'fixtures', 'src', 'content');
constant PARSER_PATH (line 15) | const PARSER_PATH = path.join(__dirname, '..', 'parser.js');
function createESLint (line 17) | function createESLint({fix = false} = {}) {
function readFixture (line 37) | function readFixture(name) {
function lintFixture (line 41) | async function lintFixture(name, {fix = false} = {}) {
function run (line 49) | 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 96) | function parseExpectedErrorsToken(tokenText) {
function parseFenceMetadata (line 125) | function parseFenceMetadata(metaText) {
function cloneMetadata (line 190) | function cloneMetadata(metadata) {
function findExpectedErrorsToken (line 209) | function findExpectedErrorsToken(metadata) {
function getCompilerExpectedLines (line 215) | function getCompilerExpectedLines(metadata) {
function hasCompilerEntry (line 223) | function hasCompilerEntry(metadata) {
function metadataHasExpectedErrorsToken (line 228) | function metadataHasExpectedErrorsToken(metadata) {
function stringifyExpectedErrorsToken (line 232) | function stringifyExpectedErrorsToken(token) {
function stringifyFenceMetadata (line 249) | function stringifyFenceMetadata(metadata) {
function buildFenceLine (line 273) | function buildFenceLine(lang, metadata) {
function metadataEquals (line 278) | function metadataEquals(a, b) {
function normalizeMetadata (line 324) | function normalizeMetadata(metadata) {
function setCompilerExpectedLines (line 335) | function setCompilerExpectedLines(metadata, lines) {
function removeCompilerExpectedLines (line 352) | 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/Feedback.tsx
function Feedback (line 16) | function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
function sendGAEvent (line 55) | function sendGAEvent(isPositive: boolean) {
function SendFeedback (line 68) | function SendFeedback({onSubmit}: {onSubmit: () => void}) {
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 68) | function Para({children}) {
function Br (line 76) | function Br({breakPointPrefix = 'lg'}) {
function Center (line 85) | function Center({children}) {
function FullBleed (line 93) | function FullBleed({children}) {
function CurrentTime (line 99) | function CurrentTime() {
function HomeContent (line 131) | function HomeContent() {
function CTA (line 557) | function CTA({children, icon, href}) {
function CommunityGallery (line 732) | function CommunityGallery() {
function ExampleLayout (line 838) | function ExampleLayout({
function useCodeHover (line 914) | function useCodeHover(areas) {
function Example1 (line 936) | function Example1() {
function Example2 (line 987) | function Example2() {
function Example3 (line 1060) | function Example3() {
function Example4 (line 1161) | function Example4() {
function useNestedScrollLock (line 1230) | function useNestedScrollLock(ref) {
function ExamplePanel (line 1260) | function ExamplePanel({
function BrowserChrome (line 1285) | function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
function ConferencePage (line 1384) | function ConferencePage({slug}) {
function TalksLoading (line 1397) | function TalksLoading() {
function Talks (line 1448) | function Talks({confId}) {
function SearchableVideoList (line 1453) | function SearchableVideoList({videos}) {
function filterVideos (line 1467) | function filterVideos(videos, query) {
function VideoList (line 1483) | function VideoList({videos, emptyHeading}) {
function SearchInput (line 1506) | function SearchInput({value, onChange}) {
function ConferenceLayout (line 1533) | function ConferenceLayout({conf, children}) {
function Cover (line 1580) | function Cover({background, children}) {
function Video (line 1597) | function Video({video}) {
function Code (line 1624) | function Code({children}) {
function Thumbnail (line 1634) | function Thumbnail({video}) {
function ThumbnailPlaceholder (line 1685) | function ThumbnailPlaceholder() {
function LikeButton (line 1708) | function LikeButton({video}) {
function SvgContainer (line 1778) | function SvgContainer({children}) {
function NativeIcons (line 1790) | function NativeIcons() {
function WebIcons (line 1841) | function WebIcons() {
function use (line 2380) | function use(promise) {
function fetchConf (line 2408) | function fetchConf(slug) {
function fetchTalks (line 2433) | 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({
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/ResetButton.tsx
type ResetButtonProps (line 7) | interface ResetButtonProps {
function ResetButton (line 11) | function ResetButton({onReset}: ResetButtonProps) {
FILE: src/components/MDX/Sandpack/SandpackRSCRoot.tsx
type SandpackProps (line 22) | type SandpackProps = {
function SandpackRSCRoot (line 77) | function SandpackRSCRoot(props: SandpackProps) {
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/sandpack-rsc/RscFileBridge.tsx
function RscFileBridge (line 16) | function RscFileBridge() {
FILE: src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-client.js
function initClient (line 38) | function initClient() {
FILE: src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-server.js
function createModuleMap (line 20) | function createModuleMap() {
function registerServerReference (line 45) | function registerServerReference(impl, moduleId, name) {
function parseDirective (line 54) | function parseDirective(code) {
function transformInlineServerActions (line 78) | function transformInlineServerActions(code) {
function resolvePath (line 199) | function resolvePath(from, to) {
function deploy (line 217) | function deploy(files) {
function render (line 390) | function render() {
function callAction (line 403) | function callAction(actionId, encodedArgs) {
function sendStream (line 441) | function sendStream(requestId, stream) {
FILE: src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/worker-bundle.dist.js
function Yo (line 32) | function Yo(e) {
function Mf (line 58) | function Mf(e) {
function Qo (line 66) | function Qo(e, t, s, i, r, a) {
function Bf (line 72) | function Bf(e, t) {
function Zo (line 75) | function Zo(e) {
function Vf (line 78) | function Vf(e) {
function zo (line 88) | function zo(e, t) {
function Kc (line 93) | function Kc() {}
function jf (line 94) | function jf(e) {
function Zs (line 125) | function Zs(e, t, s, i, r) {
function _r (line 194) | function _r(e, t, s) {
function $f (line 205) | function $f(e) {
function qf (line 224) | function qf() {
function Xo (line 227) | function Xo() {
function zc (line 381) | function zc(e, t, s) {
function ns (line 408) | function ns() {}
function br (line 432) | function br(e, t) {
function Bi (line 539) | function Bi(e) {
function Xf (line 542) | function Xf(e) {
function Cr (line 556) | function Cr(e, t) {
function pn (line 580) | function pn(e) {
function la (line 583) | function la(e) {
function xu (line 586) | function xu(e, t) {
function ti (line 591) | function ti(e, t, s) {
function gu (line 600) | function gu() {
function tu (line 668) | function tu(e, t) {
function sd (line 774) | function sd(e) {
function id (line 784) | function id(e, t) {
function Sr (line 796) | function Sr(e, t, s) {
function Cu (line 818) | function Cu(e, t) {
function rd (line 831) | function rd(e, t, s) {
function od (line 849) | function od(e, t) {
function ad (line 862) | function ad(e, t) {
function ji (line 875) | function ji(e) {
function ld (line 883) | function ld(e, t, s) {
function ud (line 1021) | function ud(e, t) {
function Iu (line 1044) | function Iu(e) {
function Cs (line 1051) | function Cs() {}
function md (line 1055) | function md(e, t, s) {
function Eu (line 1096) | function Eu() {
function Au (line 1107) | function Au() {
function Vt (line 1146) | function Vt() {
function yd (line 1149) | function yd() {
function na (line 1154) | function na() {
function Td (line 1157) | function Td() {
function kd (line 1163) | function kd(e) {
function Nu (line 1195) | function Nu(e) {
function ru (line 1198) | function ru(e) {
function Er (line 1218) | function Er(e) {
function _s (line 1242) | function _s(e, t) {
function xd (line 1295) | function xd(e) {
function Ru (line 1298) | function Ru(e, t, s, i, r, a, u, d, y) {
function ou (line 1338) | function ou(e, t, s) {
function gd (line 1386) | function gd(e, t, s) {
function _d (line 1459) | function _d(e, t, s, i) {
function Ut (line 1538) | function Ut(e, t, s) {
function bd (line 1550) | function bd(e) {
function Cd (line 1554) | function Cd(e, t, s) {
function au (line 1576) | function au() {}
function wd (line 1577) | function wd(e, t, s, i) {
function lu (line 1596) | function lu(e, t, s, i, r) {
function cu (line 1626) | function cu(e, t, s) {
function uu (line 1632) | function uu(e, t) {
function ia (line 1646) | function ia(e, t, s, i, r, a) {
function Vi (line 1686) | function Vi(e, t) {
function os (line 1699) | function os(e, t, s, i, r, a) {
function Ct (line 1769) | function Ct(e) {
function ws (line 1772) | function ws(e) {
function Lu (line 1775) | function Lu(e, t, s) {
function pu (line 1787) | function pu(e, t, s, i) {
function bs (line 1842) | function bs(e, t, s) {
function Yt (line 1845) | function Yt(e, t, s) {
function Sd (line 1850) | function Sd(e, t) {
function qi (line 1885) | function qi(e, t, s, i, r) {
function Kn (line 2098) | function Kn(e, t) {
function Ki (line 2115) | function Ki(e, t) {
function Rr (line 2125) | function Rr(e, t, s) {
function Ou (line 2136) | function Ou(e, t, s) {
function Kt (line 2146) | function Kt(e, t, s, i, r) {
function Du (line 2155) | function Du(e, t, s, i) {
function Mu (line 2167) | function Mu(e, t, s) {
function Un (line 2199) | function Un(e, t, s) {
function Fu (line 2207) | function Fu(e, t) {
function Bu (line 2251) | function Bu(e, t) {
function ra (line 2259) | function ra(e) {
function ha (line 2275) | function ha(e) {
function fa (line 2278) | function fa(e, t, s) {
function ri (line 2282) | function ri(e) {
function oi (line 2285) | function oi(e, t) {
function ai (line 2288) | function ai(e) {
function Vu (line 2324) | function Vu(e) {
function un (line 2333) | function un(e) {
function Or (line 2342) | function Or(e) {
function ju (line 2345) | function ju(e, t) {
function Id (line 2356) | function Id(e, t) {
function Ed (line 2367) | function Ed(e, t, s) {
function si (line 2378) | function si(e, t) {
function $u (line 2424) | function $u(e, t) {
function hu (line 2440) | function hu(e) {
function Ad (line 2454) | function Ad() {}
function qu (line 2455) | function qu(e) {
function Fi (line 2479) | function Fi(e) {
function Ot (line 2495) | function Ot(e, t, s) {
function Mr (line 2532) | function Mr(e, t, s, i) {
function da (line 2538) | function da(e, t, s) {
function Fr (line 2544) | function Fr(e, t, s) {
function Wu (line 2551) | function Wu(e, t, s) {
function Gu (line 2555) | function Gu(e, t, s, i) {
function fu (line 2588) | function fu(e, t, s) {
function ea (line 2596) | function ea(e, t, s, i) {
function Nd (line 2604) | function Nd(e, t, s, i) {
function oa (line 2672) | function oa(e, t, s, i, r, a) {
function $n (line 2711) | function $n(e, t, s) {
function Br (line 2718) | function Br(e) {
function Rd (line 2750) | function Rd(e, t) {
function Vr (line 2761) | function Vr(e, t) {
function zu (line 2777) | function zu(e, t, s, i) {
function aa (line 2812) | function aa(e, t, s, i, r) {
function Pr (line 2826) | function Pr(e, t, s) {
function Di (line 2834) | function Di(e, t, s, i, r, a) {
function Ld (line 2914) | function Ld(e, t) {
function Od (line 2919) | function Od(e, t) {
function Dd (line 2924) | function Dd(e, t) {
function Md (line 2929) | function Md(e, t, s, i) {
function Jt (line 2932) | function Jt(e, t, s, i, r, a, u) {
function Xu (line 2981) | function Xu(e, t, s, i) {
function du (line 2997) | function du(e, t, s) {
function ma (line 3057) | function ma(e) {
function mu (line 3064) | function mu(e, t, s) {
function Fd (line 3119) | function Fd(e, t, s, i, r, a) {
function Yu (line 3222) | function Yu(e, t, s) {
function Ju (line 3242) | function Ju(e) {
function yu (line 3245) | function yu(e, t) {
function Qu (line 3271) | function Qu(e, t, s, i) {
function Bd (line 3785) | function Bd(e) {
method constructor (line 4025) | constructor(t, s, i) {
method constructor (line 4033) | constructor(t, s, i, r, a, u, d, y, g, L, p, h, T) {
method constructor (line 4051) | constructor() {
method __init (line 4066) | __init() {
method __init2 (line 4069) | __init2() {
method __init3 (line 4072) | __init3() {
method __init4 (line 4075) | __init4() {
method __init5 (line 4078) | __init5() {
method __init6 (line 4081) | __init6() {
method __init7 (line 4084) | __init7() {
method __init8 (line 4087) | __init8() {
method __init9 (line 4090) | __init9() {
method __init10 (line 4093) | __init10() {
method __init11 (line 4096) | __init11() {
method __init12 (line 4099) | __init12() {
method __init13 (line 4102) | __init13() {
method snapshot (line 4105) | snapshot() {
method restoreFromSnapshot (line 4122) | restoreFromSnapshot(t) {
function $d (line 4354) | function $d(e) {
function qd (line 4366) | function qd(e) {
function Wd (line 4378) | function Wd() {
function Gd (line 4382) | function Gd(e) {
method constructor (line 4391) | constructor(t, s) {
function n1 (line 4396) | function n1(e) {
function zd (line 4404) | function zd(e, t, s, i) {
function Xd (line 4421) | function Xd(e) {
function Yd (line 4425) | function Yd(e) {
function s1 (line 4430) | function s1(e) {
function Jd (line 4437) | function Jd(e) {
function i1 (line 4441) | function i1() {
function r1 (line 4449) | function r1() {
function Qd (line 4465) | function Qd() {
function o1 (line 4480) | function o1() {
function Zd (line 4484) | function Zd() {
function em (line 4488) | function em(e) {
function Wr (line 4495) | function Wr(e = 'Unexpected token', t = en.state.start) {
function rm (line 4544) | function rm(e) {
function cm (line 13548) | function cm() {
function um (line 13601) | function um(e) {
function dm (line 13652) | function dm(e) {
function mm (line 13664) | function mm(e) {
function ym (line 13674) | function ym(e) {
function Tm (line 13683) | function Tm(e) {
function km (line 13693) | function km(e) {
function vm (line 13701) | function vm(e) {
method constructor (line 13710) | constructor() {
function zr (line 13733) | function zr() {
function xm (line 13737) | function xm() {
function gm (line 13741) | function gm() {
function _m (line 13745) | function _m(e) {
function bm (line 13752) | function bm(e) {
function m1 (line 13756) | function m1(e) {
function Cm (line 13760) | function Cm(e) {
function Sa (line 13765) | function Sa(e) {
function wm (line 13769) | function wm() {
method constructor (line 13777) | constructor(t, s) {
function Sm (line 13782) | function Sm() {
function y1 (line 13790) | function y1() {
function T1 (line 13794) | function T1(e) {
function Im (line 13800) | function Im() {
function k1 (line 13804) | function k1() {
function Em (line 13819) | function Em(e) {
function Am (line 13827) | function Am() {
function v1 (line 13840) | function v1(e) {
function x1 (line 13855) | function x1() {
function Ve (line 13886) | function Ve(e, t = pm.ContextualKeyword.NONE) {
function Pm (line 13892) | function Pm() {
function Nm (line 13903) | function Nm() {
function Rm (line 13908) | function Rm(e) {
function Lm (line 13923) | function Lm(e) {
function Om (line 13956) | function Om() {
function Dm (line 13961) | function Dm(e) {
function Mm (line 13973) | function Mm() {
function g1 (line 13989) | function g1() {
function Fm (line 14011) | function Fm() {
function Bm (line 14015) | function Bm(e) {
function Vm (line 14030) | function Vm() {
function _1 (line 14042) | function _1(e) {
function Fe (line 14161) | function Fe(e, t) {
function jm (line 14164) | function jm() {
function Ca (line 14185) | function Ca() {
function $m (line 14196) | function $m() {
function b1 (line 14212) | function b1(e) {
function qm (line 14240) | function qm(e) {
function Km (line 14253) | function Km() {
function C1 (line 14279) | function C1() {
function Um (line 14306) | function Um(e, t = e.currentIndex()) {
function Xr (line 14326) | function Xr(e, t) {
function Hm (line 14593) | function Hm(e) {
function I1 (line 14599) | function I1(e) {
method getPrefixCode (line 14608) | getPrefixCode() {
method getHoistedCode (line 14611) | getHoistedCode() {
method getSuffixCode (line 14614) | getSuffixCode() {
function Oa (line 14623) | function Oa(e) {
method __init (line 14636) | __init() {
method __init2 (line 14639) | __init2() {
method __init3 (line 14642) | __init3() {
method __init4 (line 14645) | __init4() {
method __init5 (line 14648) | __init5() {
method constructor (line 14651) | constructor(t, s, i, r, a) {
method process (line 14667) | process() {
method getPrefixCode (line 14672) | getPrefixCode() {
method processJSXTag (line 14705) | processJSXTag() {
method getElementLocationCode (line 14712) | getElementLocationCode(t) {
method getLineNumberForIndex (line 14715) | getLineNumberForIndex(t) {
method transformTagToJSXFunc (line 14724) | transformTagToJSXFunc(t, s) {
method transformTagToCreateElement (line 14757) | transformTagToCreateElement(t) {
method getJSXFuncInvocationCode (line 14781) | getJSXFuncInvocationCode(t) {
method getCreateElementInvocationCode (line 14791) | getCreateElementInvocationCode() {
method getFragmentCode (line 14803) | getFragmentCode() {
method claimAutoImportedFuncInvocation (line 14820) | claimAutoImportedFuncInvocation(t, s) {
method claimAutoImportedName (line 14824) | claimAutoImportedName(t, s) {
method processTagIntro (line 14841) | processTagIntro() {
method processPropsObjectWithDevInfo (line 14873) | processPropsObjectWithDevInfo(t) {
method processProps (line 14890) | processProps(t) {
method processPropName (line 14919) | processPropName(t) {
method processPropValue (line 14924) | processPropValue() {
method processStringPropValue (line 14933) | processStringPropValue() {
method processAutomaticChildrenAndEndProps (line 14940) | processAutomaticChildrenAndEndProps(t) {
method processChildren (line 14950) | processChildren(t) {
method processChildTextElement (line 14979) | processChildTextElement(t) {
method getDevSource (line 14988) | getDevSource(t) {
method getFilenameVarName (line 14991) | getFilenameVarName() {
function A1 (line 15001) | function A1(e) {
function Qm (line 15006) | function Qm(e) {
function E1 (line 15030) | function E1(e) {
function Zm (line 15044) | function Zm(e) {
function P1 (line 15065) | function P1(e, t) {
function ey (line 15092) | function ey(e) {
function ty (line 15095) | function ty(e) {
function ny (line 15106) | function ny(e) {
function oy (line 15114) | function oy(e, t) {
function ay (line 15148) | function ay(e) {
method __init (line 15158) | __init() {
method __init2 (line 15161) | __init2() {
method __init3 (line 15164) | __init3() {
method __init4 (line 15167) | __init4() {
method __init5 (line 15170) | __init5() {
method constructor (line 15173) | constructor(t, s, i, r, a, u) {
method preprocessTokens (line 15186) | preprocessTokens() {
method pruneTypeOnlyImports (line 15205) | pruneTypeOnlyImports() {
method isTypeName (line 15227) | isTypeName(t) {
method generateImportReplacements (line 15232) | generateImportReplacements() {
method getFreeIdentifierForPath (line 15293) | getFreeIdentifierForPath(t) {
method preprocessImportAtIndex (line 15298) | preprocessImportAtIndex(t) {
method preprocessExportAtIndex (line 15351) | preprocessExportAtIndex(t) {
method preprocessVarExportAtIndex (line 15407) | preprocessVarExportAtIndex(t) {
method preprocessNamedExportAtIndex (line 15438) | preprocessNamedExportAtIndex(t) {
method preprocessExportStarAtIndex (line 15458) | preprocessExportStarAtIndex(t) {
method getNamedImports (line 15478) | getNamedImports(t) {
method getImportInfo (line 15509) | getImportInfo(t) {
method addExportBinding (line 15523) | addExportBinding(t, s) {
method claimImportCode (line 15528) | claimImportCode(t) {
method getIdentifierReplacement (line 15532) | getIdentifierReplacement(t) {
method resolveExportBinding (line 15535) | resolveExportBinding(t) {
method getGlobalNames (line 15541) | getGlobalNames() {
class t (line 15561) | class t {
method constructor (line 15562) | constructor() {
method decode (line 15606) | decode(w) {
method decode (line 15615) | decode(w) {
function d (line 15622) | function d(w) {
function y (line 15652) | function y(w, S) {
function g (line 15656) | function g(w, S, A, U) {
function L (line 15667) | function L(w, S, A) {
function p (line 15670) | function p(w) {
method constructor (line 16278) | constructor({file: R, sourceRoot: W} = {}) {
function h (line 15673) | function h(w, S) {
function T (line 15676) | function T(w) {
function x (line 15706) | function x(w, S, A, U, M) {
function r (line 15745) | function r(A) {
function a (line 15748) | function a(A) {
function u (line 15751) | function u(A) {
function d (line 15754) | function d(A) {
function y (line 15757) | function y(A) {
function g (line 15760) | function g(A) {
function L (line 15772) | function L(A) {
function p (line 15785) | function p(A, U, M, c, R, W, X) {
method constructor (line 16278) | constructor({file: R, sourceRoot: W} = {}) {
function h (line 15797) | function h(A) {
function T (line 15822) | function T(A) {
function x (line 15827) | function x(A, U) {
function w (line 15831) | function w(A, U) {
function S (line 15855) | function S(A, U) {
function i (line 15913) | function i(V) {
function a (line 15917) | function a(V, G) {
function u (line 15920) | function u(V) {
function x (line 15932) | function x(V, G) {
function w (line 15939) | function w(V, G) {
function S (line 15943) | function S(V) {
function A (line 15947) | function A(V, G) {
function U (line 15950) | function U(V, G) {
function c (line 15954) | function c(V, G, J, re) {
function R (line 15963) | function R(V, G, J) {
function W (line 15967) | function W(V, G, J) {
function X (line 15971) | function X() {
function ie (line 15974) | function ie(V, G, J, re) {
function pe (line 15986) | function pe(V, G) {
function ae (line 16005) | function ae(V, G, J) {
function He (line 16009) | function He() {
function Bt (line 16030) | function Bt(V, G, J, re, ve, he, Ie, Ee, Le, Xe) {
function mt (line 16046) | function mt(V, G, J, re, ve, he, Ie, Ee, Le, Xe) {
function kt (line 16078) | function kt(V, G) {
function At (line 16081) | function At(V, G) {
class wt (line 16100) | class wt {
method constructor (line 16101) | constructor(G, J) {
function $t (line 16218) | function $t(V, G) {
function Pt (line 16229) | function Pt(V, G, J, re) {
function qt (line 16232) | function qt(V, G) {
function Tn (line 16235) | function Tn(V, G, J, re, ve) {
class p (line 16277) | class p {
method constructor (line 16278) | constructor({file: R, sourceRoot: W} = {}) {
function h (line 16374) | function h(c, R) {
function T (line 16378) | function T(c, R) {
function x (line 16386) | function x(c, R, W) {
function w (line 16390) | function w(c) {
function S (line 16396) | function S(c, R) {
function A (line 16399) | function A(c, R) {
function U (line 16402) | function U(c, R, W, X, ie, pe) {
function M (line 16412) | function M(c, R, W) {
function hy (line 16437) | function hy({code: e, mappings: t}, s, i, r, a) {
function fy (line 16470) | function fy(e, t) {
method __init (line 16607) | __init() {
method __init2 (line 16610) | __init2() {
method constructor (line 16613) | constructor(t) {
method getHelperName (line 16618) | getHelperName(t) {
method emitHelpers (line 16627) | emitHelpers() {
function my (line 16668) | function my(e, t, s) {
function U1 (line 16672) | function U1(e, t) {
function yy (line 16683) | function yy(e, t, s) {
function K1 (line 16707) | function K1(e, t, s) {
function ky (line 16720) | function ky(e, t) {
function vy (line 16731) | function vy(e) {
method __init (line 16737) | __init() {
method constructor (line 16740) | constructor(t, s) {
method claimFreeName (line 16744) | claimFreeName(t) {
method findFreeName (line 16748) | findFreeName(t) {
function i (line 16778) | function i() {
function t (line 16791) | function t(s, i) {
method constructor (line 15562) | constructor() {
function e (line 16799) | function e() {}
function e (line 16816) | function e() {
function e (line 16870) | function e() {
function i (line 16903) | function i() {
function e (line 16945) | function e() {}
function ps (line 16949) | function ps(e) {
function Qa (line 16952) | function Qa(e, t) {
function Z1 (line 16957) | function Z1(e) {
function t (line 16963) | function t(s) {
method constructor (line 15562) | constructor() {
function wy (line 16982) | function wy(e) {
function t (line 16988) | function t(s) {
method constructor (line 15562) | constructor() {
function Sy (line 17008) | function Sy(e) {
function t (line 17014) | function t(s) {
method constructor (line 15562) | constructor() {
function Iy (line 17034) | function Iy() {
function t (line 17045) | function t(s) {
method constructor (line 15562) | constructor() {
function Ey (line 17076) | function Ey() {
function t (line 17087) | function t(s) {
method constructor (line 15562) | constructor() {
function Ay (line 17124) | function Ay() {
function t (line 17135) | function t(s) {
method constructor (line 15562) | constructor() {
function Py (line 17156) | function Py(e) {
function t (line 17162) | function t(s) {
method constructor (line 15562) | constructor() {
function Ny (line 17187) | function Ny(e, t) {
function t (line 17193) | function t(s, i) {
method constructor (line 15562) | constructor() {
function Ry (line 17227) | function Ry(e) {
function Ly (line 17232) | function Ly(e, t) {
function Oy (line 17235) | function Oy(e, t) {
function t (line 17241) | function t(s, i) {
method constructor (line 15562) | constructor() {
function Dy (line 17303) | function Dy(e) {
function t (line 17309) | function t(s) {
method constructor (line 15562) | constructor() {
function e (line 17325) | function e(t, s, i) {
function My (line 17331) | function My(e) {
function t (line 17339) | function t(s, i) {
method constructor (line 15562) | constructor() {
function Fy (line 17355) | function Fy(e, t, s) {
function e (line 17360) | function e(t, s, i) {
function t (line 17368) | function t(s) {
method constructor (line 15562) | constructor() {
function t (line 17411) | function t(s, i) {
method constructor (line 15562) | constructor() {
function Y1 (line 17461) | function Y1(e) {
function qy (line 17687) | function qy() {
function e (line 17705) | function e(t, s, i) {
function Ky (line 17797) | function Ky(e) {
function Xy (line 17846) | function Xy(e) {
function eT (line 17853) | function eT(e) {
function nT (line 17869) | function nT() {
function fp (line 17873) | function fp(e) {
function dp (line 17877) | function dp(e) {
function sT (line 17881) | function sT() {
function mp (line 17887) | function mp(e) {
function ll (line 17897) | function ll(e) {
function yp (line 17921) | function yp(e, t, s = !1, i = !1, r = 0) {
function iT (line 17948) | function iT(e, t) {
function Tp (line 17961) | function Tp() {
function al (line 17967) | function al(e, t = !1) {
function ul (line 17987) | function ul() {
function oT (line 17990) | function oT() {
function _p (line 18000) | function _p() {
function bp (line 18015) | function bp(e) {
function dl (line 18019) | function dl(e) {
function Zi (line 18064) | function Zi() {
function aT (line 18072) | function aT() {
function lT (line 18078) | function lT() {
function cT (line 18081) | function cT() {
function uT (line 18084) | function uT() {
function Cp (line 18091) | function Cp() {
function pT (line 18099) | function pT() {
function mi (line 18110) | function mi() {
function uo (line 18114) | function uo() {
function ml (line 18127) | function ml(e) {
function hT (line 18136) | function hT(e) {
function co (line 18139) | function co() {
function kp (line 18142) | function kp() {
function fT (line 18145) | function fT() {
function wp (line 18153) | function wp() {
function vp (line 18167) | function vp(e) {
function dT (line 18175) | function dT() {
function mT (line 18199) | function mT() {
function Sp (line 18202) | function Sp() {
function yT (line 18210) | function yT() {
function TT (line 18215) | function TT() {
function kT (line 18229) | function kT() {
function vT (line 18234) | function vT() {
function xT (line 18253) | function xT() {
function gT (line 18261) | function gT() {
function _T (line 18267) | function _T() {
function bT (line 18272) | function bT() {
function cl (line 18292) | function cl(e) {
function CT (line 18302) | function CT() {
function wT (line 18358) | function wT() {
function ST (line 18368) | function ST() {
function pl (line 18386) | function pl() {
function xp (line 18401) | function xp() {
function IT (line 18409) | function IT() {
function ET (line 18417) | function ET() {
function AT (line 18422) | function AT() {
function PT (line 18445) | function PT() {
function NT (line 18450) | function NT() {
function Qi (line 18467) | function Qi(e) {
function RT (line 18471) | function RT() {
function er (line 18474) | function er() {
function LT (line 18478) | function LT() {
function OT (line 18481) | function OT() {
function tr (line 18500) | function tr() {
function rt (line 18507) | function rt() {
function DT (line 18525) | function DT() {
function hl (line 18531) | function hl() {
function MT (line 18546) | function MT() {
function FT (line 18554) | function FT() {
function Ip (line 18569) | function Ip() {
function BT (line 18573) | function BT() {
function VT (line 18576) | function VT() {
function jT (line 18582) | function jT() {
function $T (line 18589) | function $T() {
function yl (line 18601) | function yl() {
function Tl (line 18610) | function Tl() {
function fl (line 18614) | function fl() {
function Ep (line 18618) | function Ep() {
function Ap (line 18628) | function Ap() {
function qT (line 18635) | function qT() {
function KT (line 18641) | function KT() {
function UT (line 18644) | function UT() {
function HT (line 18651) | function HT() {
function gp (line 18716) | function gp() {
function WT (line 18719) | function WT(e) {
function po (line 18734) | function po(e, t) {
function fi (line 18788) | function fi(e) {
function GT (line 18791) | function GT() {
function kl (line 18803) | function kl() {
function yi (line 18808) | function yi() {
function zT (line 18818) | function zT() {
function XT (line 18835) | function XT(e, t) {
function YT (line 18856) | function YT(e, t, s) {
function JT (line 18901) | function JT() {
function QT (line 18927) | function QT() {
function ZT (line 18970) | function ZT() {
function ek (line 19009) | function ek() {
function tk (line 19031) | function tk() {
function nk (line 19050) | function nk(e) {
function sk (line 19068) | function sk(e) {
function ik (line 19072) | function ik() {
function rk (line 19089) | function rk(e) {
function ok (line 19104) | function ok() {
function ak (line 19108) | function ak() {
function lk (line 19112) | function lk() {
function ck (line 19120) | function ck() {
function uk (line 19124) | function uk(e, t) {
function Pp (line 19128) | function Pp(e, t) {
function Np (line 19144) | function Np(e, t) {
function pk (line 19156) | function pk() {
function hk (line 19167) | function hk() {
function fk (line 19174) | function fk() {
function mk (line 19193) | function mk() {
function yk (line 19226) | function yk(e) {
function Tk (line 19240) | function Tk() {
function xl (line 19251) | function xl() {
function Lp (line 19254) | function Lp(e) {
function Op (line 19261) | function Op() {
function kk (line 19274) | function kk() {
function vk (line 19292) | function vk() {
function xk (line 19296) | function xk(e) {
function gk (line 19326) | function gk() {
function Dp (line 19329) | function Dp() {
function Mp (line 19370) | function Mp() {
function dn (line 19374) | function dn() {
function Ti (line 19413) | function Ti() {
function wk (line 19428) | function wk(e) {
function Sk (line 19441) | function Sk() {
method constructor (line 19468) | constructor(t) {
function sr (line 19473) | function sr(e = !1) {
function mn (line 19478) | function mn(e = !1, t = !1) {
function qp (line 19486) | function qp(e, t) {
function Ak (line 19501) | function Ak(e) {
function Pk (line 19504) | function Pk(e) {
function Kp (line 19509) | function Kp(e) {
function Nk (line 19514) | function Nk(e) {
function To (line 19518) | function To(e, t, s) {
function rr (line 19548) | function rr() {
function Up (line 19576) | function Up() {
function bl (line 19587) | function bl(e, t = !1) {
function Hp (line 19590) | function Hp(e, t = !1) {
function Rk (line 19596) | function Rk(e, t, s) {
function Wp (line 19603) | function Wp(e, t, s) {
function Gp (line 19655) | function Gp() {
function ko (line 19662) | function ko() {
function Lk (line 19675) | function Lk() {
function Ok (line 19681) | function Ok(e) {
function Cl (line 19689) | function Cl() {
function _o (line 19693) | function _o() {
function xo (line 19804) | function xo() {
function Dk (line 19807) | function Dk() {
function zp (line 19813) | function zp() {
function Mk (line 19817) | function Mk() {
function Xp (line 19823) | function Xp(e) {
function Fk (line 19852) | function Fk() {
function gl (line 19858) | function gl() {
function wl (line 19866) | function wl() {
function Bk (line 19870) | function Bk() {
function Vk (line 19882) | function Vk() {
function Sl (line 19885) | function Sl() {
function Yp (line 19898) | function Yp(e, t) {
function jk (line 19944) | function jk(e) {
function $k (line 19954) | function $k(e, t) {
function qk (line 19962) | function qk(e, t) {
function Kk (line 19978) | function Kk(e, t, s) {
function go (line 19984) | function go(e) {
function _l (line 20002) | function _l(e, t) {
function ir (line 20012) | function ir(e) {
function Jp (line 20018) | function Jp(e, t = 0) {
function Il (line 20026) | function Il(e, t = 0) {
function Qp (line 20032) | function Qp(e, t = !1) {
function Zp (line 20043) | function Zp(e) {
function Xn (line 20051) | function Xn() {
function Uk (line 20056) | function Uk() {
function Hk (line 20059) | function Hk() {
function Wk (line 20065) | function Wk() {
function Gk (line 20081) | function Gk(e) {
function Ln (line 20087) | function Ln(e) {
function eh (line 20093) | function eh() {
function Pl (line 20100) | function Pl() {
function zk (line 20108) | function zk() {
function Xk (line 20111) | function Xk() {
function El (line 20121) | function El() {
function Yk (line 20142) | function Yk() {
function Jk (line 20145) | function Jk() {
function Qk (line 20159) | function Qk() {
function Zk (line 20179) | function Zk() {
function e0 (line 20184) | function e0() {
function t0 (line 20187) | function t0() {
function n0 (line 20190) | function n0() {
function Nl (line 20193) | function Nl(e = !1) {
function bo (line 20213) | function bo() {
function Rl (line 20216) | function Rl() {
function So (line 20219) | function So() {
function Ll (line 20222) | function Ll() {
function Ol (line 20228) | function Ol(e) {
function s0 (line 20236) | function s0() {
function On (line 20239) | function On() {
function Rs (line 20254) | function Rs() {
function i0 (line 20267) | function i0() {
function Dl (line 20276) | function Dl() {
function r0 (line 20282) | function r0() {
function o0 (line 20287) | function o0() {
function Ml (line 20296) | function Ml() {
function a0 (line 20312) | function a0() {
function Co (line 20315) | function Co(e, t, s) {
function l0 (line 20362) | function l0() {
function c0 (line 20379) | function c0() {
function sh (line 20386) | function sh(e) {
function u0 (line 20394) | function u0() {
function p0 (line 20397) | function p0() {
function h0 (line 20400) | function h0() {
function wo (line 20411) | function wo() {
function Al (line 20419) | function Al() {
function ih (line 20432) | function ih() {
function f0 (line 20517) | function f0() {
function rh (line 20530) | function rh() {
function th (line 20533) | function th() {
function nh (line 20539) | function nh() {
function d0 (line 20547) | function d0() {
function Wt (line 20555) | function Wt() {
function vi (line 20558) | function vi() {
function oh (line 20562) | function oh() {
function Fl (line 20566) | function Fl() {
function m0 (line 20573) | function m0(e) {
function y0 (line 20578) | function y0(e, t, s) {
function T0 (line 20606) | function T0() {
function k0 (line 20613) | function k0() {
function v0 (line 20625) | function v0() {
function x0 (line 20631) | function x0(e) {
function g0 (line 20658) | function g0() {
function _0 (line 20667) | function _0() {
function b0 (line 20677) | function b0() {
function C0 (line 20695) | function C0() {
function w0 (line 20703) | function w0() {
function S0 (line 20710) | function S0(e) {
function I0 (line 20725) | function I0() {
function E0 (line 20731) | function E0() {
function A0 (line 20738) | function A0() {
function P0 (line 20751) | function P0() {
function N0 (line 20771) | function N0() {
function R0 (line 20778) | function R0() {
function L0 (line 20782) | function L0() {
function O0 (line 20791) | function O0(e, t) {
function D0 (line 20812) | function D0() {
function M0 (line 20828) | function M0(e, t = !1) {
function F0 (line 20841) | function F0() {
function ah (line 20851) | function ah() {
function B0 (line 20857) | function B0() {
function V0 (line 20864) | function V0() {
function j0 (line 20876) | function j0() {
function q0 (line 20896) | function q0() {
function _n (line 20908) | function _n(e) {
function K0 (line 20913) | function K0(e) {
function $l (line 21011) | function $l() {
function ph (line 21015) | function ph() {
function U0 (line 21029) | function U0() {
function hh (line 21034) | function hh() {
function H0 (line 21039) | function H0() {
function W0 (line 21044) | function W0() {
function G0 (line 21047) | function G0() {
function z0 (line 21054) | function z0() {
function X0 (line 21061) | function X0() {
function Y0 (line 21067) | function Y0() {
function J0 (line 21107) | function J0() {
function Q0 (line 21111) | function Q0() {
function Z0 (line 21117) | function Z0() {
function ev (line 21122) | function ev() {
function tv (line 21145) | function tv() {
function nv (line 21150) | function nv() {
function sv (line 21154) | function sv() {
function Vl (line 21176) | function Vl(e) {
function iv (line 21180) | function iv() {
function rv (line 21183) | function rv() {
function ov (line 21186) | function ov() {
function av (line 21189) | function av(e) {
function gi (line 21196) | function gi(e = !1, t = 0) {
function ql (line 21207) | function ql(e) {
function Bl (line 21211) | function Bl() {
function ch (line 21221) | function ch(e) {
function fh (line 21229) | function fh(e, t) {
function lv (line 21239) | function lv(e) {
function lr (line 21245) | function lr(e, t, s = !1) {
function dh (line 21265) | function dh(e = !1, t = 0) {
function Io (line 21275) | function Io(e, t = !1) {
function mh (line 21295) | function mh() {
function yh (line 21304) | function yh() {
function cv (line 21310) | function cv(e) {
function uv (line 21325) | function uv(e, t) {
function pv (line 21358) | function pv(e, t, s) {
function or (line 21405) | function or(e, t) {
function xi (line 21413) | function xi(e) {
function jl (line 21417) | function jl() {
function ar (line 21425) | function ar() {
function hv (line 21443) | function hv(e, t = !1) {
function fv (line 21455) | function fv() {
function Th (line 21464) | function Th() {
function dv (line 21487) | function dv() {
function mv (line 21508) | function mv() {
function yv (line 21515) | function yv() {
function kh (line 21540) | function kh() {
function cr (line 21543) | function cr() {
function Tv (line 21549) | function Tv() {
function kv (line 21554) | function kv() {
function vh (line 21557) | function vh() {
function vv (line 21562) | function vv() {
function xv (line 21569) | function xv() {
function Kl (line 21582) | function Kl() {
function gv (line 21599) | function gv() {
function _v (line 21610) | function _v() {
function bv (line 21623) | function bv() {
function xh (line 21628) | function xh() {
function Cv (line 21666) | function Cv() {
function uh (line 21669) | function uh() {
function wv (line 21672) | function wv() {
function Sv (line 21702) | function Sv() {
function gh (line 21718) | function gh() {
function Ev (line 21731) | function Ev() {
method constructor (line 21749) | constructor(t, s) {
function Pv (line 21754) | function Pv(e, t, s, i) {
function Rv (line 21768) | function Rv(e) {
function Lv (line 21793) | function Lv(e) {
method __init (line 21800) | __init() {
method __init2 (line 21803) | __init2() {
method __init3 (line 21806) | __init3() {
method constructor (line 21809) | constructor(t, s, i, r, a) {
method snapshot (line 21819) | snapshot() {
method restoreToSnapshot (line 21822) | restoreToSnapshot(t) {
method dangerouslyGetAndRemoveCodeSinceSnapshot (line 21825) | dangerouslyGetAndRemoveCodeSinceSnapshot(t) {
method reset (line 21829) | reset() {
method matchesContextualAtIndex (line 21834) | matchesContextualAtIndex(t, s) {
method identifierNameAtIndex (line 21840) | identifierNameAtIndex(t) {
method identifierNameAtRelativeIndex (line 21843) | identifierNameAtRelativeIndex(t) {
method identifierName (line 21846) | identifierName() {
method identifierNameForToken (line 21849) | identifierNameForToken(t) {
method rawCodeForToken (line 21852) | rawCodeForToken(t) {
method stringValueAtIndex (line 21855) | stringValueAtIndex(t) {
method stringValue (line 21858) | stringValue() {
method stringValueForToken (line 21861) | stringValueForToken(t) {
method matches1AtIndex (line 21864) | matches1AtIndex(t, s) {
method matches2AtIndex (line 21867) | matches2AtIndex(t, s, i) {
method matches3AtIndex (line 21870) | matches3AtIndex(t, s, i, r) {
method matches1 (line 21877) | matches1(t) {
method matches2 (line 21880) | matches2(t, s) {
method matches3 (line 21886) | matches3(t, s, i) {
method matches4 (line 21893) | matches4(t, s, i, r) {
method matches5 (line 21901) | matches5(t, s, i, r, a) {
method matchesContextual (line 21910) | matchesContextual(t) {
method matchesContextIdAndLabel (line 21913) | matchesContextIdAndLabel(t, s) {
method previousWhitespaceAndComments (line 21916) | previousWhitespaceAndComments() {
method replaceToken (line 21925) | replaceToken(t) {
method replaceTokenTrimmingLeftWhitespace (line 21933) | replaceTokenTrimmingLeftWhitespace(t) {
method removeInitialToken (line 21944) | removeInitialToken() {
method removeToken (line 21947) | removeToken() {
method removeBalancedCode (line 21950) | removeBalancedCode() {
method copyExpectedToken (line 21961) | copyExpectedToken(t) {
method copyToken (line 21966) | copyToken() {
method copyTokenWithPrefix (line 21977) | copyTokenWithPrefix(t) {
method appendTokenPrefix (line 21989) | appendTokenPrefix() {
method appendTokenSuffix (line 22025) | appendTokenSuffix() {
method appendCode (line 22036) | appendCode(t) {
method currentToken (line 22039) | currentToken() {
method currentTokenCode (line 22042) | currentTokenCode() {
method tokenAtRelativeIndex (line 22046) | tokenAtRelativeIndex(t) {
method currentIndex (line 22049) | currentIndex() {
method nextToken (line 22052) | nextToken() {
method previousToken (line 22057) | previousToken() {
method finish (line 22060) | finish() {
method isAtEnd (line 22070) | isAtEnd() {
function Mv (line 22081) | function Mv(e, t, s, i) {
function Jl (line 22188) | function Jl(e, t) {
function Fv (line 22192) | function Fv(e) {
function Eh (line 22212) | function Eh(e) {
function No (line 22253) | function No(e) {
function Bv (line 22272) | function Bv(e) {
function Vv (line 22289) | function Vv(e) {
function Kv (line 22310) | function Kv(e) {
function Hv (line 22330) | function Hv(e) {
function Wv (line 22344) | function Wv(e, t, s) {
function ur (line 22365) | function ur(e) {
method __init (line 22383) | __init() {
method __init2 (line 22386) | __init2() {
method __init3 (line 22389) | __init3() {
method constructor (line 22392) | constructor(t, s, i, r, a, u, d, y, g, L) {
method getPrefixCode (line 22411) | getPrefixCode() {
method getSuffixCode (line 22420) | getSuffixCode() {
method process (line 22429) | process() {
method processImportEquals (line 22457) | processImportEquals() {
method processImport (line 22468) | processImport() {
method removeImportAndDetectIfType (line 22507) | removeImportAndDetectIfType() {
method removeRemainingImport (line 22550) | removeRemainingImport() {
method processIdentifier (line 22554) | processIdentifier() {
method processObjectShorthand (line 22586) | processObjectShorthand() {
method processExport (line 22591) | processExport() {
method processAssignment (line 22674) | processAssignment() {
method processComplexAssignment (line 22695) | processComplexAssignment() {
method processPreIncDec (line 22711) | processPreIncDec() {
method processPostIncDec (line 22729) | processPostIncDec() {
method processExportDefault (line 22751) | processExportDefault() {
method copyDecorators (line 22823) | copyDecorators() {
method processExportVar (line 22846) | processExportVar() {
method isSimpleExportVar (line 22851) | isSimpleExportVar() {
method processSimpleExportVar (line 22863) | processSimpleExportVar() {
method processComplexExportVar (line 22874) | processComplexExportVar() {
method processExportFunction (line 22928) | processExportFunction() {
method processNamedFunction (line 22933) | processNamedFunction() {
method processExportClass (line 22967) | processExportClass() {
method processExportBindings (line 22975) | processExportBindings() {
method processExportStar (line 23018) | processExportStar() {
method shouldElideExportedIdentifier (line 23032) | shouldElideExportedIdentifier(t) {
function pr (line 23044) | function pr(e) {
method constructor (line 23062) | constructor(t, s, i, r, a, u) {
method process (line 23078) | process() {
method processImportEquals (line 23161) | processImportEquals() {
method processImport (line 23179) | processImport() {
method removeImportTypeBindings (line 23197) | removeImportTypeBindings() {
method isTypeName (line 23265) | isTypeName(t) {
method processExportDefault (line 23270) | processExportDefault() {
method processNamedExports (line 23331) | processNamedExports() {
method shouldElideExportedName (line 23354) | shouldElideExportedName(t) {
function px (line 23367) | function px(e) {
method constructor (line 23375) | constructor(t, s, i) {
method process (line 23381) | process() {
method processNamedExportEnum (line 23398) | processNamedExportEnum() {
method processDefaultExportEnum (line 23405) | processDefaultExportEnum() {
method processEnum (line 23413) | processEnum() {
method processEnumElement (line 23445) | processEnumElement(t, s) {
function dx (line 23462) | function dx(e) {
function mx (line 23465) | function mx(e) {
method __init (line 23490) | __init() {
method constructor (line 23493) | constructor(t, s, i, r) {
method process (line 23501) | process() {
method getHoistedCode (line 23527) | getHoistedCode() {
method extractHoistedCalls (line 23532) | extractHoistedCalls() {
function vx (line 23573) | function vx(e) {
method constructor (line 23580) | constructor(t) {
method process (line 23583) | process() {
function bx (line 23597) | function bx(e) {
method constructor (line 23604) | constructor(t, s) {
method process (line 23607) | process() {
function Sx (line 23622) | function Sx(e) {
method constructor (line 23629) | constructor(t, s) {
method process (line 23632) | process() {
method isLastSubscriptInChain (line 23711) | isLastSubscriptInChain() {
method justSkippedSuper (line 23729) | justSkippedSuper() {
function Ax (line 23755) | function Ax(e) {
method constructor (line 23763) | constructor(t, s, i, r) {
method process (line 23770) | process() {
method tryProcessCreateClassCall (line 23813) | tryProcessCreateClassCall(t) {
method findDisplayName (line 23824) | findDisplayName(t) {
method getDisplayNameFromFilename (line 23845) | getDisplayNameFromFilename() {
method classNeedsDisplayName (line 23852) | classNeedsDisplayName() {
function Rx (line 23895) | function Rx(e) {
method __init (line 23902) | __init() {
method constructor (line 23905) | constructor(t, s) {
method setExtractedDefaultExportName (line 23911) | setExtractedDefaultExportName(t) {
method getPrefixCode (line 23914) | getPrefixCode() {
method getSuffixCode (line 23923) | getSuffixCode() {
method process (line 23958) | process() {
function Mx (line 24016) | function Mx(e) {
function Zh (line 24027) | function Zh(e) {
method constructor (line 24036) | constructor(t, s, i) {
method process (line 24042) | process() {
method processEnum (line 24067) | processEnum(t = !1) {
method processEnumBody (line 24088) | processEnumBody(t) {
method extractEnumKeyInfo (line 24114) | extractEnumKeyInfo(t) {
method processStringLiteralEnumMember (line 24132) | processStringLiteralEnumMember(t, s, i) {
method processExplicitValueEnumMember (line 24143) | processExplicitValueEnumMember(t, s, i) {
method processImplicitValueEnumMember (line 24166) | processImplicitValueEnumMember(t, s, i, r) {
function yn (line 24177) | function yn(e) {
method __init (line 24207) | __init() {
method __init2 (line 24210) | __init2() {
method constructor (line 24213) | constructor(t, s, i, r) {
method transform (line 24285) | transform() {
method processBalancedCode (line 24315) | processBalancedCode() {
method processToken (line 24336) | processToken() {
method processNamedClass (line 24344) | processNamedClass() {
method processClass (line 24352) | processClass() {
method processClassBody (line 24388) | processClassBody(t, s) {
method makeConstructorInitCode (line 24469) | makeConstructorInitCode(t, s, i) {
method processPossibleArrowParamEnd (line 24474) | processPossibleArrowParamEnd() {
method processPossibleAsyncArrowWithTypeParams (line 24493) | processPossibleAsyncArrowWithTypeParams() {
method processPossibleTypeRange (line 24520) | processPossibleTypeRange() {
method shiftMappings (line 24532) | shiftMappings(t, s) {
function e (line 24550) | function e(t) {
function pg (line 24600) | function pg(e) {
function mg (line 24606) | function mg(e, t) {
function yg (line 24649) | function yg(e, t) {
function Tg (line 24656) | function Tg(e) {
function xg (line 24662) | function xg(e) {
function gg (line 24676) | function gg(e, t, s) {
function _g (line 24687) | function _g(e, t, s) {
function vs (line 24707) | function vs(e) {
function $g (line 24729) | function $g() {
function qg (line 24733) | function qg(e, t) {
function Kg (line 24771) | function Kg(e, t) {
function cf (line 24776) | function cf(e, t) {
function p (line 24898) | function p(n, o) {
method constructor (line 16278) | constructor({file: R, sourceRoot: W} = {}) {
function h (line 24905) | function h(n, o) {
function T (line 24920) | function T(n, o) {
function w (line 24952) | function w(n, o) {
function M (line 24958) | function M(n, o) {
function X (line 25047) | function X(n) {
function ie (line 25050) | function ie(n, o, l) {
function tt (line 25077) | function tt(n) {
function nt (line 25082) | function nt(n) {
function $t (line 25101) | function $t(n, o) {
function Tn (line 25130) | function Tn(n) {
function V (line 25157) | function V(n, o) {
function ut (line 25176) | function ut(n, o) {
function bi (line 26354) | function bi(n, o) {
function es (line 26372) | function es(n, o) {
function Ms (line 27283) | function Ms(n) {
function gs (line 27289) | function gs(n) {
function Fs (line 28338) | function Fs(n, o, l, f) {
function qo (line 28390) | function qo(n) {
function Uo (line 28535) | function Uo(n) {
function Ho (line 28733) | function Ho(n) {
function Tr (line 28758) | function Tr(n) {
function Wo (line 28837) | function Wo(n) {
function Go (line 28852) | function Go(n) {
function kr (line 28927) | function kr(n) {
function vf (line 28967) | function vf(n) {
function xf (line 29016) | function xf(n) {
function Lc (line 29059) | function Lc(n) {
function gf (line 29068) | function gf(n) {
function _f (line 29244) | function _f(n) {
function bf (line 29256) | function bf(n) {
function Cf (line 29270) | function Cf(n) {
function vr (line 29305) | function vr(n) {
function Oc (line 29315) | function Oc(n) {
function Dc (line 29320) | function Dc(n) {
function Mc (line 29346) | function Mc(n) {
function wf (line 29792) | function wf(n, o) {
function Fc (line 29795) | function Fc(n) {
function Sf (line 30098) | function Sf(n, o) {
function If (line 30101) | function If(n, o, l) {
function Ef (line 30104) | function Ef(n, o) {
function i (line 30142) | function i(p) {
function r (line 30145) | function r() {}
function d (line 30302) | function d(p) {
function L (line 31805) | function L(p, h) {
function kf (line 31817) | function kf() {
function mf (line 31833) | function mf(e, t, s) {
function Wg (line 31838) | function Wg(e) {
function Gg (line 31854) | function Gg(e) {
function zg (line 31948) | function zg(e, t) {
function Xg (line 31962) | function Xg(e) {
function Yg (line 32076) | function Yg() {
function Jg (line 32086) | function Jg(e, t) {
function yf (line 32112) | function yf(e, t) {
FILE: src/components/MDX/Sandpack/templateRSC.ts
function hideFiles (line 10) | function hideFiles(files: SandpackFiles): SandpackFiles {
constant RSC_SOURCE_FILES (line 20) | const RSC_SOURCE_FILES = {
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 24) | interface PageHeadingProps {
function CopyAsMarkdownButton (line 34) | function CopyAsMarkdownButton() {
function PageHeading (line 79) | 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>(
FILE: textlint/generators/genTranslateGlossaryDocs.js
class Markdown (line 8) | class Markdown {
method content (line 11) | get content() {
method constructor (line 16) | constructor(text) {
method #add (line 20) | #add(text) {
method h1 (line 24) | h1(text) {
method h2 (line 27) | h2(text) {
method h3 (line 30) | h3(text) {
method blockQuote (line 33) | blockQuote(text) {
method tableHeader (line 36) | tableHeader(...headers) {
method tableBody (line 48) | tableBody(...bodies) {
method tableEnd (line 55) | tableEnd() {
class Utils (line 60) | class Utils {
method keyToStr (line 61) | static keyToStr(keyText) {
FILE: textlint/rules/translateGlossary.js
method [Syntax.Str] (line 14) | [Syntax.Str](node) {
FILE: textlint/utils/errMsg.js
function errMsgTranslateGlossary (line 8) | function errMsgTranslateGlossary(source, target) {
FILE: textlint/utils/is.js
function isKoreanIncluded (line 7) | function isKoreanIncluded(text) {
FILE: textlint/utils/strip.js
function stripDoubleQuotes (line 7) | function stripDoubleQuotes(text) {
function stripParentheses (line 17) | function stripParentheses(text) {
Condensed preview — 476 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (6,253K 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": 753,
"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-rsc-sandpack/SKILL.md",
"chars": 8253,
"preview": "---\nname: docs-rsc-sandpack\ndescription: Use when adding interactive RSC (React Server Components) code examples to Reac"
},
{
"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": 24985,
"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": ".claude/skills/write/SKILL.md",
"chars": 6318,
"preview": "---\nname: write\ndescription: Use when creating new React documentation pages or updating existing ones. Accepts instruct"
},
{
"path": ".editorconfig",
"chars": 99,
"preview": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true\nindent_style = space\n"
},
{
"path": ".eslintignore",
"chars": 62,
"preview": "scripts\nplugins\nnext.config.js\n.claude/\nworker-bundle.dist.js\n"
},
{
"path": ".eslintrc",
"chars": 1102,
"preview": "{\n \"root\": true,\n \"extends\": \"next/core-web-vitals\",\n \"parser\": \"@typescript-eslint/parser\",\n \"plugins\": [\"@typescri"
},
{
"path": ".gitattributes",
"chars": 134,
"preview": "# https://git-scm.com/docs/gitattributes\n\n# Ensure consistent EOL(LF) for all files that Git considers text files.\n* tex"
},
{
"path": ".github/CODEOWNERS",
"chars": 46,
"preview": "* @hg-pyun @gnujoow @eomttt @lumirlumir\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 21,
"preview": "github: [lumirlumir]\n"
},
{
"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/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/ISSUE_TEMPLATE/need-translation.md",
"chars": 298,
"preview": "---\nname: 번역 필요\nabout: 번역이 필요한 문서에 대해 이 템플릿을 사용해주세요\ntitle: '[번역 필요]: '\nlabels: 'need translation'\nassignees: ''\n---\n\n## "
},
{
"path": ".github/ISSUE_TEMPLATE/term.md",
"chars": 549,
"preview": "---\nname: Term\nabout: 문서에서 사용되는 용어 번역에 논의가 필요한 경우 이 템플릿을 사용해주세요\ntitle: ''\nlabels: discussion, term\nassignees: ''\n---\n\n##"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 1105,
"preview": "<!--\n PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다!\n\n 기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요.\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/site_lint.yml",
"chars": 863,
"preview": "name: Site Lint / Heading ID check\n\non:\n push:\n branches:\n - main # change this if your default branch is named"
},
{
"path": ".github/workflows/textlint_lint.yml",
"chars": 1256,
"preview": "name: Textlint Lint\n\non:\n push:\n branches:\n - main\n paths:\n - 'src/**/*.md'\n - 'textlint/**/*.js'\n"
},
{
"path": ".github/workflows/textlint_test.yml",
"chars": 1166,
"preview": "name: Textlint Test\n\non:\n push:\n branches:\n - main\n paths:\n - 'textlint/**/*.js'\n - '.github/workf"
},
{
"path": ".gitignore",
"chars": 610,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n/.pnp"
},
{
"path": ".husky/common.sh",
"chars": 175,
"preview": "#!/bin/sh\ncommand_exists () {\n command -v \"$1\" >/dev/null 2>&1\n}\n\n# Windows 10, Git Bash and Yarn workaround\nif command"
},
{
"path": ".husky/pre-commit",
"chars": 89,
"preview": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n. \"$(dirname \"$0\")/common.sh\"\n\nyarn lint-staged\n"
},
{
"path": ".prettierignore",
"chars": 100,
"preview": "src/content/**/*.md\nsrc/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/worker-bundle.dist.js\n"
},
{
"path": ".prettierrc",
"chars": 322,
"preview": "{\n \"bracketSpacing\": false,\n \"singleQuote\": true,\n \"bracketSameLine\": true,\n \"trailingComma\": \"es5\",\n \"printWidth\":"
},
{
"path": ".textlintrc.js",
"chars": 460,
"preview": "module.exports = {\n rules: {\n 'allowed-uris': {\n disallowed: {\n /**\n * Disallow URIs starting wi"
},
{
"path": ".vscode/extensions.json",
"chars": 123,
"preview": "{\n \"recommendations\": [\n \"dbaeumer.vscode-eslint\",\n \"esbenp.prettier-vscode\",\n \"editorconfig.editorconfig\"\n ]"
},
{
"path": ".vscode/settings.json",
"chars": 195,
"preview": "{\n \"editor.formatOnSave\": true,\n \"editor.formatOnPaste\": true,\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n"
},
{
"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": 2912,
"preview": "# 기여자 행동 강령 규약\n\n## 서약\n\n우리는 구성원, 기여자 및 리더로서 커뮤니티에 참여하여\n연령, 신체 크기, 눈에 보이거나 보이지 않는 장애, 민족성, 성별, 성 정체성과 표현,\n경력, 학력, 사회 경제적 지"
},
{
"path": "CONTRIBUTING.md",
"chars": 3483,
"preview": "# 기여하기\n\nReact 문서 기여에 관심을 가져주셔서 감사합니다!\n\n## 행동 강령\n\n페이스북<sup>Facebook</sup>은 프로젝트 참가자가 준수해야 하는 행동 강령을 채택했습니다. [전문을 읽어보세요](h"
},
{
"path": "LICENSE-DOCS.md",
"chars": 18525,
"preview": "Attribution 4.0 International\n\n=======================================================================\n\nCreative Commons"
},
{
"path": "README.md",
"chars": 3268,
"preview": "# ko.react.dev\n\n[![React Korea 디스코드 채널](https://img.shields.io/badge/discord-channel?style=for-the-badge&logo=discord&lo"
},
{
"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": 3407,
"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": 9190,
"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": 3134,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "eslint.config.mjs",
"chars": 646,
"preview": "/* eslint-disable import/no-anonymous-default-export */\nimport md from 'eslint-markdown';\n\nexport default [\n {\n igno"
},
{
"path": "lint-staged.config.js",
"chars": 351,
"preview": "module.exports = {\n '*': 'yarn editorconfig-checker',\n '*.{js,ts,jsx,tsx,css}': 'yarn prettier',\n 'src/**/*.md': ['ya"
},
{
"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": 5059,
"preview": "{\n \"private\": true,\n \"license\": \"CC\",\n \"scripts\": {\n \"analyze\": \"ANALYZE=true next build\",\n \"dev\": \"next-remote"
},
{
"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": 33,
"preview": "did:plc:uorpbnp2q32vuvyeruwauyhe\n"
},
{
"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/buildRscWorker.mjs",
"chars": 1622,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"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": 3078,
"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/Feedback.tsx",
"chars": 5617,
"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": 31011,
"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": 120278,
"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": 2492,
"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": 22485,
"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": 4938,
"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": 4187,
"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": 4236,
"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": 4010,
"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": 1674,
"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": 15667,
"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": 556,
"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": 830,
"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": 7676,
"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": 4408,
"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": 3085,
"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": 8212,
"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": 892,
"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": 840,
"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/ResetButton.tsx",
"chars": 581,
"preview": "/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\nimport {IconRestart} from '."
},
{
"path": "src/components/MDX/Sandpack/SandpackRSCRoot.tsx",
"chars": 2556,
"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": 3970,
"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/sandpack-rsc/RscFileBridge.tsx",
"chars": 1205,
"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/sandpack-rsc/sandbox-code/src/__react_refresh_init__.js",
"chars": 587,
"preview": "// Must run before React loads. Creates __REACT_DEVTOOLS_GLOBAL_HOOK__ so\n// React's renderer injects into it, enabling "
},
{
"path": "src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-client.js",
"chars": 12182,
"preview": "// RSC Client Entry Point\n// Runs inside the Sandpack iframe. Orchestrates the RSC pipeline:\n// 1. Creates a Web Worker "
},
{
"path": "src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-server.js",
"chars": 15313,
"preview": "// Server Worker for RSC Sandboxes\n// Runs inside a Blob URL Web Worker.\n// Pre-bundled by esbuild with React (server bu"
},
{
"path": "src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/webpack-shim.js",
"chars": 702,
"preview": "// Minimal webpack shim for RSDW compatibility.\n// Works in both browser (window) and worker (self) contexts via globalT"
},
{
"path": "src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/worker-bundle.dist.js",
"chars": 892397,
"preview": "// Minimal webpack shim for RSDW compatibility.\n// Works in both browser (window) and worker (self) contexts via globalT"
},
{
"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/templateRSC.ts",
"chars": 3724,
"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": 2498,
"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": 2773,
"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": 3832,
"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": 1580,
"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": 1202,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
}
]
// ... and 276 more files (download for full content)
About this extraction
This page contains the full source code of the reactjs/ko.react.dev GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 476 files (4.8 MB), approximately 1.3M tokens, and a symbol index with 1311 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.