├── .editorconfig ├── .env.development ├── .env.production ├── .eslintignore ├── .eslintrc ├── .github ├── dependabot.yml └── workflows │ ├── analyze.yml │ ├── analyze_comment.yml │ ├── discord_notify.yml │ ├── label_core_team_prs.yml │ └── site_lint.yml ├── .gitignore ├── .husky └── pre-commit ├── .prettierignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE-DOCS.md ├── README.md ├── TRANSLATION.md ├── colors.js ├── next-env.d.ts ├── next.config.js ├── package.json ├── plugins ├── gatsby-remark-header-custom-ids │ └── gatsby-ssr.js ├── markdownToHtml.js ├── remark-header-custom-ids.js └── remark-smartypants.js ├── postcss.config.js ├── public ├── .well-known │ └── atproto-did ├── android-chrome-192x192.png ├── android-chrome-384x384.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── favicon_old.ico ├── fonts │ └── Source-Code-Pro-Regular.woff2 ├── html │ └── single-file-example.html ├── images │ ├── blog │ │ └── introducing-react-dev │ │ │ ├── home-dark.png │ │ │ └── home-light.png │ ├── brand │ │ ├── logo_dark.svg │ │ ├── logo_light.svg │ │ ├── wordmark_dark.svg │ │ └── wordmark_light.svg │ ├── docs │ │ ├── diagrams │ │ │ ├── conditional_render_tree.dark.png │ │ │ ├── conditional_render_tree.png │ │ │ ├── generic_dependency_tree.dark.png │ │ │ ├── generic_dependency_tree.png │ │ │ ├── generic_render_tree.dark.png │ │ │ ├── generic_render_tree.png │ │ │ ├── module_dependency_tree.dark.png │ │ │ ├── module_dependency_tree.png │ │ │ ├── passing_data_context_close.dark.png │ │ │ ├── passing_data_context_close.png │ │ │ ├── passing_data_context_far.dark.png │ │ │ ├── passing_data_context_far.png │ │ │ ├── passing_data_lifting_state.dark.png │ │ │ ├── passing_data_lifting_state.png │ │ │ ├── passing_data_prop_drilling.dark.png │ │ │ ├── passing_data_prop_drilling.png │ │ │ ├── prerender.dark.png │ │ │ ├── prerender.png │ │ │ ├── preserving_state_add_component.dark.png │ │ │ ├── preserving_state_add_component.png │ │ │ ├── preserving_state_diff_position_p1.dark.png │ │ │ ├── preserving_state_diff_position_p1.png │ │ │ ├── preserving_state_diff_position_p2.dark.png │ │ │ ├── preserving_state_diff_position_p2.png │ │ │ ├── preserving_state_diff_position_p3.dark.png │ │ │ ├── preserving_state_diff_position_p3.png │ │ │ ├── preserving_state_diff_pt1.dark.png │ │ │ ├── preserving_state_diff_pt1.png │ │ │ ├── preserving_state_diff_pt2.dark.png │ │ │ ├── preserving_state_diff_pt2.png │ │ │ ├── preserving_state_diff_same_pt1.dark.png │ │ │ ├── preserving_state_diff_same_pt1.png │ │ │ ├── preserving_state_diff_same_pt2.dark.png │ │ │ ├── preserving_state_diff_same_pt2.png │ │ │ ├── preserving_state_dom_tree.dark.png │ │ │ ├── preserving_state_dom_tree.png │ │ │ ├── preserving_state_increment.dark.png │ │ │ ├── preserving_state_increment.png │ │ │ ├── preserving_state_remove_component.dark.png │ │ │ ├── preserving_state_remove_component.png │ │ │ ├── preserving_state_same_component.dark.png │ │ │ ├── preserving_state_same_component.png │ │ │ ├── preserving_state_tree.dark.png │ │ │ ├── preserving_state_tree.png │ │ │ ├── prewarm.dark.png │ │ │ ├── prewarm.png │ │ │ ├── render_tree.dark.png │ │ │ ├── render_tree.png │ │ │ ├── responding_to_input_flow.dark.png │ │ │ ├── responding_to_input_flow.png │ │ │ ├── sharing_data_child.dark.png │ │ │ ├── sharing_data_child.png │ │ │ ├── sharing_data_child_clicked.dark.png │ │ │ ├── sharing_data_child_clicked.png │ │ │ ├── sharing_data_parent.dark.png │ │ │ ├── sharing_data_parent.png │ │ │ ├── sharing_data_parent_clicked.dark.png │ │ │ ├── sharing_data_parent_clicked.png │ │ │ ├── sharing_state_child.dark.png │ │ │ ├── sharing_state_child.png │ │ │ ├── sharing_state_child_clicked.dark.png │ │ │ ├── sharing_state_child_clicked.png │ │ │ ├── sharing_state_parent.dark.png │ │ │ ├── sharing_state_parent.png │ │ │ ├── sharing_state_parent_clicked.dark.png │ │ │ ├── sharing_state_parent_clicked.png │ │ │ ├── use_client_module_dependency.dark.png │ │ │ ├── use_client_module_dependency.png │ │ │ ├── use_client_render_tree.dark.png │ │ │ ├── use_client_render_tree.png │ │ │ ├── writing_jsx_form.dark.png │ │ │ ├── writing_jsx_form.png │ │ │ ├── writing_jsx_html.dark.png │ │ │ ├── writing_jsx_html.png │ │ │ ├── writing_jsx_js.dark.png │ │ │ ├── writing_jsx_js.png │ │ │ ├── writing_jsx_sidebar.dark.png │ │ │ └── writing_jsx_sidebar.png │ │ ├── illustrations │ │ │ ├── i_browser-paint.png │ │ │ ├── i_children-prop.png │ │ │ ├── i_declarative-ui-programming.png │ │ │ ├── i_imperative-ui-programming.png │ │ │ ├── i_import-export.svg │ │ │ ├── i_inputs1.png │ │ │ ├── i_inputs2.png │ │ │ ├── i_puritea-recipe.png │ │ │ ├── i_react-batching.png │ │ │ ├── i_ref.png │ │ │ ├── i_render-and-commit1.png │ │ │ ├── i_render-and-commit2.png │ │ │ ├── i_render-and-commit3.png │ │ │ ├── i_render1.png │ │ │ ├── i_render2.png │ │ │ ├── i_render3.png │ │ │ ├── i_rerender1.png │ │ │ ├── i_rerender2.png │ │ │ ├── i_rerender3.png │ │ │ ├── i_state-snapshot1.png │ │ │ ├── i_state-snapshot2.png │ │ │ └── i_state-snapshot3.png │ │ ├── react-devtools-extension.png │ │ ├── react-devtools-standalone.png │ │ ├── react-devtools-usedebugvalue.png │ │ ├── s_thinking-in-react_ui.png │ │ └── s_thinking-in-react_ui_outline.png │ ├── g_arrow.png │ ├── home │ │ ├── community │ │ │ ├── react_conf_elizabet.webp │ │ │ ├── react_conf_fun.webp │ │ │ ├── react_conf_hallway.webp │ │ │ ├── react_conf_nat.webp │ │ │ ├── react_conf_selfie.webp │ │ │ ├── react_india_hallway.webp │ │ │ ├── react_india_selfie.webp │ │ │ ├── react_india_sunil.webp │ │ │ └── react_india_team.webp │ │ ├── conf2019 │ │ │ ├── alex.jpg │ │ │ ├── alexandra.jpg │ │ │ ├── ashley.jpg │ │ │ ├── becca.jpg │ │ │ ├── brian.jpg │ │ │ ├── brittany.jpg │ │ │ ├── cameron.jpg │ │ │ ├── cover.svg │ │ │ ├── frank.jpg │ │ │ ├── jed.jpg │ │ │ ├── jenn.jpg │ │ │ ├── joe.jpg │ │ │ ├── lee.jpg │ │ │ ├── lizzie.jpg │ │ │ ├── luca.jpg │ │ │ ├── maja.jpg │ │ │ ├── nat.jpg │ │ │ ├── sophie.jpg │ │ │ ├── tae.jpg │ │ │ ├── tania.jpg │ │ │ ├── tejas.jpg │ │ │ ├── tom.jpg │ │ │ └── yuzhi.jpg │ │ ├── conf2021 │ │ │ ├── aakansha.jpg │ │ │ ├── andrew.jpg │ │ │ ├── brian.jpg │ │ │ ├── cover.svg │ │ │ ├── daishi.jpg │ │ │ ├── debbie.jpg │ │ │ ├── delba.jpg │ │ │ ├── diego.jpg │ │ │ ├── eric.jpg │ │ │ ├── helen.jpg │ │ │ ├── juan.jpg │ │ │ ├── lauren.jpg │ │ │ ├── linton.jpg │ │ │ ├── lyle.jpg │ │ │ ├── rachel.jpg │ │ │ ├── rick.jpg │ │ │ ├── robert.jpg │ │ │ ├── roman.jpg │ │ │ ├── sarah.jpg │ │ │ ├── shaundai.jpg │ │ │ ├── shruti.jpg │ │ │ ├── steven.jpg │ │ │ ├── tafu.jpg │ │ │ └── xuan.jpg │ │ └── videos │ │ │ ├── documentary.webp │ │ │ ├── hooks.jpg │ │ │ ├── rethinking.jpg │ │ │ ├── rn.jpg │ │ │ └── rsc.jpg │ ├── meta-gradient-dark.png │ ├── meta-gradient.png │ ├── og-blog.png │ ├── og-community.png │ ├── og-home.png │ ├── og-learn.png │ ├── og-reference.png │ ├── og-unknown.png │ ├── team │ │ ├── acdlite.jpg │ │ ├── eli-white.jpg │ │ ├── gaearon.jpg │ │ ├── hendrik.jpg │ │ ├── jack-pope.jpg │ │ ├── jasonbonta.jpg │ │ ├── joe.jpg │ │ ├── jordan.jpg │ │ ├── josh.jpg │ │ ├── lauren.jpg │ │ ├── lesiutin.jpg │ │ ├── matt-carroll.png │ │ ├── mike.jpg │ │ ├── mofei-zhang.png │ │ ├── pieter.jpg │ │ ├── rickhanlonii.jpg │ │ ├── sebmarkbage.jpg │ │ ├── sebsilbermann.jpg │ │ ├── seth.jpg │ │ ├── sophiebits.jpg │ │ └── yuzhi.jpg │ ├── tutorial │ │ ├── board-filled-with-ones.png │ │ ├── board-filled-with-value.png │ │ ├── codesandbox-devtools.png │ │ ├── devtools-select.gif │ │ ├── empty-board.png │ │ ├── nine-x-filled-squares.png │ │ ├── number-filled-board.png │ │ ├── o-replaces-x.gif │ │ ├── react-starter-code-codesandbox.png │ │ ├── tictac-adding-x-s.gif │ │ ├── two-x-filled-squares.png │ │ └── x-filled-square.png │ └── uwu.png ├── js │ ├── jsfiddle-integration-babel.js │ └── jsfiddle-integration.js ├── mstile-150x150.png ├── robots.txt ├── safari-pinned-tab.svg └── site.webmanifest ├── scripts ├── downloadFonts.mjs ├── generateRedirects.js ├── 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 │ │ ├── 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 │ │ │ ├── Console.tsx │ │ │ ├── CustomPreset.tsx │ │ │ ├── DownloadButton.tsx │ │ │ ├── ErrorMessage.tsx │ │ │ ├── LoadingOverlay.tsx │ │ │ ├── NavigationBar.tsx │ │ │ ├── OpenInCodeSandboxButton.tsx │ │ │ ├── OpenInTypeScriptPlayground.tsx │ │ │ ├── Preview.tsx │ │ │ ├── ResetButton.tsx │ │ │ ├── SandpackRoot.tsx │ │ │ ├── Themes.tsx │ │ │ ├── createFileMap.ts │ │ │ ├── index.tsx │ │ │ ├── runESLint.tsx │ │ │ ├── template.ts │ │ │ └── useSandpackLint.tsx │ │ ├── SandpackWithHTMLOutput.tsx │ │ ├── SimpleCallout.tsx │ │ ├── TeamMember.tsx │ │ ├── TerminalBlock.tsx │ │ ├── TocContext.tsx │ │ └── YouWillLearnCard.tsx │ ├── PageHeading.tsx │ ├── Search.tsx │ ├── Seo.tsx │ ├── SocialBanner.tsx │ └── Tag.tsx ├── content │ ├── blog │ │ ├── 2020 │ │ │ └── 12 │ │ │ │ └── 21 │ │ │ │ └── data-fetching-with-react-server-components.md │ │ ├── 2021 │ │ │ ├── 12 │ │ │ │ └── 17 │ │ │ │ │ └── react-conf-2021-recap.md │ │ │ └── 06 │ │ │ │ └── 08 │ │ │ │ └── the-plan-for-react-18.md │ │ ├── 2022 │ │ │ ├── 03 │ │ │ │ ├── 29 │ │ │ │ │ └── react-v18.md │ │ │ │ └── 08 │ │ │ │ │ └── react-18-upgrade-guide.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 │ │ │ ├── 10 │ │ │ │ └── 21 │ │ │ │ │ └── react-compiler-beta-release.md │ │ │ ├── 12 │ │ │ │ └── 05 │ │ │ │ │ └── react-19.md │ │ │ ├── 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 │ │ ├── 2025 │ │ │ └── 02 │ │ │ │ └── 14 │ │ │ │ └── sunsetting-create-react-app.md │ │ └── index.md │ ├── community │ │ ├── acknowledgements.md │ │ ├── conferences.md │ │ ├── docs-contributors.md │ │ ├── index.md │ │ ├── meet-the-team.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-a-website.md │ │ ├── add-react-to-an-existing-project.md │ │ ├── adding-interactivity.md │ │ ├── building-a-react-framework.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.md │ │ ├── react-developer-tools.md │ │ ├── reacting-to-input-with-state.md │ │ ├── referencing-values-with-refs.md │ │ ├── removing-effect-dependencies.md │ │ ├── render-and-commit.md │ │ ├── rendering-lists.md │ │ ├── responding-to-events.md │ │ ├── reusing-logic-with-custom-hooks.md │ │ ├── scaling-up-with-reducer-and-context.md │ │ ├── separating-events-from-effects.md │ │ ├── setup.md │ │ ├── sharing-state-between-components.md │ │ ├── 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 │ │ ├── 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 │ │ │ ├── findDOMNode.md │ │ │ ├── flushSync.md │ │ │ ├── hooks │ │ │ │ ├── index.md │ │ │ │ └── useFormStatus.md │ │ │ ├── hydrate.md │ │ │ ├── index.md │ │ │ ├── preconnect.md │ │ │ ├── prefetchDNS.md │ │ │ ├── preinit.md │ │ │ ├── preinitModule.md │ │ │ ├── preload.md │ │ │ ├── preloadModule.md │ │ │ ├── render.md │ │ │ ├── server │ │ │ │ ├── index.md │ │ │ │ ├── renderToNodeStream.md │ │ │ │ ├── renderToPipeableStream.md │ │ │ │ ├── renderToReadableStream.md │ │ │ │ ├── renderToStaticMarkup.md │ │ │ │ ├── renderToStaticNodeStream.md │ │ │ │ └── renderToString.md │ │ │ ├── static │ │ │ │ ├── index.md │ │ │ │ ├── prerender.md │ │ │ │ └── prerenderToNodeStream.md │ │ │ └── unmountComponentAtNode.md │ │ ├── react │ │ │ ├── Children.md │ │ │ ├── Component.md │ │ │ ├── Fragment.md │ │ │ ├── Profiler.md │ │ │ ├── PureComponent.md │ │ │ ├── StrictMode.md │ │ │ ├── Suspense.md │ │ │ ├── act.md │ │ │ ├── apis.md │ │ │ ├── cache.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 │ │ │ ├── useId.md │ │ │ ├── useImperativeHandle.md │ │ │ ├── useInsertionEffect.md │ │ │ ├── useLayoutEffect.md │ │ │ ├── useMemo.md │ │ │ ├── useOptimistic.md │ │ │ ├── useReducer.md │ │ │ ├── useRef.md │ │ │ ├── useState.md │ │ │ ├── useSyncExternalStore.md │ │ │ └── useTransition.md │ │ ├── rsc │ │ │ ├── directives.md │ │ │ ├── server-actions.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 │ └── errors │ │ ├── [errorCode].tsx │ │ └── index.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 ├── tsconfig.json ├── vercel.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | indent_style = space 4 | indent_size = 2 5 | end_of_line = lf 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | 9 | [*.md] 10 | trim_trailing_whitespace = false 11 | -------------------------------------------------------------------------------- /.env.development: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/.env.development -------------------------------------------------------------------------------- /.env.production: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT' -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | scripts 2 | plugins 3 | next.config.js 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": "next/core-web-vitals", 4 | "parser": "@typescript-eslint/parser", 5 | "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler"], 6 | "rules": { 7 | "no-unused-vars": "off", 8 | "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}], 9 | "react-hooks/exhaustive-deps": "error", 10 | "react/no-unknown-property": ["error", {"ignore": ["meta"]}], 11 | "react-compiler/react-compiler": "error" 12 | }, 13 | "env": { 14 | "node": true, 15 | "commonjs": true, 16 | "browser": true, 17 | "es6": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "weekly" 7 | # Disable Dependabot. Doing it here so it propagates to translation forks. 8 | open-pull-requests-limit: 0 9 | -------------------------------------------------------------------------------- /.github/workflows/discord_notify.yml: -------------------------------------------------------------------------------- 1 | name: Discord Notify 2 | 3 | on: 4 | pull_request_target: 5 | types: [labeled] 6 | 7 | jobs: 8 | check_maintainer: 9 | uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main 10 | with: 11 | actor: ${{ github.event.pull_request.user.login }} 12 | is_remote: true 13 | 14 | notify: 15 | if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} 16 | needs: check_maintainer 17 | runs-on: ubuntu-latest 18 | steps: 19 | - name: Discord Webhook Action 20 | uses: tsickert/discord-webhook@v6.0.0 21 | with: 22 | webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }} 23 | embed-author-name: ${{ github.event.pull_request.user.login }} 24 | embed-author-url: ${{ github.event.pull_request.user.html_url }} 25 | embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }} 26 | embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}' 27 | embed-description: ${{ github.event.pull_request.body }} 28 | embed-url: ${{ github.event.pull_request.html_url }} 29 | -------------------------------------------------------------------------------- /.github/workflows/label_core_team_prs.yml: -------------------------------------------------------------------------------- 1 | name: Label Core Team PRs 2 | 3 | on: 4 | pull_request_target: 5 | 6 | env: 7 | TZ: /usr/share/zoneinfo/America/Los_Angeles 8 | # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout 9 | SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1 10 | 11 | jobs: 12 | check_maintainer: 13 | uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main 14 | with: 15 | actor: ${{ github.event.pull_request.user.login }} 16 | is_remote: true 17 | 18 | label: 19 | if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} 20 | runs-on: ubuntu-latest 21 | needs: check_maintainer 22 | steps: 23 | - name: Label PR as React Core Team 24 | uses: actions/github-script@v7 25 | with: 26 | script: | 27 | github.rest.issues.addLabels({ 28 | owner: context.repo.owner, 29 | repo: context.repo.repo, 30 | issue_number: ${{ github.event.number }}, 31 | labels: ['React Core Team'] 32 | }); 33 | -------------------------------------------------------------------------------- /.github/workflows/site_lint.yml: -------------------------------------------------------------------------------- 1 | name: Site Lint / Heading ID check 2 | 3 | on: 4 | push: 5 | branches: 6 | - main # change this if your default branch is named differently 7 | pull_request: 8 | types: [opened, synchronize, reopened] 9 | 10 | jobs: 11 | lint: 12 | runs-on: ubuntu-latest 13 | 14 | name: Lint on node 20.x and ubuntu-latest 15 | 16 | steps: 17 | - uses: actions/checkout@v4 18 | - name: Use Node.js 20.x 19 | uses: actions/setup-node@v4 20 | with: 21 | node-version: 20.x 22 | cache: yarn 23 | cache-dependency-path: yarn.lock 24 | 25 | - name: Restore cached node_modules 26 | uses: actions/cache@v4 27 | with: 28 | path: "**/node_modules" 29 | key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }} 30 | 31 | - name: Install deps 32 | run: yarn install --frozen-lockfile 33 | 34 | - name: Lint codebase 35 | run: yarn ci-check 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | tsconfig.tsbuildinfo 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | 37 | # external fonts 38 | public/fonts/**/Optimistic_*.woff2 39 | 40 | # rss 41 | public/rss.xml 42 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | src/content/**/*.md 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": false, 3 | "singleQuote": true, 4 | "bracketSameLine": true, 5 | "trailingComma": "es5", 6 | "printWidth": 80, 7 | "overrides": [ 8 | { 9 | "files": "*.css", 10 | "options": { 11 | "parser": "css" 12 | } 13 | }, 14 | { 15 | "files": "*.md", 16 | "options": { 17 | "parser": "mdx" 18 | } 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | /** 6 | * @type {import('next').NextConfig} 7 | **/ 8 | const nextConfig = { 9 | pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], 10 | reactStrictMode: true, 11 | experimental: { 12 | scrollRestoration: true, 13 | reactCompiler: true, 14 | }, 15 | env: {}, 16 | webpack: (config, {dev, isServer, ...options}) => { 17 | if (process.env.ANALYZE) { 18 | const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); 19 | config.plugins.push( 20 | new BundleAnalyzerPlugin({ 21 | analyzerMode: 'static', 22 | reportFilename: options.isServer 23 | ? '../analyze/server.html' 24 | : './analyze/client.html', 25 | }) 26 | ); 27 | } 28 | 29 | // Don't bundle the shim unnecessarily. 30 | config.resolve.alias['use-sync-external-store/shim'] = 'react'; 31 | 32 | const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack'); 33 | config.plugins.push( 34 | new NormalModuleReplacementPlugin( 35 | /^raf$/, 36 | require.resolve('./src/utils/rafShim.js') 37 | ), 38 | new NormalModuleReplacementPlugin( 39 | /^process$/, 40 | require.resolve('./src/utils/processShim.js') 41 | ), 42 | new IgnorePlugin({ 43 | checkResource(resource, context) { 44 | if ( 45 | /\/eslint\/lib\/rules$/.test(context) && 46 | /\.\/[\w-]+(\.js)?$/.test(resource) 47 | ) { 48 | // Skips imports of built-in rules that ESLint 49 | // tries to carry into the bundle by default. 50 | // We only want the engine and the React rules. 51 | return true; 52 | } 53 | return false; 54 | }, 55 | }) 56 | ); 57 | 58 | return config; 59 | }, 60 | }; 61 | 62 | module.exports = nextConfig; 63 | -------------------------------------------------------------------------------- /plugins/gatsby-remark-header-custom-ids/gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | const React = require(`react`); 6 | 7 | const pluginDefaults = { 8 | className: `anchor`, 9 | icon: true, 10 | offsetY: 0, 11 | }; 12 | 13 | exports.onRenderBody = ({setHeadComponents}, pluginOptions) => { 14 | const {className, icon, offsetY} = Object.assign( 15 | pluginDefaults, 16 | pluginOptions 17 | ); 18 | 19 | const styles = ` 20 | .${className} { 21 | float: left; 22 | padding-right: 4px; 23 | margin-left: -20px; 24 | } 25 | h1 .${className} svg, 26 | h2 .${className} svg, 27 | h3 .${className} svg, 28 | h4 .${className} svg, 29 | h5 .${className} svg, 30 | h6 .${className} svg { 31 | visibility: hidden; 32 | } 33 | h1:hover .${className} svg, 34 | h2:hover .${className} svg, 35 | h3:hover .${className} svg, 36 | h4:hover .${className} svg, 37 | h5:hover .${className} svg, 38 | h6:hover .${className} svg, 39 | h1 .${className}:focus svg, 40 | h2 .${className}:focus svg, 41 | h3 .${className}:focus svg, 42 | h4 .${className}:focus svg, 43 | h5 .${className}:focus svg, 44 | h6 .${className}:focus svg { 45 | visibility: visible; 46 | } 47 | `; 48 | 49 | const script = ` 50 | document.addEventListener("DOMContentLoaded", function(event) { 51 | var hash = window.decodeURI(location.hash.replace('#', '')) 52 | if (hash !== '') { 53 | var element = document.getElementById(hash) 54 | if (element) { 55 | var offset = element.offsetTop 56 | // Wait for the browser to finish rendering before scrolling. 57 | setTimeout((function() { 58 | window.scrollTo(0, offset - ${offsetY}) 59 | }), 0) 60 | } 61 | } 62 | }) 63 | `; 64 | 65 | const style = icon ? ( 66 | 69 | ) : undefined; 70 | 71 | return setHeadComponents([ 72 | style, 73 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 22 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /public/images/blog/introducing-react-dev/home-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/blog/introducing-react-dev/home-dark.png -------------------------------------------------------------------------------- /public/images/blog/introducing-react-dev/home-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/blog/introducing-react-dev/home-light.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/conditional_render_tree.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/conditional_render_tree.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/conditional_render_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/conditional_render_tree.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/generic_dependency_tree.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/generic_dependency_tree.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/generic_dependency_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/generic_dependency_tree.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/generic_render_tree.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/generic_render_tree.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/generic_render_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/generic_render_tree.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/module_dependency_tree.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/module_dependency_tree.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/module_dependency_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/module_dependency_tree.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/passing_data_context_close.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/passing_data_context_close.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/passing_data_context_close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/passing_data_context_close.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/passing_data_context_far.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/passing_data_context_far.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/passing_data_context_far.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/passing_data_context_far.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/passing_data_lifting_state.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/passing_data_lifting_state.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/passing_data_lifting_state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/passing_data_lifting_state.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/passing_data_prop_drilling.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/passing_data_prop_drilling.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/passing_data_prop_drilling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/passing_data_prop_drilling.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/prerender.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/prerender.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/prerender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/prerender.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_add_component.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_add_component.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_add_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_add_component.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_position_p1.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_position_p1.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_position_p1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_position_p1.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_position_p2.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_position_p2.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_position_p2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_position_p2.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_position_p3.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_position_p3.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_position_p3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_position_p3.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_pt1.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_pt1.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_pt1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_pt1.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_pt2.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_pt2.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_pt2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_pt2.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_same_pt1.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_same_pt1.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_same_pt1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_same_pt1.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_same_pt2.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_same_pt2.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_diff_same_pt2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_diff_same_pt2.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_dom_tree.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_dom_tree.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_dom_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_dom_tree.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_increment.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_increment.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_increment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_increment.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_remove_component.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_remove_component.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_remove_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_remove_component.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_same_component.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_same_component.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_same_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_same_component.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_tree.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_tree.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/preserving_state_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/preserving_state_tree.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/prewarm.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/prewarm.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/prewarm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/prewarm.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/render_tree.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/render_tree.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/render_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/render_tree.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/responding_to_input_flow.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/responding_to_input_flow.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/responding_to_input_flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/responding_to_input_flow.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_data_child.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_data_child.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_data_child.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_data_child.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_data_child_clicked.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_data_child_clicked.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_data_child_clicked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_data_child_clicked.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_data_parent.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_data_parent.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_data_parent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_data_parent.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_data_parent_clicked.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_data_parent_clicked.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_data_parent_clicked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_data_parent_clicked.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_state_child.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_state_child.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_state_child.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_state_child.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_state_child_clicked.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_state_child_clicked.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_state_child_clicked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_state_child_clicked.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_state_parent.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_state_parent.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_state_parent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_state_parent.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_state_parent_clicked.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_state_parent_clicked.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/sharing_state_parent_clicked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/sharing_state_parent_clicked.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/use_client_module_dependency.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/use_client_module_dependency.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/use_client_module_dependency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/use_client_module_dependency.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/use_client_render_tree.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/use_client_render_tree.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/use_client_render_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/use_client_render_tree.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/writing_jsx_form.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/writing_jsx_form.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/writing_jsx_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/writing_jsx_form.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/writing_jsx_html.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/writing_jsx_html.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/writing_jsx_html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/writing_jsx_html.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/writing_jsx_js.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/writing_jsx_js.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/writing_jsx_js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/writing_jsx_js.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/writing_jsx_sidebar.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/writing_jsx_sidebar.dark.png -------------------------------------------------------------------------------- /public/images/docs/diagrams/writing_jsx_sidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/diagrams/writing_jsx_sidebar.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_browser-paint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_browser-paint.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_children-prop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_children-prop.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_declarative-ui-programming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_declarative-ui-programming.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_imperative-ui-programming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_imperative-ui-programming.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_inputs1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_inputs1.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_inputs2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_inputs2.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_puritea-recipe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_puritea-recipe.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_react-batching.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_react-batching.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_ref.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_ref.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_render-and-commit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_render-and-commit1.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_render-and-commit2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_render-and-commit2.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_render-and-commit3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_render-and-commit3.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_render1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_render1.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_render2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_render2.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_render3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_render3.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_rerender1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_rerender1.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_rerender2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_rerender2.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_rerender3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_rerender3.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_state-snapshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_state-snapshot1.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_state-snapshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_state-snapshot2.png -------------------------------------------------------------------------------- /public/images/docs/illustrations/i_state-snapshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/illustrations/i_state-snapshot3.png -------------------------------------------------------------------------------- /public/images/docs/react-devtools-extension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/react-devtools-extension.png -------------------------------------------------------------------------------- /public/images/docs/react-devtools-standalone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/react-devtools-standalone.png -------------------------------------------------------------------------------- /public/images/docs/react-devtools-usedebugvalue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/react-devtools-usedebugvalue.png -------------------------------------------------------------------------------- /public/images/docs/s_thinking-in-react_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/s_thinking-in-react_ui.png -------------------------------------------------------------------------------- /public/images/docs/s_thinking-in-react_ui_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/docs/s_thinking-in-react_ui_outline.png -------------------------------------------------------------------------------- /public/images/g_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/g_arrow.png -------------------------------------------------------------------------------- /public/images/home/community/react_conf_elizabet.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/community/react_conf_elizabet.webp -------------------------------------------------------------------------------- /public/images/home/community/react_conf_fun.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/community/react_conf_fun.webp -------------------------------------------------------------------------------- /public/images/home/community/react_conf_hallway.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/community/react_conf_hallway.webp -------------------------------------------------------------------------------- /public/images/home/community/react_conf_nat.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/community/react_conf_nat.webp -------------------------------------------------------------------------------- /public/images/home/community/react_conf_selfie.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/community/react_conf_selfie.webp -------------------------------------------------------------------------------- /public/images/home/community/react_india_hallway.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/community/react_india_hallway.webp -------------------------------------------------------------------------------- /public/images/home/community/react_india_selfie.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/community/react_india_selfie.webp -------------------------------------------------------------------------------- /public/images/home/community/react_india_sunil.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/community/react_india_sunil.webp -------------------------------------------------------------------------------- /public/images/home/community/react_india_team.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/community/react_india_team.webp -------------------------------------------------------------------------------- /public/images/home/conf2019/alex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/alex.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/alexandra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/alexandra.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/ashley.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/ashley.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/becca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/becca.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/brian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/brian.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/brittany.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/brittany.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/cameron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/cameron.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/frank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/frank.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/jed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/jed.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/jenn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/jenn.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/joe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/joe.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/lee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/lee.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/lizzie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/lizzie.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/luca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/luca.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/maja.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/maja.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/nat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/nat.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/sophie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/sophie.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/tae.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/tae.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/tania.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/tania.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/tejas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/tejas.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/tom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/tom.jpg -------------------------------------------------------------------------------- /public/images/home/conf2019/yuzhi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2019/yuzhi.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/aakansha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/aakansha.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/andrew.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/andrew.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/brian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/brian.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/cover.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/images/home/conf2021/daishi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/daishi.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/debbie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/debbie.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/delba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/delba.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/diego.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/diego.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/eric.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/eric.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/helen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/helen.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/juan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/juan.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/lauren.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/lauren.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/linton.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/linton.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/lyle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/lyle.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/rachel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/rachel.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/rick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/rick.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/robert.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/robert.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/roman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/roman.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/sarah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/sarah.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/shaundai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/shaundai.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/shruti.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/shruti.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/steven.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/steven.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/tafu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/tafu.jpg -------------------------------------------------------------------------------- /public/images/home/conf2021/xuan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/conf2021/xuan.jpg -------------------------------------------------------------------------------- /public/images/home/videos/documentary.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/videos/documentary.webp -------------------------------------------------------------------------------- /public/images/home/videos/hooks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/videos/hooks.jpg -------------------------------------------------------------------------------- /public/images/home/videos/rethinking.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/videos/rethinking.jpg -------------------------------------------------------------------------------- /public/images/home/videos/rn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/videos/rn.jpg -------------------------------------------------------------------------------- /public/images/home/videos/rsc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/home/videos/rsc.jpg -------------------------------------------------------------------------------- /public/images/meta-gradient-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/meta-gradient-dark.png -------------------------------------------------------------------------------- /public/images/meta-gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/meta-gradient.png -------------------------------------------------------------------------------- /public/images/og-blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/og-blog.png -------------------------------------------------------------------------------- /public/images/og-community.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/og-community.png -------------------------------------------------------------------------------- /public/images/og-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/og-home.png -------------------------------------------------------------------------------- /public/images/og-learn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/og-learn.png -------------------------------------------------------------------------------- /public/images/og-reference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/og-reference.png -------------------------------------------------------------------------------- /public/images/og-unknown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/og-unknown.png -------------------------------------------------------------------------------- /public/images/team/acdlite.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/acdlite.jpg -------------------------------------------------------------------------------- /public/images/team/eli-white.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/eli-white.jpg -------------------------------------------------------------------------------- /public/images/team/gaearon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/gaearon.jpg -------------------------------------------------------------------------------- /public/images/team/hendrik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/hendrik.jpg -------------------------------------------------------------------------------- /public/images/team/jack-pope.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/jack-pope.jpg -------------------------------------------------------------------------------- /public/images/team/jasonbonta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/jasonbonta.jpg -------------------------------------------------------------------------------- /public/images/team/joe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/joe.jpg -------------------------------------------------------------------------------- /public/images/team/jordan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/jordan.jpg -------------------------------------------------------------------------------- /public/images/team/josh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/josh.jpg -------------------------------------------------------------------------------- /public/images/team/lauren.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/lauren.jpg -------------------------------------------------------------------------------- /public/images/team/lesiutin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/lesiutin.jpg -------------------------------------------------------------------------------- /public/images/team/matt-carroll.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/matt-carroll.png -------------------------------------------------------------------------------- /public/images/team/mike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/mike.jpg -------------------------------------------------------------------------------- /public/images/team/mofei-zhang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/mofei-zhang.png -------------------------------------------------------------------------------- /public/images/team/pieter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/pieter.jpg -------------------------------------------------------------------------------- /public/images/team/rickhanlonii.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/rickhanlonii.jpg -------------------------------------------------------------------------------- /public/images/team/sebmarkbage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/sebmarkbage.jpg -------------------------------------------------------------------------------- /public/images/team/sebsilbermann.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/sebsilbermann.jpg -------------------------------------------------------------------------------- /public/images/team/seth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/seth.jpg -------------------------------------------------------------------------------- /public/images/team/sophiebits.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/sophiebits.jpg -------------------------------------------------------------------------------- /public/images/team/yuzhi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/team/yuzhi.jpg -------------------------------------------------------------------------------- /public/images/tutorial/board-filled-with-ones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/board-filled-with-ones.png -------------------------------------------------------------------------------- /public/images/tutorial/board-filled-with-value.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/board-filled-with-value.png -------------------------------------------------------------------------------- /public/images/tutorial/codesandbox-devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/codesandbox-devtools.png -------------------------------------------------------------------------------- /public/images/tutorial/devtools-select.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/devtools-select.gif -------------------------------------------------------------------------------- /public/images/tutorial/empty-board.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/empty-board.png -------------------------------------------------------------------------------- /public/images/tutorial/nine-x-filled-squares.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/nine-x-filled-squares.png -------------------------------------------------------------------------------- /public/images/tutorial/number-filled-board.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/number-filled-board.png -------------------------------------------------------------------------------- /public/images/tutorial/o-replaces-x.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/o-replaces-x.gif -------------------------------------------------------------------------------- /public/images/tutorial/react-starter-code-codesandbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/react-starter-code-codesandbox.png -------------------------------------------------------------------------------- /public/images/tutorial/tictac-adding-x-s.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/tictac-adding-x-s.gif -------------------------------------------------------------------------------- /public/images/tutorial/two-x-filled-squares.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/two-x-filled-squares.png -------------------------------------------------------------------------------- /public/images/tutorial/x-filled-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/tutorial/x-filled-square.png -------------------------------------------------------------------------------- /public/images/uwu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alpha-Coder23/project/590e81ef9f4b9d3cc3d78b6940b762c6d3f3f166/public/images/uwu.png -------------------------------------------------------------------------------- /public/js/jsfiddle-integration-babel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | // Do not delete or move this file. 6 | // Many fiddles reference it so we have to keep it here. 7 | (function() { 8 | var tag = document.querySelector( 9 | 'script[type="application/javascript;version=1.7"]' 10 | ); 11 | if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) { 12 | alert('Bad JSFiddle configuration, please fork the original React JSFiddle'); 13 | } 14 | tag.setAttribute('type', 'text/babel'); 15 | tag.textContent = tag.textContent.replace(/^\/\/} lines 28 | */ 29 | function validateHeaderIds(lines) { 30 | let inCode = false; 31 | const results = []; 32 | lines.forEach((line) => { 33 | // Ignore code blocks 34 | if (line.startsWith('```')) { 35 | inCode = !inCode; 36 | 37 | results.push(line); 38 | return; 39 | } 40 | if (inCode) { 41 | results.push(line); 42 | return; 43 | } 44 | validateHeaderId(line); 45 | }); 46 | } 47 | /** 48 | * paths are basically array of path for which we have to validate heading IDs 49 | * @param {Array} paths 50 | */ 51 | async function main(paths) { 52 | paths = paths.length === 0 ? ['src/content'] : paths; 53 | const files = paths.map((path) => [...walk(path)]).flat(); 54 | 55 | files.forEach((file) => { 56 | if (!(file.endsWith('.md') || file.endsWith('.mdx'))) { 57 | return; 58 | } 59 | 60 | const content = fs.readFileSync(file, 'utf8'); 61 | const lines = content.split('\n'); 62 | validateHeaderIds(lines); 63 | }); 64 | } 65 | 66 | module.exports = main; 67 | -------------------------------------------------------------------------------- /scripts/headingIDHelpers/walk.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | module.exports = function walk(dir) { 4 | let results = []; 5 | /** 6 | * If the param is a directory we can return the file 7 | */ 8 | if (dir.includes('md')) { 9 | return [dir]; 10 | } 11 | const list = fs.readdirSync(dir); 12 | list.forEach(function (file) { 13 | file = dir + '/' + file; 14 | const stat = fs.statSync(file); 15 | if (stat && stat.isDirectory()) { 16 | /* Recurse into a subdirectory */ 17 | results = results.concat(walk(file)); 18 | } else { 19 | /* Is a file */ 20 | results.push(file); 21 | } 22 | }); 23 | return results; 24 | }; 25 | -------------------------------------------------------------------------------- /scripts/headingIdLinter.js: -------------------------------------------------------------------------------- 1 | const validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs'); 2 | const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs'); 3 | 4 | /** 5 | * yarn lint-heading-ids --> Checks all files and causes an error if heading ID is missing 6 | * yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs 7 | * yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file) 8 | * yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file) 9 | */ 10 | 11 | const markdownPaths = process.argv.slice(2); 12 | if (markdownPaths.includes('--fix')) { 13 | generateHeadingIds(markdownPaths.filter((path) => path !== '--fix')); 14 | } else { 15 | validateHeaderIds(markdownPaths); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/Breadcrumbs.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {Fragment} from 'react'; 6 | import Link from 'next/link'; 7 | import type {RouteItem} from 'components/Layout/getRouteMeta'; 8 | 9 | function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) { 10 | return ( 11 |
12 | {breadcrumbs.map( 13 | (crumb, i) => 14 | crumb.path && 15 | !crumb.skipBreadcrumb && ( 16 |
17 | 18 | 21 | {crumb.title} 22 | 23 | 24 | 30 | 34 | 35 | 36 | 37 |
38 | ) 39 | )} 40 |
41 | ); 42 | } 43 | 44 | export default Breadcrumbs; 45 | -------------------------------------------------------------------------------- /src/components/Button.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | import cn from 'classnames'; 7 | 8 | interface ButtonProps { 9 | children: React.ReactNode; 10 | onClick?: (event: React.MouseEvent) => void; 11 | active?: boolean; 12 | className?: string; 13 | style?: Record; 14 | } 15 | 16 | export function Button({ 17 | children, 18 | onClick, 19 | active = false, 20 | className, 21 | style, 22 | }: ButtonProps) { 23 | return ( 24 | 43 | ); 44 | } 45 | 46 | export default Button; 47 | -------------------------------------------------------------------------------- /src/components/ButtonLink.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import cn from 'classnames'; 6 | import NextLink from 'next/link'; 7 | 8 | interface ButtonLinkProps { 9 | size?: 'md' | 'lg'; 10 | type?: 'primary' | 'secondary'; 11 | label?: string; 12 | target?: '_self' | '_blank'; 13 | } 14 | 15 | function ButtonLink({ 16 | href, 17 | className, 18 | children, 19 | type = 'primary', 20 | size = 'md', 21 | label, 22 | target = '_self', 23 | ...props 24 | }: React.AnchorHTMLAttributes & ButtonLinkProps) { 25 | const classes = cn( 26 | className, 27 | 'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug', 28 | { 29 | 'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80': 30 | type === 'primary', 31 | 'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10': 32 | type === 'secondary', 33 | 'text-lg py-3 rounded-full px-4 sm:px-6': size === 'lg', 34 | 'text-base rounded-full px-4 py-2': size === 'md', 35 | } 36 | ); 37 | return ( 38 | 44 | {children} 45 | 46 | ); 47 | } 48 | 49 | export default ButtonLink; 50 | -------------------------------------------------------------------------------- /src/components/ErrorDecoderContext.tsx: -------------------------------------------------------------------------------- 1 | // Error Decoder requires reading pregenerated error message from getStaticProps, 2 | // but MDX component doesn't support props. So we use React Context to populate 3 | // the value without prop-drilling. 4 | // TODO: Replace with React.cache + React.use when migrating to Next.js App Router 5 | 6 | import {createContext, useContext} from 'react'; 7 | 8 | const notInErrorDecoderContext = Symbol('not in error decoder context'); 9 | 10 | export const ErrorDecoderContext = createContext< 11 | | {errorMessage: string | null; errorCode: string | null} 12 | | typeof notInErrorDecoderContext 13 | >(notInErrorDecoderContext); 14 | 15 | export const useErrorDecoderParams = () => { 16 | const params = useContext(ErrorDecoderContext); 17 | 18 | if (params === notInErrorDecoderContext) { 19 | throw new Error('useErrorDecoder must be used in error decoder pages only'); 20 | } 21 | 22 | return params; 23 | }; 24 | -------------------------------------------------------------------------------- /src/components/ExternalLink.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | import type {DetailedHTMLProps, AnchorHTMLAttributes} from 'react'; 5 | 6 | export function ExternalLink({ 7 | href, 8 | target, 9 | children, 10 | ...props 11 | }: DetailedHTMLProps< 12 | AnchorHTMLAttributes, 13 | HTMLAnchorElement 14 | >) { 15 | return ( 16 | 17 | {children} 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/components/Icon/IconArrow.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import cn from 'classnames'; 7 | import type {SVGProps} from 'react'; 8 | 9 | export const IconArrow = memo< 10 | SVGProps & { 11 | /** 12 | * The direction the arrow should point. 13 | * `start` and `end` are relative to the current locale. 14 | * for example, in LTR, `start` is left and `end` is right. 15 | */ 16 | displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down'; 17 | } 18 | >(function IconArrow({displayDirection, className, ...rest}) { 19 | return ( 20 | 31 | 32 | 33 | 34 | ); 35 | }); 36 | -------------------------------------------------------------------------------- /src/components/Icon/IconArrowSmall.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import cn from 'classnames'; 7 | import type {SVGProps} from 'react'; 8 | 9 | export const IconArrowSmall = memo< 10 | SVGProps & { 11 | /** 12 | * The direction the arrow should point. 13 | * `start` and `end` are relative to the current locale. 14 | * for example, in LTR, `start` is left and `end` is right. 15 | */ 16 | displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down'; 17 | } 18 | >(function IconArrowSmall({displayDirection, className, ...rest}) { 19 | const classes = cn(className, { 20 | 'rotate-180': displayDirection === 'left', 21 | 'rotate-180 rtl:rotate-0': displayDirection === 'start', 22 | 'rotate-90': displayDirection === 'down', 23 | }); 24 | return ( 25 | 33 | 36 | 37 | ); 38 | }); 39 | -------------------------------------------------------------------------------- /src/components/Icon/IconBsky.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconBsky = memo>(function IconBsky(props) { 9 | return ( 10 | 18 | 21 | 22 | ); 23 | }); 24 | -------------------------------------------------------------------------------- /src/components/Icon/IconChevron.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import cn from 'classnames'; 7 | 8 | export const IconChevron = memo< 9 | JSX.IntrinsicElements['svg'] & { 10 | /** 11 | * The direction the arrow should point. 12 | * `start` and `end` are relative to the current locale. 13 | * for example, in LTR, `start` is left and `end` is right. 14 | */ 15 | displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down'; 16 | } 17 | >(function IconChevron({className, displayDirection}) { 18 | const classes = cn( 19 | { 20 | 'rotate-0': displayDirection === 'down', 21 | 'rotate-90': displayDirection === 'left', 22 | 'rotate-180': displayDirection === 'up', 23 | '-rotate-90': displayDirection === 'right', 24 | 'rotate-90 rtl:-rotate-90': displayDirection === 'start', 25 | '-rotate-90 rtl:rotate-90': displayDirection === 'end', 26 | }, 27 | className 28 | ); 29 | return ( 30 | 36 | 37 | 43 | 44 | 45 | 46 | ); 47 | }); 48 | -------------------------------------------------------------------------------- /src/components/Icon/IconClose.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconClose = memo>(function IconClose( 9 | props 10 | ) { 11 | return ( 12 | 23 | 24 | 25 | 26 | ); 27 | }); 28 | -------------------------------------------------------------------------------- /src/components/Icon/IconCodeBlock.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | 7 | export const IconCodeBlock = memo( 8 | function IconCodeBlock({className}) { 9 | return ( 10 | 17 | 21 | 22 | ); 23 | } 24 | ); 25 | -------------------------------------------------------------------------------- /src/components/Icon/IconCopy.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | 7 | export const IconCopy = memo(function IconCopy({ 8 | className, 9 | }) { 10 | return ( 11 | 18 | {' '} 24 | 30 | 31 | ); 32 | }); 33 | -------------------------------------------------------------------------------- /src/components/Icon/IconDeepDive.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | 7 | export const IconDeepDive = memo( 8 | function IconDeepDive({className}) { 9 | return ( 10 | 17 | 23 | 24 | ); 25 | } 26 | ); 27 | -------------------------------------------------------------------------------- /src/components/Icon/IconDownload.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | 7 | export const IconDownload = memo( 8 | function IconDownload({className}) { 9 | return ( 10 | 17 | 21 | 25 | 26 | ); 27 | } 28 | ); 29 | -------------------------------------------------------------------------------- /src/components/Icon/IconError.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | 7 | export const IconError = memo(function IconError({ 8 | className, 9 | }) { 10 | return ( 11 | 17 | 18 | 19 | 20 | 21 | ); 22 | }); 23 | -------------------------------------------------------------------------------- /src/components/Icon/IconFacebookCircle.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconFacebookCircle = memo>( 9 | function IconFacebookCircle(props) { 10 | return ( 11 | 18 | 19 | 20 | 21 | ); 22 | } 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/Icon/IconGitHub.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconGitHub = memo>(function IconGitHub( 9 | props 10 | ) { 11 | return ( 12 | 19 | 20 | 21 | ); 22 | }); 23 | -------------------------------------------------------------------------------- /src/components/Icon/IconHamburger.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconHamburger = memo>( 9 | function IconHamburger(props) { 10 | return ( 11 | 21 | 22 | 23 | 24 | 25 | ); 26 | } 27 | ); 28 | -------------------------------------------------------------------------------- /src/components/Icon/IconHint.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import cn from 'classnames'; 7 | 8 | export const IconHint = memo(function IconHint({ 9 | className, 10 | }) { 11 | return ( 12 | 18 | 22 | 23 | ); 24 | }); 25 | -------------------------------------------------------------------------------- /src/components/Icon/IconInstagram.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconInstagram = memo>( 9 | function IconInstagram(props) { 10 | return ( 11 | 18 | 19 | 20 | 21 | ); 22 | } 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/Icon/IconLink.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconLink = memo>(function IconLink(props) { 9 | return ( 10 | 17 | 22 | 23 | ); 24 | }); 25 | -------------------------------------------------------------------------------- /src/components/Icon/IconNavArrow.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import cn from 'classnames'; 7 | 8 | export const IconNavArrow = memo< 9 | JSX.IntrinsicElements['svg'] & { 10 | /** 11 | * The direction the arrow should point. 12 | * `start` and `end` are relative to the current locale. 13 | * for example, in LTR, `start` is left and `end` is right. 14 | */ 15 | displayDirection: 'start' | 'end' | 'right' | 'left' | 'down'; 16 | } 17 | >(function IconNavArrow({displayDirection = 'start', className}) { 18 | const classes = cn( 19 | 'duration-100 ease-in transition', 20 | { 21 | 'rotate-0': displayDirection === 'down', 22 | 'rotate-90': displayDirection === 'left', 23 | '-rotate-90': displayDirection === 'right', 24 | 'rotate-90 rtl:-rotate-90': displayDirection === 'start', 25 | '-rotate-90 rtl:rotate-90': displayDirection === 'end', 26 | }, 27 | className 28 | ); 29 | 30 | return ( 31 | 38 | 39 | 45 | 46 | 47 | 48 | ); 49 | }); 50 | -------------------------------------------------------------------------------- /src/components/Icon/IconNewPage.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconNewPage = memo>(function IconNewPage( 9 | props 10 | ) { 11 | return ( 12 | 19 | 23 | 27 | 28 | ); 29 | }); 30 | -------------------------------------------------------------------------------- /src/components/Icon/IconNote.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | 7 | export const IconNote = memo(function IconNote({ 8 | className, 9 | }) { 10 | return ( 11 | 18 | 19 | 23 | 27 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ); 41 | }); 42 | -------------------------------------------------------------------------------- /src/components/Icon/IconPitfall.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | 7 | export const IconPitfall = memo( 8 | function IconPitfall({className}) { 9 | return ( 10 | 17 | 18 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | } 33 | ); 34 | -------------------------------------------------------------------------------- /src/components/Icon/IconRss.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconRss = memo>(function IconRss(props) { 9 | return ( 10 | 21 | 22 | 23 | 24 | 25 | ); 26 | }); 27 | -------------------------------------------------------------------------------- /src/components/Icon/IconSearch.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconSearch = memo>(function IconSearch( 9 | props 10 | ) { 11 | return ( 12 | 13 | 21 | 22 | ); 23 | }); 24 | -------------------------------------------------------------------------------- /src/components/Icon/IconSolution.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import cn from 'classnames'; 7 | 8 | export const IconSolution = memo( 9 | function IconSolution({className}) { 10 | return ( 11 | 17 | 21 | 22 | ); 23 | } 24 | ); 25 | -------------------------------------------------------------------------------- /src/components/Icon/IconTerminal.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | 7 | export const IconTerminal = memo( 8 | function IconTerminal({className}) { 9 | return ( 10 | 17 | 21 | 22 | ); 23 | } 24 | ); 25 | -------------------------------------------------------------------------------- /src/components/Icon/IconTwitter.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | import type {SVGProps} from 'react'; 7 | 8 | export const IconTwitter = memo>(function IconTwitter( 9 | props 10 | ) { 11 | return ( 12 | 19 | 20 | 21 | 22 | ); 23 | }); 24 | -------------------------------------------------------------------------------- /src/components/Icon/IconWarning.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {memo} from 'react'; 6 | 7 | export const IconWarning = memo( 8 | function IconWarning({className}) { 9 | return ( 10 | 16 | 17 | 23 | 24 | 25 | ); 26 | } 27 | ); 28 | -------------------------------------------------------------------------------- /src/components/Layout/Sidebar/SidebarButton.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | import cn from 'classnames'; 7 | import {IconNavArrow} from 'components/Icon/IconNavArrow'; 8 | 9 | interface SidebarButtonProps { 10 | title: string; 11 | heading: boolean; 12 | level: number; 13 | onClick: (event: React.MouseEvent) => void; 14 | isExpanded?: boolean; 15 | isBreadcrumb?: boolean; 16 | } 17 | 18 | export function SidebarButton({ 19 | title, 20 | heading, 21 | level, 22 | onClick, 23 | isExpanded, 24 | isBreadcrumb, 25 | }: SidebarButtonProps) { 26 | return ( 27 |
1, 31 | })}> 32 | 55 |
56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /src/components/Layout/Sidebar/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | export {SidebarButton} from './SidebarButton'; 6 | export {SidebarLink} from './SidebarLink'; 7 | export {SidebarRouteTree} from './SidebarRouteTree'; 8 | -------------------------------------------------------------------------------- /src/components/Layout/SidebarNav/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | export {default as SidebarNav} from './SidebarNav'; 6 | -------------------------------------------------------------------------------- /src/components/Layout/TopNav/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | export {default as TopNav} from './TopNav'; 6 | -------------------------------------------------------------------------------- /src/components/Logo.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | import type {SVGProps} from 'react'; 5 | 6 | export function Logo(props: SVGProps) { 7 | return ( 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/components/MDX/Challenges/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | export {Challenges} from './Challenges'; 7 | 8 | export function Hint({children}: {children: React.ReactNode}) { 9 | return
{children}
; 10 | } 11 | 12 | export function Solution({children}: {children: React.ReactNode}) { 13 | return
{children}
; 14 | } 15 | -------------------------------------------------------------------------------- /src/components/MDX/CodeBlock/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | import cn from 'classnames'; 7 | import {lazy, memo, Suspense} from 'react'; 8 | const CodeBlock = lazy(() => import('./CodeBlock')); 9 | 10 | export default memo(function CodeBlockWrapper(props: { 11 | children: React.ReactNode & { 12 | props: { 13 | className: string; 14 | children: string; 15 | meta?: string; 16 | }; 17 | }; 18 | isFromPackageImport: boolean; 19 | noMargin?: boolean; 20 | noMarkers?: boolean; 21 | }): any { 22 | const {children, isFromPackageImport} = props; 23 | return ( 24 | 33 |
34 |

{children}

35 |
36 | 37 | }> 38 | 39 | 40 | ); 41 | }); 42 | -------------------------------------------------------------------------------- /src/components/MDX/CodeDiagram.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {Children} from 'react'; 6 | import * as React from 'react'; 7 | import CodeBlock from './CodeBlock'; 8 | 9 | interface CodeDiagramProps { 10 | children: React.ReactNode; 11 | flip?: boolean; 12 | } 13 | 14 | export function CodeDiagram({children, flip = false}: CodeDiagramProps) { 15 | const illustration = Children.toArray(children).filter((child: any) => { 16 | return child.type === 'img'; 17 | }); 18 | const content = Children.toArray(children).map((child: any) => { 19 | if (child.type?.mdxName === 'pre') { 20 | return ( 21 | 27 | ); 28 | } else if (child.type === 'img') { 29 | return null; 30 | } else { 31 | return child; 32 | } 33 | }); 34 | if (flip) { 35 | return ( 36 |
37 | {illustration} 38 |
{content}
39 |
40 | ); 41 | } 42 | return ( 43 |
44 |
{content}
45 |
{illustration}
46 |
47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /src/components/MDX/Diagram.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import Image from 'next/image'; 6 | 7 | interface DiagramProps { 8 | name: string; 9 | alt: string; 10 | height: number; 11 | width: number; 12 | children: string; 13 | captionPosition: 'top' | 'bottom' | null; 14 | } 15 | 16 | function Caption({text}: {text: string}) { 17 | return ( 18 |
19 |
20 | {text} 21 |
22 |
23 | ); 24 | } 25 | 26 | export function Diagram({ 27 | name, 28 | alt, 29 | height, 30 | width, 31 | children, 32 | captionPosition, 33 | }: DiagramProps) { 34 | return ( 35 |
36 | {captionPosition === 'top' && } 37 |
38 | {alt} 44 |
45 |
46 | {alt} 52 |
53 | {(!captionPosition || captionPosition === 'bottom') && ( 54 | 55 | )} 56 |
57 | ); 58 | } 59 | 60 | export default Diagram; 61 | -------------------------------------------------------------------------------- /src/components/MDX/DiagramGroup.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {ReactNode} from 'react'; 6 | 7 | interface DiagramGroupProps { 8 | children: ReactNode; 9 | } 10 | 11 | export function DiagramGroup({children}: DiagramGroupProps) { 12 | return ( 13 |
14 | {children} 15 |
16 | ); 17 | } 18 | 19 | export default DiagramGroup; 20 | -------------------------------------------------------------------------------- /src/components/MDX/InlineCode.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import cn from 'classnames'; 6 | import type {HTMLAttributes} from 'react'; 7 | 8 | interface InlineCodeProps { 9 | isLink?: boolean; 10 | meta?: string; 11 | } 12 | function InlineCode({ 13 | isLink, 14 | ...props 15 | }: HTMLAttributes & InlineCodeProps) { 16 | return ( 17 | in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()` 19 | className={cn( 20 | 'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline', 21 | { 22 | 'bg-gray-30 bg-opacity-10 py-px': !isLink, 23 | 'bg-highlight dark:bg-highlight-dark py-0': isLink, 24 | } 25 | )} 26 | {...props} 27 | /> 28 | ); 29 | } 30 | 31 | export default InlineCode; 32 | -------------------------------------------------------------------------------- /src/components/MDX/Intro.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | 7 | export interface IntroProps { 8 | children?: React.ReactNode; 9 | } 10 | 11 | function Intro({children}: IntroProps) { 12 | return ( 13 |
14 | {children} 15 |
16 | ); 17 | } 18 | 19 | export default Intro; 20 | -------------------------------------------------------------------------------- /src/components/MDX/LanguagesContext.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {createContext} from 'react'; 6 | 7 | export type LanguageItem = { 8 | code: string; 9 | name: string; 10 | enName: string; 11 | }; 12 | export type Languages = Array; 13 | 14 | export const LanguagesContext = createContext(null); 15 | -------------------------------------------------------------------------------- /src/components/MDX/Link.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {Children, cloneElement} from 'react'; 6 | import NextLink from 'next/link'; 7 | import cn from 'classnames'; 8 | 9 | import {ExternalLink} from 'components/ExternalLink'; 10 | 11 | function Link({ 12 | href, 13 | className, 14 | children, 15 | ...props 16 | }: React.AnchorHTMLAttributes) { 17 | const classes = 18 | 'inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal'; 19 | const modifiedChildren = Children.toArray(children).map((child: any) => { 20 | if (child.type?.mdxName && child.type?.mdxName === 'inlineCode') { 21 | return cloneElement(child, { 22 | isLink: true, 23 | }); 24 | } 25 | return child; 26 | }); 27 | 28 | if (!href) { 29 | // eslint-disable-next-line jsx-a11y/anchor-has-content 30 | return ; 31 | } 32 | return ( 33 | <> 34 | {href.startsWith('https://') ? ( 35 | 36 | {modifiedChildren} 37 | 38 | ) : href.startsWith('#') ? ( 39 | // eslint-disable-next-line jsx-a11y/anchor-has-content 40 | 41 | {modifiedChildren} 42 | 43 | ) : ( 44 | 45 | {modifiedChildren} 46 | 47 | )} 48 | 49 | ); 50 | } 51 | 52 | export default Link; 53 | -------------------------------------------------------------------------------- /src/components/MDX/MDXComponents.module.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | /* Stop purging. */ 6 | .markdown p { 7 | @apply mb-4 leading-7 whitespace-pre-wrap text-gray-70; 8 | } 9 | 10 | .markdown ol { 11 | @apply mb-4 ms-8 list-decimal; 12 | } 13 | 14 | .markdown ul { 15 | @apply mb-4 ms-8 list-disc; 16 | } 17 | 18 | .markdown h1 { 19 | @apply mb-6 text-4xl font-extrabold tracking-tight; 20 | } 21 | 22 | .markdown h2 { 23 | @apply mt-12 mb-4 text-3xl font-extrabold tracking-tight; 24 | } 25 | .markdown h3 { 26 | @apply mt-8 mb-3 text-2xl font-extrabold tracking-tight; 27 | } 28 | .markdown h4 { 29 | @apply mt-8 mb-3 text-xl font-extrabold tracking-tight; 30 | } 31 | 32 | .markdown code { 33 | @apply text-gray-70 bg-card dark:bg-card-dark p-1 rounded-lg no-underline; 34 | font-size: 90%; 35 | } 36 | 37 | .markdown li { 38 | @apply mb-2; 39 | } 40 | 41 | .markdown a { 42 | @apply inline text-link dark:text-link-dark break-normal border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal; 43 | } 44 | -------------------------------------------------------------------------------- /src/components/MDX/PackageImport.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {Children} from 'react'; 6 | import * as React from 'react'; 7 | import CodeBlock from './CodeBlock'; 8 | 9 | interface PackageImportProps { 10 | children: React.ReactNode; 11 | } 12 | 13 | export function PackageImport({children}: PackageImportProps) { 14 | const terminal = Children.toArray(children).filter((child: any) => { 15 | return child.type?.mdxName !== 'pre'; 16 | }); 17 | const code = Children.toArray(children).map((child: any, i: number) => { 18 | if (child.type?.mdxName === 'pre') { 19 | return ( 20 | 27 | ); 28 | } else { 29 | return null; 30 | } 31 | }); 32 | return ( 33 |
34 |
{terminal}
35 |
{code}
36 |
37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /src/components/MDX/Recap.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | import {H2} from './Heading'; 7 | 8 | interface RecapProps { 9 | children: React.ReactNode; 10 | } 11 | 12 | function Recap({children}: RecapProps) { 13 | return ( 14 |
15 |

16 | 摘要 17 |

18 | {children} 19 |
20 | ); 21 | } 22 | 23 | export default Recap; 24 | -------------------------------------------------------------------------------- /src/components/MDX/Sandpack/ErrorMessage.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | interface ErrorType { 6 | title?: string; 7 | message: string; 8 | column?: number; 9 | line?: number; 10 | path?: string; 11 | } 12 | 13 | export function ErrorMessage({error, ...props}: {error: ErrorType}) { 14 | const {message, title} = error; 15 | 16 | return ( 17 |
18 |

{title || 'Error'}

19 | 
20 |         {message}
21 |
22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react/unstyled'; 6 | import {IconNewPage} from '../../Icon/IconNewPage'; 7 | 8 | export const OpenInCodeSandboxButton = () => { 9 | return ( 10 | 13 | 18 | Fork 19 | 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {IconNewPage} from '../../Icon/IconNewPage'; 6 | 7 | export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => { 8 | const contentWithReactImport = `import * as React from 'react';\n\n${props.content}`; 9 | return ( 10 | 18 | 23 | TypeScript Playground 24 | 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /src/components/MDX/Sandpack/ResetButton.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | import {IconRestart} from '../../Icon/IconRestart'; 7 | export interface ResetButtonProps { 8 | onReset: () => void; 9 | } 10 | 11 | export function ResetButton({onReset}: ResetButtonProps) { 12 | return ( 13 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /src/components/MDX/Sandpack/Themes.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import tailwindConfig from '../../../../tailwind.config'; 6 | 7 | export const CustomTheme = { 8 | colors: { 9 | accent: 'inherit', 10 | base: 'inherit', 11 | clickable: 'inherit', 12 | disabled: 'inherit', 13 | error: 'inherit', 14 | errorSurface: 'inherit', 15 | hover: 'inherit', 16 | surface1: 'inherit', 17 | surface2: 'inherit', 18 | surface3: 'inherit', 19 | warning: 'inherit', 20 | warningSurface: 'inherit', 21 | }, 22 | syntax: { 23 | plain: 'inherit', 24 | comment: 'inherit', 25 | keyword: 'inherit', 26 | tag: 'inherit', 27 | punctuation: 'inherit', 28 | definition: 'inherit', 29 | property: 'inherit', 30 | static: 'inherit', 31 | string: 'inherit', 32 | }, 33 | font: { 34 | body: tailwindConfig.theme.extend.fontFamily.text 35 | .join(', ') 36 | .replace(/"/gm, ''), 37 | mono: tailwindConfig.theme.extend.fontFamily.mono 38 | .join(', ') 39 | .replace(/"/gm, ''), 40 | size: tailwindConfig.theme.extend.fontSize.code, 41 | lineHeight: '24px', 42 | }, 43 | }; 44 | -------------------------------------------------------------------------------- /src/components/MDX/Sandpack/template.ts: -------------------------------------------------------------------------------- 1 | export const template = { 2 | '/src/index.js': { 3 | hidden: true, 4 | code: `import React, { StrictMode } from "react"; 5 | import { createRoot } from "react-dom/client"; 6 | import "./styles.css"; 7 | 8 | import App from "./App"; 9 | 10 | const root = createRoot(document.getElementById("root")); 11 | root.render( 12 | 13 | 14 | 15 | );`, 16 | }, 17 | '/package.json': { 18 | hidden: true, 19 | code: JSON.stringify( 20 | { 21 | name: 'react.dev', 22 | version: '0.0.0', 23 | main: '/src/index.js', 24 | scripts: { 25 | start: 'react-scripts start', 26 | build: 'react-scripts build', 27 | test: 'react-scripts test --env=jsdom', 28 | eject: 'react-scripts eject', 29 | }, 30 | dependencies: { 31 | react: '19.0.0-rc-3edc000d-20240926', 32 | 'react-dom': '19.0.0-rc-3edc000d-20240926', 33 | 'react-scripts': '^5.0.0', 34 | }, 35 | }, 36 | null, 37 | 2 38 | ), 39 | }, 40 | '/public/index.html': { 41 | hidden: true, 42 | code: ` 43 | 44 | 45 | 46 | 47 | Document 48 | 49 | 50 |
51 | 52 | `, 53 | }, 54 | }; 55 | -------------------------------------------------------------------------------- /src/components/MDX/Sandpack/useSandpackLint.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | // @ts-nocheck 6 | 7 | import {useState, useEffect} from 'react'; 8 | import type {EditorView} from '@codemirror/view'; 9 | 10 | export type LintDiagnostic = { 11 | line: number; 12 | column: number; 13 | severity: 'warning' | 'error'; 14 | message: string; 15 | }[]; 16 | 17 | export const useSandpackLint = () => { 18 | const [lintErrors, setLintErrors] = useState([]); 19 | const [lintExtensions, setLintExtensions] = useState([]); 20 | useEffect(() => { 21 | const loadLinter = async () => { 22 | const {linter} = await import('@codemirror/lint'); 23 | const onLint = linter(async (props: EditorView) => { 24 | // This is intentionally delayed until CodeMirror calls it 25 | // so that we don't take away bandwidth from things loading early. 26 | const {runESLint} = await import('./runESLint'); 27 | const editorState = props.state.doc; 28 | let {errors, codeMirrorErrors} = runESLint(editorState); 29 | // Ignore parsing or internal linter errors. 30 | const isReactRuleError = (error: any) => error.ruleId != null; 31 | setLintErrors(errors.filter(isReactRuleError)); 32 | return codeMirrorErrors.filter(isReactRuleError); 33 | }); 34 | setLintExtensions([onLint]); 35 | }; 36 | 37 | loadLinter(); 38 | }, []); 39 | return {lintErrors, lintExtensions}; 40 | }; 41 | -------------------------------------------------------------------------------- /src/components/MDX/SimpleCallout.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | import cn from 'classnames'; 7 | import {H3} from './Heading'; 8 | 9 | interface SimpleCalloutProps { 10 | title: string; 11 | children: React.ReactNode; 12 | className?: string; 13 | } 14 | function SimpleCallout({title, children, className}: SimpleCalloutProps) { 15 | return ( 16 |
21 |

24 | {title} 25 |

26 | {children} 27 |
28 | ); 29 | } 30 | 31 | export default SimpleCallout; 32 | -------------------------------------------------------------------------------- /src/components/MDX/TocContext.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {createContext} from 'react'; 6 | import type {ReactNode} from 'react'; 7 | 8 | export type TocItem = { 9 | url: string; 10 | text: ReactNode; 11 | depth: number; 12 | }; 13 | export type Toc = Array; 14 | 15 | export const TocContext = createContext([]); 16 | -------------------------------------------------------------------------------- /src/components/MDX/YouWillLearnCard.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | import ButtonLink from 'components/ButtonLink'; 7 | import {IconNavArrow} from 'components/Icon/IconNavArrow'; 8 | 9 | interface YouWillLearnCardProps { 10 | title: string; 11 | path: string; 12 | children: React.ReactNode; 13 | } 14 | 15 | function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) { 16 | return ( 17 |
18 |
19 |

20 | {title} 21 |

22 |
{children}
23 |
24 |
25 | 31 | 阅读更多 32 | 33 | 34 |
35 |
36 | ); 37 | } 38 | 39 | export default YouWillLearnCard; 40 | -------------------------------------------------------------------------------- /src/components/PageHeading.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import Breadcrumbs from 'components/Breadcrumbs'; 6 | import Tag from 'components/Tag'; 7 | import {H1} from './MDX/Heading'; 8 | import type {RouteTag, RouteItem} from './Layout/getRouteMeta'; 9 | import * as React from 'react'; 10 | import {IconCanary} from './Icon/IconCanary'; 11 | 12 | interface PageHeadingProps { 13 | title: string; 14 | canary?: boolean; 15 | status?: string; 16 | description?: string; 17 | tags?: RouteTag[]; 18 | breadcrumbs: RouteItem[]; 19 | } 20 | 21 | function PageHeading({ 22 | title, 23 | status, 24 | canary, 25 | tags = [], 26 | breadcrumbs, 27 | }: PageHeadingProps) { 28 | return ( 29 |
30 |
31 | {breadcrumbs ? : null} 32 |

33 | {title} 34 | {canary && ( 35 | 39 | )} 40 | {status ? —{status} : ''} 41 |

42 | {tags?.length > 0 && ( 43 |
44 | {tags.map((tag) => ( 45 | 46 | ))} 47 |
48 | )} 49 |
50 |
51 | ); 52 | } 53 | 54 | export default PageHeading; 55 | -------------------------------------------------------------------------------- /src/components/SocialBanner.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | */ 5 | 6 | import {useRef, useEffect} from 'react'; 7 | import cn from 'classnames'; 8 | import {ExternalLink} from './ExternalLink'; 9 | 10 | const bannerText = 'Stream React Conf on May 15-16.'; 11 | const bannerLink = 'https://conf.react.dev/'; 12 | const bannerLinkText = 'Learn more.'; 13 | 14 | export default function SocialBanner() { 15 | const ref = useRef(null); 16 | useEffect(() => { 17 | function patchedScrollTo(x: number, y: number) { 18 | if (y === 0) { 19 | // We're trying to reset scroll. 20 | // If we already scrolled past the banner, consider it as y = 0. 21 | const bannerHeight = ref.current?.offsetHeight ?? 0; // Could be zero (e.g. mobile) 22 | y = Math.min(window.scrollY, bannerHeight); 23 | } 24 | return realScrollTo(x, y); 25 | } 26 | const realScrollTo = window.scrollTo; 27 | (window as any).scrollTo = patchedScrollTo; 28 | return () => { 29 | (window as any).scrollTo = realScrollTo; 30 | }; 31 | }, []); 32 | return ( 33 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/components/Tag.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import cn from 'classnames'; 6 | import type {RouteTag} from './Layout/getRouteMeta'; 7 | 8 | const variantMap = { 9 | foundation: { 10 | name: '基础', 11 | classes: 'bg-yellow-50 text-white', 12 | }, 13 | intermediate: { 14 | name: '中级', 15 | classes: 'bg-purple-40 text-white', 16 | }, 17 | advanced: { 18 | name: '高级', 19 | classes: 'bg-green-40 text-white', 20 | }, 21 | experimental: { 22 | name: '实验性的', 23 | classes: 'bg-ui-orange text-white', 24 | }, 25 | deprecated: { 26 | name: '弃用', 27 | classes: 'bg-red-40 text-white', 28 | }, 29 | }; 30 | 31 | interface TagProps { 32 | variant: RouteTag; 33 | text?: string; 34 | className?: string; 35 | } 36 | 37 | function Tag({text, variant, className}: TagProps) { 38 | const {name, classes} = variantMap[variant]; 39 | return ( 40 | 41 | 46 | {text || name} 47 | 48 | 49 | ); 50 | } 51 | 52 | export default Tag; 53 | -------------------------------------------------------------------------------- /src/content/blog/2020/12/21/data-fetching-with-react-server-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "介绍零打包大小的 React 服务器组件" 3 | author: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbage 4 | date: 2020/12/21 5 | description: 2020 年是漫长的一年。随着它的结束，我们想在节日里分享一份特别的更新，介绍我们对零打包大小的 React 服务器组件的研究。 6 | --- 7 | 8 | 2020 年 12 月 21 日 [Dan Abramov](https://bsky.app/profile/danabra.mov)、[Lauren Tan](https://twitter.com/potetotes)、[Joseph Savona](https://twitter.com/en_JS) 与 [Sebastian Markbåge](https://twitter.com/sebmarkbage) 9 | 10 | --- 11 | 12 | 13 | 14 | 2020 年是漫长的一年。随着它的结束，我们想在节日里分享一份特别的更新，介绍我们对零打包大小的 **React 服务器组件** 的研究。 15 | 16 | 17 | 18 | --- 19 | 20 | 为了介绍 React 服务器组件，我们准备了一次演讲和演示。如果你愿意，在假期期间或新年工作重新开始后查看它们。 21 | 22 | 23 | 24 | **React 服务器组件仍处于研究和开发阶段**。我们将以透明的精神分享这项工作，并希望从 React 社区获得初步反馈。这个过程需要很多时间，所以 **你现在不必急着赶上进展**！ 25 | 26 | 如果你想了解它们，我们建议按照以下顺序进行查看： 27 | 28 | 1. **观看演讲** 以了解 React 服务器组件并观看演示。 29 | 30 | 2. **[克隆演示](http://github.com/reactjs/server-components-demo)** 并在你的计算机上尝试使用 React 服务器组件。 31 | 32 | 3. **[阅读 RFC（文末有FAQ）](https://github.com/reactjs/rfcs/pull/188)** 以深入了解技术细节并提供反馈意见。 33 | 34 | 我们非常期待你对 RFC 的反馈或者通过 [@reactjs](https://twitter.com/reactjs) 的 Twitter 账号回复我们。祝你度过愉快的假期，保重，明年再见！ 35 | -------------------------------------------------------------------------------- /src/content/community/docs-contributors.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 文档贡献者 3 | --- 4 | 5 | 6 | 7 | React 文档由 [React 团队](/community/team) 和 [外部贡献者](https://github.com/reactjs/react.dev/graphs/contributors) 编写和维护。在本页面上，我们要感谢一些为该网站做出重大贡献的人员。 8 | 9 | 10 | 11 | ## 内容 {/*content*/} 12 | 13 | * [Rachel Nabors](https://twitter.com/RachelNabors)：编辑、写作、插图 14 | * [Dan Abramov](https://bsky.app/profile/danabra.mov)：写作、教程设计 15 | * [Sylwia Vargas](https://twitter.com/SylwiaVargas)：示例代码、写作 16 | * [Rick Hanlon](https://twitter.com/rickhanlonii)：写作 17 | * [David McCabe](https://twitter.com/mcc_abe)：写作 18 | * [Sophie Alpert](https://twitter.com/sophiebits)：写作 19 | * [Pete Hunt](https://twitter.com/floydophone)：写作 20 | * [Andrew Clark](https://twitter.com/acdlite)：写作 21 | * [Matt Carroll](https://twitter.com/mattcarrollcode)：编辑、写作 22 | * [Natalia Tepluhina](https://twitter.com/n_tepluhina)：审查、建议 23 | * [Sebastian Markbåge](https://twitter.com/sebmarkbage)：反馈 24 | 25 | ## 设计 {/*design*/} 26 | 27 | * [Dan Lebowitz](https://twitter.com/lebo)：站点设计 28 | * [Razvan Gradinar](https://dribbble.com/GradinarRazvan)：沙箱设计 29 | * [Maggie Appleton](https://maggieappleton.com/)：图表系统 30 | * [Sophie Alpert](https://twitter.com/sophiebits)：多彩的代码解释 31 | 32 | ## 开发 {/*development*/} 33 | 34 | * [Jared Palmer](https://twitter.com/jaredpalmer)：站点开发 35 | * [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando)、[Dustin Goodman](https://twitter.com/dustinsgoodman))：站点开发 36 | * [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves)、[Alex Moldovan](https://twitter.com/alexnmoldovan)、[Jasper De Moor](https://twitter.com/JasperDeMoor)、[Danilo Woznica](https://twitter.com/danilowoz))：沙箱集成 37 | * [Dan Abramov](https://bsky.app/profile/danabra.mov)：站点开发 38 | * [Rick Hanlon](https://twitter.com/rickhanlonii)：站点开发 39 | * [Harish Kumar](https://www.strek.in/)：开发和维护 40 | * [Luna Ruan](https://twitter.com/lunaruan)：沙箱改进 41 | 42 | 我们还要感谢无数的 alpha 测试人员和社区成员，在这个过程中给予我们反馈意见。 43 | -------------------------------------------------------------------------------- /src/content/community/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Community 3 | --- 4 | 5 | 6 | 7 | React 拥有数百万开发者的社区。本章节将为你列出一些与 React 相关的社区，你也可以成为其中的一员；本章节中的其他页面将为你提供更多在线与面对面的学习资料。 8 | 9 | 10 | 11 | ## 行为准则 {/*code-of-conduct*/} 12 | 13 | 在参与 React 社区前，[请阅读我们的行为准则](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)。我们制订了 [贡献者公约](https://www.contributor-covenant.org/)，我们希望所有社区成员都能遵守其中的准则。 14 | 15 | ## Stack Overflow {/*stack-overflow*/} 16 | 17 | Stack Overflow 是非常受欢迎的论坛，在论坛中，你可以提出代码层面的问题，甚至是你工作中的疑难杂症。提问前，请先阅读标有 **reactjs** 的 [已有问题](https://stackoverflow.com/questions/tagged/reactjs)，如未找到你需要的答案，[再自行提问](https://stackoverflow.com/questions/ask?tags=reactjs)！ 18 | 19 | ## 热门讨论区 {/*popular-discussion-forums*/} 20 | 21 | 许多论坛是讨论最佳实践、应用架构以及 React 新特性的好地方。但如果你想讨论的是代码级问题，通常 Stack Overflow 会更合适。 22 | 23 | 每个社区都由成千上万的 React 开发者组成。 24 | 25 | * [DEV's React community](https://dev.to/t/react) 26 | * [Hashnode's React community](https://hashnode.com/n/reactjs) 27 | * [Reactiflux online chat](https://discord.gg/reactiflux) 28 | * [Reddit's React community](https://www.reddit.com/r/reactjs/) 29 | 30 | ## 新闻 {/*news*/} 31 | 32 | 关于 React 的最新消息，请在 Twitter 上关注 [**@reactjs**](https://twitter.com/reactjs)，同时关注本站中的 [React 的官方博客](/blog/)。 33 | -------------------------------------------------------------------------------- /src/content/community/translations.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Translations 3 | --- 4 | 5 | 6 | 7 | React docs are translated by the global community into many languages all over the world. 8 | 9 | 10 | 11 | ## Source site {/*main-site*/} 12 | 13 | All translations are provided from the canonical source docs: 14 | 15 | - [English](https://react.dev/) — [Contribute](https://github.com/reactjs/react.dev/) 16 | 17 | ## Full translations {/*full-translations*/} 18 | 19 | {/* If you are a language maintainer and want to add your language here, finish the "Core" translations and edit `deployedTranslations` under `src/utils`. */} 20 | 21 | 22 | 23 | ## In-progress translations {/*in-progress-translations*/} 24 | 25 | For the progress of each translation, see: [Is React Translated Yet?](https://translations.react.dev/) 26 | 27 | 28 | 29 | ## How to contribute {/*how-to-contribute*/} 30 | 31 | You can contribute to the translation efforts! 32 | 33 | The community conducts the translation work for the React docs on each language-specific fork of react.dev. Typical translation work involves directly translating a Markdown file and creating a pull request. Click the "contribute" link above to the GitHub repository for your language, and follow the instructions there to help with the translation effort. 34 | 35 | If you want to start a new translation for your language, visit: [translations.react.dev](https://github.com/reactjs/translations.react.dev) -------------------------------------------------------------------------------- /src/content/errors/377.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire. 4 | 5 | 6 | 7 | We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message. 8 | 9 | The full text of the error you just encountered is: 10 | 11 | 12 | 13 | This error occurs when you pass a BigInt value from a Server Component to a Client Component. 14 | -------------------------------------------------------------------------------- /src/content/errors/generic.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire. 4 | 5 | 6 | 7 | We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message. 8 | 9 | The full text of the error you just encountered is: 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/content/errors/index.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire. 4 | 5 | 6 | 7 | 8 | We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, the error message will include just a link to the docs for the error. 9 | 10 | For an example, see: [https://react.dev/errors/149](/errors/421). 11 | -------------------------------------------------------------------------------- /src/content/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: home 3 | title: React 官方中文文档 4 | permalink: index.html 5 | --- 6 | 7 | {/* See HomeContent.js */} 8 | -------------------------------------------------------------------------------- /src/content/learn/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 安装 3 | translators: 4 | - ChelesteWang 5 | --- 6 | 7 | 8 | 9 | React 从诞生之初就是可被渐进式使用的。因此你可以选择性地使用 React 特性。不管你是想体验下 React，用它为简单的 HTML 页面增加交互，还是重新搭建一个由 React 驱动的复杂应用，本章节内容都能帮你快速入门。 10 | 11 | 12 | 13 | ## Try React {/*try-react*/} 14 | 15 | 无需进行任何安装，即可体验： 16 | 17 | 18 | 19 | ```js 20 | function Greeting({ name }) { 21 | return

Hello, {name}

; 22 | } 23 | 24 | export default function App() { 25 | return 26 | } 27 | ``` 28 | 29 | 30 | 31 | 你可以直接对它进行编辑，或点击右上角的 "Fork" 按钮在一个新的标签页中打开。 32 | 33 | React 文档中的大部分页面都包含这样的 sandbox。除 React 文档以外，还存在许多支持 React 的在线代码编辑器：例如 [CodeSandbox](https://codesandbox.io/s/new)，[StackBlitz](https://stackblitz.com/fork/react)，或者 [CodePen](https://codepen.io/pen?template=QWYVwWN)。 34 | 35 | 想要在本地尝试 React，你可以 [下载这个 HTML 页面](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html)。然后就可以使用编辑器或是浏览器打开它了！ 36 | 37 | ## 创建一个 React 应用 {/*creating-a-react-app*/} 38 | 39 | 如果你想开始一个新的 React 应用，你可以用我们推荐的框架 [创建一个 React 应用](/learn/creating-a-react-app)。 40 | 41 | ## Build a React Framework {/*build-a-react-framework*/} 42 | 43 | 如果某个框架不适合你的项目，或者你更愿意从构建自己的框架开始，则可以 [构建你自己的 React 框架](/learn/building-a-react-framework)。 44 | 45 | 46 | ## 添加 React 到一个已有的项目 {/*add-react-to-an-existing-project*/} 47 | 48 | 如果你想尝试在现有应用程序或网站中使用 React，你可以 [将 React 添加到现有项目](/learn/add-react-to-an-existing-project)。 49 | 50 | ## 弃用的选项 {/*deprecated-options*/} 51 | 52 | ### Create React App（已弃用） {/*create-react-app-deprecated*/} 53 | 54 | Create React App 是一个已弃用的工具，以前建议用于创建新的 React 应用。如果你想启动新的 React 应用，你可以 [创建 React 应用](/learn/creating-a-react-app)并使用推荐的框架。 55 | 56 | 更多信息，参见 [逐步淘汰 Create React App](/blog/2025/02/14/sunsetting-create-react-app)。 57 | 58 | ## 下一节 {/*next-steps*/} 59 | 60 | 前往 [快速入门](/learn) 章节。以学习你每天都会遇到且最为重要的 React 概念。 61 | -------------------------------------------------------------------------------- /src/content/learn/react-developer-tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 开发者工具 3 | translators: 4 | - dahui4dev 5 | --- 6 | 7 | 8 | 9 | 使用 React 开发者工具检查 React [components](/learn/your-first-component)，编辑 [props](/learn/passing-props-to-a-component) 和 [state](/learn/state-a-components-memory)，并识别性能问题。 10 | 11 | 12 | 13 | 14 | 15 | * 如何安装 React 开发者工具 16 | 17 | 18 | 19 | ## 浏览器扩展 {/*browser-extension*/} 20 | 21 | 调试 React 构建的网站最简单的办法就是安装 React 开发者工具浏览器扩展。它可用于几种流行的浏览器： 22 | 23 | * [安装 **Chrome** 扩展](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) 24 | * [安装 **Firefox** 扩展](https://addons.mozilla.org/zh-CN/firefox/addon/react-devtools/) 25 | * [安装 **Edge** 扩展](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) 26 | 27 | 现在，如果你访问一个用 **React 构建** 的网站，你将看到 **Components** 和 **Profiler** 面板。 28 | 29 | ![React Developer Tools extension](/images/docs/react-devtools-extension.png) 30 | 31 | ### Safari 和其他浏览器 {/*safari-and-other-browsers*/} 32 | 为其他浏览器（比如，Safari），安装 [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm 包: 33 | ```bash 34 | # Yarn 35 | yarn global add react-devtools 36 | 37 | # Npm 38 | npm install -g react-devtools 39 | ``` 40 | 41 | 接下来从终端打开开发者工具： 42 | ```bash 43 | react-devtools 44 | ``` 45 | 46 | 然后通过将以下 ` 51 | ``` 52 | 53 | 现在在浏览器里刷新你的网站，你可以在开发者工具里查看它。 54 | 55 | ![独立的 React Developer Tools](/images/docs/react-devtools-standalone.png) 56 | 57 | ## 移动端（React Native） {/*mobile-react-native*/} 58 | 59 | 你可以使用 [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) 来检查 [React Native](https://reactnative.dev/) 应用程序，它的内置调试器与 React Developer Tools 进行了深度集成。所有功能与浏览器扩展的工作方式相同，包括本机元素突出显示和选择。 60 | 61 | [了解有关调试 React Native 的更多信息](https://reactnative.dev/docs/debugging)。 62 | 63 | > 对于 React Native 0.76 之前的版本，请按照上面的 [Safari and other browsers](#safari-and-other-browsers) 指南独立构建 React DevTools。 -------------------------------------------------------------------------------- /src/content/learn/setup.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Setup 3 | --- 4 | 5 | 6 | React integrates with tools like editors, TypeScript, browser extensions, and compliers. This section will help you get your environment set up. 7 | 8 | 9 | 10 | ## Editor Setup {/*editor-setup*/} 11 | 12 | See our [recommended editors](/learn/editor-setup) and learn how to set them up to work with React. 13 | 14 | ## Using TypeScript {/*using-typescript*/} 15 | 16 | TypeScript is a popular way to add type definitions to JavaScript codebases. [Learn how to integrate TypeScript into your React projects](/learn/typescript). 17 | 18 | ## React Developer Tools {/*react-developer-tools*/} 19 | 20 | React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](learn/react-developer-tools). 21 | 22 | ## React Compiler {/*react-compiler*/} 23 | 24 | React Compiler is a tool that automatically optimizes your React app. [Learn more](/learn/react-compiler). 25 | 26 | ## Start a React Project from scratch {/*start-a-react-project-from-scratch*/} 27 | 28 | If you want to build your own framework, you can [start a React project from scratch](/learn/start-a-react-project-from-scratch). 29 | 30 | ## Next steps {/*next-steps*/} 31 | 32 | Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. 33 | -------------------------------------------------------------------------------- /src/content/reference/react-dom/client/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Client React DOM API 3 | translators: 4 | - neo-of-matrix 5 | --- 6 | 7 | 8 | 9 | `react-dom/client` API 允许你在客户端（浏览器）渲染 React 组件。这些 API 通常在应用程序顶层调用，以初始化 React 树。有的 [框架](/learn/start-a-new-react-project#production-grade-react-frameworks) 可能会为你调用相关 API，大多数组件不需要导入和使用这些 API。 10 | 11 | 12 | 13 | --- 14 | 15 | ## 客户端 API {/*client-apis*/} 16 | 17 | * [`createRoot`](/reference/react-dom/client/createRoot) 让你可以在浏览器的 DOM 节点里面创建一个根节点以显示 React 组件。 18 | * [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 让你可以在 HTML 内容提前由 [`react-dom/server`](/reference/react-dom/server) 生成的浏览器 DOM 节点里面显示 React 组件。 19 | --- 20 | 21 | ## 浏览器兼容性 {/*browser-support*/} 22 | 23 | React 支持所有流行的浏览器，包括 Internet Explorer 9 以及以上版本的浏览器。更旧的浏览器比如 IE9 和 IE10 需要使用 polyfill。 24 | -------------------------------------------------------------------------------- /src/content/reference/react-dom/components/progress.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "" 3 | --- 4 | 5 | 6 | 7 | [浏览器内置的 `` 组件](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress) 允许你渲染一个进度指示器。 8 | 9 | ```js 10 | 11 | ``` 12 | 13 | 14 | 15 | 16 | 17 | --- 18 | 19 | ## 参考 {/*reference*/} 20 | 21 | ### `` {/*progress*/} 22 | 23 | 使用 [浏览器内置的 `` 组件](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress) 渲染一个进度指示器。 24 | 25 | ```js 26 | 27 | ``` 28 | 29 | [参见下面更多示例](#usage)。 30 | 31 | #### 参数 {/*props*/} 32 | 33 | `` 支持所有 [常见的元素属性](/reference/react-dom/components/common#props)。 34 | 35 | 除此之外，`` 还支持以下属性： 36 | 37 | - [`max`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress#attr-max)：一个数字，表示指定的最大 `value`。默认值为 `1`。 38 | - [`value`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress#value)：一个介于 `0` 至 `max` 之间的数字。如果不确定具体的进度，那么该值可以为 `null`。`value` 表示完成了多少进度。 39 | 40 | --- 41 | 42 | ## 用法 {/*usage*/} 43 | 44 | ### 控制进度指示器 {/*controlling-a-progress-indicator*/} 45 | 46 | 使用 `` 组件渲染进度指示器。你可以传递一个介于 `0` 和指定的 `max` 值之间的数字 `value`。如果不传递 `max` 参数，那么 `max` 默认值为 `1`。 47 | 48 | 如果相关操作未持续进行，请传递 `value={null}` 将进度指示器设置为不确定状态。 49 | 50 | 51 | 52 | ```js 53 | export default function App() { 54 | return ( 55 | <> 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | ); 64 | } 65 | ``` 66 | 67 | ```css 68 | progress { display: block; } 69 | ``` 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/content/reference/react-dom/hooks/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Built-in React DOM Hooks" 3 | --- 4 | 5 | 6 | 7 | `react-dom` 包含的 Hook 仅支持 web 应用程序，即在浏览器 DOM 环境中运行的应用程序。这些 Hook 不支持非浏览器环境，如 iOS、Android 或 Windows 应用程序。如果正在寻找在 web 浏览器以及其他环境中支持的 Hook，请参阅 [React Hooks 页面](/reference/react)。该页面列出了 `react-dom` 包中的所有 Hook。 8 | 9 | 10 | 11 | --- 12 | 13 | ## Form Hooks {/*form-hooks*/} 14 | 15 | **Form** 允许创建用于提交信息的交互式控件。要在组件中管理表单，请使用以下其中一个 Hook： 16 | 17 | * [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 允许根据表单的状态更新用户界面。 18 | 19 | ```js 20 | function Form({ action }) { 21 | async function increment(n) { 22 | return n + 1; 23 | } 24 | const [count, incrementFormAction] = useActionState(increment, 0); 25 | return ( 26 |
27 | 28 |
39 | ); 40 | } 41 | ``` 42 | -------------------------------------------------------------------------------- /src/content/reference/react-dom/preconnect.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: preconnect 3 | --- 4 | 5 | 6 | 7 | `preconnect` 可以帮助提前连接到一个期望从中加载资源的服务器。 8 | 9 | ```js 10 | preconnect("https://example.com"); 11 | ``` 12 | 13 | 14 | 15 | 16 | 17 | --- 18 | 19 | ## 参考 {/*reference*/} 20 | 21 | ### `preconnect(href)` {/*preconnect*/} 22 | 23 | 调用 `react-dom` 中的 `preconnect` 函数以实现预连接到主机。 24 | 25 | ```js 26 | import { preconnect } from 'react-dom'; 27 | 28 | function AppRoot() { 29 | preconnect("https://example.com"); 30 | // …… 31 | } 32 | 33 | ``` 34 | 35 | [参见下方更多示例](#usage)。 36 | 37 | `preconnect` 函数向浏览器提供一个提示，告诉它应该打开到给定服务器的连接。如果浏览器选择这样做，则可以加快从该服务器加载资源的速度。 38 | 39 | #### 参数 {/*parameters*/} 40 | 41 | * `href`：字符串，表示希望连接到的服务器 URL。 42 | 43 | 44 | #### 返回值 {/*returns*/} 45 | 46 | `preconnect` 不返回任何值。 47 | 48 | #### 注意 {/*caveats*/} 49 | 50 | * 对同一服务器进行多次调用 `preconnect` 具有与单次调用相同的效果。 51 | * 在浏览器中，可以在任何情况下调用 `preconnect`：例如渲染组件时、Effect 中以及事件处理程序中等等。 52 | * 在服务器端渲染或渲染服务器组件时，只有在渲染组件或在从渲染组件中发起的异步上下文中调用 `preconnect` 时才会生效。任何其他调用都将被忽略。 53 | * 如果知道即将需要的具体资源，可以调用 [其他函数](/reference/react-dom/#resource-preloading-apis)，这些函数将立即开始加载资源。 54 | * 预连接到托管网页本身的相同服务器没有好处，因为在给出提示时它已经连接。 55 | 56 | --- 57 | 58 | ## 用法 {/*usage*/} 59 | 60 | ### 渲染时预连接 {/*preconnecting-when-rendering*/} 61 | 62 | 如果知道组件的子元素将从该主机加载外部资源，请在渲染组件时调用 `preconnect`。 63 | 64 | ```js 65 | import { preconnect } from 'react-dom'; 66 | 67 | function AppRoot() { 68 | preconnect("https://example.com"); 69 | return ...; 70 | } 71 | ``` 72 | 73 | ### 在事件处理程序中预连接 {/*preconnecting-in-an-event-handler*/} 74 | 75 | 在转换到需要外部资源的页面或状态之前，于事件处理程序中调用 `preconnect`。这会比在渲染新页面或状态时调用它更早地启动该过程。 76 | 77 | ```js 78 | import { preconnect } from 'react-dom'; 79 | 80 | function CallToAction() { 81 | const onClick = () => { 82 | preconnect('http://example.com'); 83 | startWizard(); 84 | } 85 | return ( 86 | 87 | ); 88 | } 89 | ``` 90 | -------------------------------------------------------------------------------- /src/content/reference/react-dom/prefetchDNS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: prefetchDNS 3 | --- 4 | 5 | 6 | 7 | `prefetchDNS` 允许提前查找期望从中加载资源的服务器的 IP。 8 | 9 | ```js 10 | prefetchDNS("https://example.com"); 11 | ``` 12 | 13 | 14 | 15 | 16 | 17 | --- 18 | 19 | ## 参考 {/*reference*/} 20 | 21 | ### `prefetchDNS(href)` {/*prefetchdns*/} 22 | 23 | 调用 `react-dom` 中的 `prefetchDNS` 函数以查找主机。 24 | 25 | ```js 26 | import { prefetchDNS } from 'react-dom'; 27 | 28 | function AppRoot() { 29 | prefetchDNS("https://example.com"); 30 | // …… 31 | } 32 | 33 | ``` 34 | 35 | [参见下方更多示例。](#usage) 36 | 37 | `prefetchDNS` 函数向浏览器提供一个提示，告诉它应该查找给定服务器的 IP 地址。如果浏览器选择这样做，则可以加快从该服务器加载资源的速度。 38 | 39 | #### 参数 {/*parameters*/} 40 | 41 | * `href`：字符串，表示希望连接到的服务器 URL。 42 | 43 | #### 返回值 {/*returns*/} 44 | 45 | `prefetchDNS` 不返回任何值。 46 | 47 | #### 注意 {/*caveats*/} 48 | 49 | * 对同一服务器进行多次调用 `prefetchDNS` 具有与单次调用相同的效果。 50 | * 在浏览器中，可以在任何情况下调用 `prefetchDNS`：例如渲染组件时、Effect 中以及事件处理程序中等等。 51 | * 在服务器端渲染或渲染服务器组件时，只有在渲染组件或在从渲染组件中发起的异步上下文中调用 `prefetchDNS` 时才会生效。任何其他调用都将被忽略。 52 | * 如果知道即将需要的具体资源，可以调用 [其他函数](/reference/react-dom/#resource-preloading-apis)，这些函数将立即开始加载资源。 53 | * 对于托管网页本身的相同服务器，预获取其 IP 地址没有好处，因为在给出提示时它已经被查找过了。 54 | * 与 [`preconnect`](/reference/react-dom/preconnect) 相比，如果正在尝试与大量域名进行推测性连接，`prefetchDNS` 可能更有效，因为预连接的开销可能会超过其带来的好处。 55 | 56 | --- 57 | 58 | ## 用法 {/*usage*/} 59 | 60 | ### 渲染时预获取 DNS {/*prefetching-dns-when-rendering*/} 61 | 62 | 如果知道组件的子元素将从该主机加载外部资源，请在渲染组件时调用 `prefetchDNS`。 63 | 64 | ```js 65 | import { prefetchDNS } from 'react-dom'; 66 | 67 | function AppRoot() { 68 | prefetchDNS("https://example.com"); 69 | return ...; 70 | } 71 | ``` 72 | 73 | ### 在事件处理程序中预获取 DNS {/*prefetching-dns-in-an-event-handler*/} 74 | 75 | 在转换到需要外部资源的页面或状态之前，于事件处理程序中调用 `prefetchDNS`。这会比在渲染新页面或状态时调用它更早地启动该过程。 76 | 77 | ```js 78 | import { prefetchDNS } from 'react-dom'; 79 | 80 | function CallToAction() { 81 | const onClick = () => { 82 | prefetchDNS('http://example.com'); 83 | startWizard(); 84 | } 85 | return ( 86 | 87 | ); 88 | } 89 | ``` 90 | -------------------------------------------------------------------------------- /src/content/reference/react-dom/server/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Server React DOM API 3 | --- 4 | 5 | 6 | 7 | `react-dom/server` API 允许你通过服务端渲染将 React 组件渲染为 HTML。这些 API 仅在服务器应用程序顶层调用，以生成初始 HTML。有的 [框架](/learn/start-a-new-react-project#production-grade-react-frameworks) 可能会为你调用相关 API。大多数组件不需要导入或使用这些 API。 8 | 9 | 10 | 11 | --- 12 | 13 | ## Node.js 流服务器 API {/*server-apis-for-nodejs-streams*/} 14 | 15 | 以下方法仅在具有 [Node.js 流](https://nodejs.org/api/stream.html) 的环境中可用： 16 | 17 | * [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) 将 React 树渲染为可传输的 [Node.js 流](https://nodejs.org/api/stream.html)。 18 | 19 | --- 20 | 21 | ## Web 流服务器 API {/*server-apis-for-web-streams*/} 22 | 23 | 以下方法仅在具有 [web 流](https://developer.mozilla.org/zh-CN/docs/Web/API/Streams_API) 的环境中可用，包括浏览器、Deno，以及一些现代 edge 运行时： 24 | 25 | + [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) 将 React 树渲染为 [可读的 web 流](https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream)。 26 | 27 | --- 28 | 29 | ## 过时的非流式环境 API {/*legacy-server-apis-for-non-streaming-environments*/} 30 | 31 | 以下方法可以在非流式环境中使用： 32 | 33 | * [`renderToString`](/reference/react-dom/server/renderToString) 将 React 树渲染为字符串。 34 | * [`renderToStaticMarkup`](/reference/react-dom/server/renderToStaticMarkup) 将非交互式 React 树渲染为字符串。 35 | 36 | 相比于流式 API，这些 API 在功能上有些限制。 37 | -------------------------------------------------------------------------------- /src/content/reference/react-dom/static/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Static React DOM APIs 3 | --- 4 | 5 | 6 | 7 | `react-dom/static` API 允许你为 React 组件生成静态 HTML。与流式 API 相比，它们的功能有限。[框架](/learn/start-a-new-react-project#production-grade-react-frameworks) 可能会调用它们。你的大多数组件不需要导入或使用它们。 8 | 9 | 10 | 11 | --- 12 | 13 | ## Web 流的静态 API {/*static-apis-for-web-streams*/} 14 | 15 | 这些方法仅在支持 [Web 流](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 的环境中可用，包括浏览器、Deno 和一些现代的边缘运行时环境： 16 | 17 | * [`prerender`](/reference/react-dom/static/prerender) 使用 [可读的 Web 流](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) 将 React 树渲染为静态 HTML。 18 | 19 | 20 | --- 21 | 22 | ## Node.js 流的静态 API {/*static-apis-for-nodejs-streams*/} 23 | 24 | 这些方法仅在支持 [Node.js 流](https://nodejs.org/api/stream.html) 的环境中可用： 25 | 26 | * [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) 使用 [Node.js 流](https://nodejs.org/api/stream.html) 将 React 树渲染为静态 HTML。 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/content/reference/react/apis.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 内置的 React API 3 | translators: 4 | - loveloki 5 | - Yucohny 6 | --- 7 | 8 | 9 | 10 | 除了 [Hooks](/reference/react) 和 [Components](/reference/react/components) 之外，`react` 包还导出了一些其他的 API，这些 API 对于创建组件非常有用。本页面将介绍这些剩余的 React API。 11 | 12 | 13 | 14 | --- 15 | 16 | * [`createContext`](/reference/react/createContext) API 可以创建一个 context，你可以将其提供给子组件，通常会与 [`useContext`](/reference/react/useContext) 一起配合使用。 17 | * [`forwardRef`](/reference/react/forwardRef) 允许组件将 DOM 节点作为 ref 暴露给父组件。 18 | * [`lazy`](/reference/react/lazy) 允许你延迟加载组件，直到该组件需要第一次被渲染。 19 | * [`memo`](/reference/react/memo) 允许你在 props 没有变化的情况下跳过组件的重渲染。通常 [`useMemo`](/reference/react/useMemo) 与 [`useCallback`](/reference/react/useCallback) 会一起配合使用。 20 | * [`startTransition`](/reference/react/startTransition) 允许你可以标记一个状态更新是不紧急的。类似于 [`useTransition`](/reference/react/useTransition)。 21 | * [`act`](/reference/react/act) 允许你在测试中包装渲染和交互，以确保在断言之前已完成更新。 22 | 23 | --- 24 | 25 | ## Resource APIs {/*resource-apis*/} 26 | 27 | *Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context. 28 | 29 | To read a value from a resource, use this API: 30 | 31 | * [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context). 32 | ```js 33 | function MessageComponent({ messagePromise }) { 34 | const message = use(messagePromise); 35 | const theme = use(ThemeContext); 36 | // ... 37 | } 38 | ``` 39 | -------------------------------------------------------------------------------- /src/content/reference/react/components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Built-in React Components" 3 | --- 4 | 5 | 6 | 7 | React 提供了一些内置的组件，你可以在 JSX 中使用它们。 8 | 9 | 10 | 11 | --- 12 | 13 | ## 内置组件 {/*built-in-components*/} 14 | 15 | * [``](/reference/react/Fragment)，也可以写作 `<>...`，让你可以将多个 JSX 节点组合在一起。 16 | * [``](/reference/react/Profiler) 让你可以以编程方式衡量 React 树的渲染性能。 17 | * [``](/reference/react/Suspense) 让你可以在子组件加载时显示后备方案。 18 | * [``](/reference/react/StrictMode) 可以开启一些额外的，仅用于开发环境的检测，帮助你更早地发现 bug。 19 | 20 | --- 21 | 22 | ## 自定义组件 {/*your-own-components*/} 23 | 24 | 你也可以将 [自己定义的组件](/learn/your-first-component) 定义为 JavaScript 函数。 25 | -------------------------------------------------------------------------------- /src/content/reference/react/experimental_useEffectEvent.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: experimental_useEffectEvent 3 | --- 4 | 5 | 6 | 7 | **这是实验性 API，并且在 React 的稳定版中还不可用**。 8 | 9 | 你可以通过升级到最新的实验版 React 包来尝试： 10 | 11 | - `react@experimental` 12 | - `react-dom@experimental` 13 | - `eslint-plugin-react-hooks@experimental` 14 | 15 | 实验性 API 可能存在 bug，所以不要在生产环境使用。 16 | 17 | 18 | 19 | 20 | 21 | 22 | `useEffectEvent` 这个 React Hook 让你可以提取非响应式逻辑到 [Effect Event](/learn/separating-events-from-effects#declaring-an-effect-event) 中。 23 | 24 | ```js 25 | const onSomething = useEffectEvent(callback) 26 | ``` 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/content/reference/react/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 参考总览 3 | --- 4 | 5 | 6 | 7 | 本部分提供了使用 React 的详细参考文档。如果需要了解 React，请访问 [教程](/learn) 部分。 8 | 9 | 10 | 11 | React 参考文档分为以下内容： 12 | 13 | ## React {/*react*/} 14 | 15 | 编程式 React 功能： 16 | 17 | * [Hook](/reference/react/hooks) —— 在组件中使用不同的 React 特性。 18 | * [组件](/reference/react/components) —— 可以在 JSX 中使用的内置组件。 19 | * [API](/reference/react/apis) —— 用于定义组件的有用 API。 20 | * [指示符](/reference/rsc/directives) —— 为与 React 服务器组件兼容的捆绑器提供指示。 21 | 22 | ## React DOM {/*react-dom*/} 23 | 24 | React-dom 仅支持在 web 应用程序中使用（在浏览器 DOM 环境中运行）。本节分为以下部分： 25 | 26 | * [Hook](/reference/react-dom/hooks) —— 适用于在浏览器 DOM 环境中运行的 web 应用程序的 Hook。 27 | * [组件](/reference/react-dom/components) —— React 支持所有内置的 HTML 和 SVG 组件。 28 | * [API](/reference/react-dom) —— `react-dom` 包含仅在 web 应用程序中支持的方法。 29 | * [客户端 API](/reference/react-dom/client) —— `react-dom/client` API 允许在客户端（浏览器中）渲染 React 组件。 30 | * [服务端 API](/reference/react-dom/server) —— `react-dom/server` API 允许在服务器端将 React 组件渲染为 HTML。 31 | 32 | 33 | ## Rules of React {/*rules-of-react*/} 34 | 35 | React 有一套表达模式的俗语与规则，它们以一种易于理解并能帮助实现高质量应用程序的方式表达出来： 36 | 37 | * [组件与 Hook 必须是纯粹的](/reference/rules/components-and-hooks-must-be-pure) —— 组件与 Hook 的纯粹代码更易于理解、调试，并允许 React 自动优化组件与 Hook。 38 | * [React 调用组件与 Hook](/reference/rules/react-calls-components-and-hooks) —— React 负责在必要时渲染组件与 Hook，以优化用户体验。 39 | * [Hook 规则](/reference/rules/rules-of-hooks) —— Hook 使用 JavaScript 函数定义，但它们代表一种特殊类型的可重用 UI 逻辑，对它们可以被调用的位置有限制。 40 | 41 | ## 过时的 API {/*legacy-apis*/} 42 | 43 | * [过时的 API](/reference/react/legacy) —— 从 react 包中导出，但不建议在新编写的代码中使用。 44 | -------------------------------------------------------------------------------- /src/content/reference/react/legacy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "过时的 React API" 3 | --- 4 | 5 | 6 | 7 | 这些 API 从 `react` 包中导出，但是已经不再推荐在最新代码中使用。参见下方每个 API 对应的页面以查看替代方案。 8 | 9 | 10 | 11 | --- 12 | 13 | ## 过时的 API {/*legacy-apis*/} 14 | 15 | * [`Children`](/reference/react/Children) 允许你处理和转化作为 `children` 的 JSX。[查看替代方案](/reference/react/Children#alternatives)。 16 | * [`cloneElement`](/reference/react/cloneElement) 允许你使用一个元素作为初始值创建一个新的 React 元素。[查看替代方案](/reference/react/cloneElement#alternatives)。 17 | * [`Component`](/reference/react/Component) 允许你定义一个 JavaScript class 作为 React 类式组件。[查看替代方案](/reference/react/Component#alternatives)。 18 | * [`createElement`](/reference/react/createElement) 允许你创建一个 React 元素，但是一般会使用 JSX。 19 | * [`createRef`](/reference/react/createRef) 允许你创建一个可以包含任何值的 ref 对象。[查看替代方案](/reference/react/createRef#alternatives)。 20 | * [`forwardRef`](/reference/react/forwardRef) 允许你使用 [ref](/learn/manipulating-the-dom-with-refs) 将 DOM 节点暴露给父组件。 21 | * [`isValidElement`](/reference/react/isValidElement) 检测参数值是否为 React 元素，通常会与 [`cloneElement`.](/reference/react/cloneElement) 一起使用。 22 | * [`PureComponent`](/reference/react/PureComponent) 与 [`Component`](/reference/react/Component) 类似，但是当 props 相同时会跳过重新渲染。[查看替代方案](/reference/react/PureComponent#alternatives)。 23 | 24 | --- 25 | 26 | ## 已移除的 API {/*removed-apis*/} 27 | 28 | 这些 API 在 React 19 中被移除。 29 | 30 | * [`createFactory`](https://18.react.dev/reference/react/createFactory)：使用 JSX 来替代。 31 | * 类组件：[`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): 使用 [`static contextType`](#static-contexttype) 来替代。 32 | * 类组件：[`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): 使用 [`static contextType`](#static-contexttype) 来替代。 33 | * 类组件：[`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): 使用 [`Context.Provider`](/reference/react/createContext#provider) 来替代。 34 | * 类组件：[`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): 使用 [TypeScript](https://www.typescriptlang.org/) 等类型系统来替代。 35 | * 类组件：[`this.refs`](https://18.react.dev//reference/react/Component#refs): 使用 [`createRef`](/reference/react/createRef) 来替代。 36 | -------------------------------------------------------------------------------- /src/content/reference/rsc/directives.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "指示符" 3 | --- 4 | 5 | 6 | 7 | 这些指令用于 [React 服务器组件](/learn/start-a-new-react-project#bleeding-edge-react-frameworks)。 8 | 9 | 10 | 11 | 12 | 13 | 指示符（directive）向 [与 React 服务器组件兼容的捆绑器](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) 提供指令（instruction）。 14 | 15 | 16 | 17 | --- 18 | 19 | ## 源码命令 {/*source-code-directives*/} 20 | 21 | * 使用 [`'use client'`](/reference/rsc/use-client) 标记运行在客户端的代码。 22 | * 使用 [`'use server'`](/reference/rsc/use-server) 标记可以被客户端代码调用的服务端函数。 23 | -------------------------------------------------------------------------------- /src/content/warnings/invalid-aria-prop.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 无效 ARIA 属性警告 3 | --- 4 | 5 | 如果你尝试渲染一个在 WAI 与 ARIA [规范](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties) 中不存在的 `aria-*` 属性，就会触发此警告。 6 | 7 | 1. 如果你认为你使用了有效的属性，请仔细检查拼写。`aria-labelledby` 与 `aria-activedescendant` 经常出现拼写错误。 8 | 9 | 2. 如果你使用了 `aria-role`，请试试 `role`。 10 | 11 | 3. 否则，如果你使用的是 React DOM 的最新版本，并且已经验证了你使用的是 ARIA 规范中列出的有效属性名称，请在这里 [报告错误](https://github.com/facebook/react/issues/new/choose)。 12 | -------------------------------------------------------------------------------- /src/content/warnings/react-test-renderer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: react-test-renderer Deprecation Warnings 3 | --- 4 | 5 | TODO: Update this for 19? 6 | 7 | ## ReactTestRenderer.create() warning {/*reacttestrenderercreate-warning*/} 8 | 9 | react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals. 10 | 11 | The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/start/intro) for a modern and well supported testing experience. 12 | 13 | 14 | ## new ShallowRenderer() warning {/*new-shallowrenderer-warning*/} 15 | 16 | The react-test-renderer package no longer exports a shallow renderer at `react-test-renderer/shallow`. This was simply a repackaging of a previously extracted separate package: `react-shallow-renderer`. Therefore you can continue using the shallow renderer in the same way by installing it directly. See [Github](https://github.com/enzymejs/react-shallow-renderer) / [NPM](https://www.npmjs.com/package/react-shallow-renderer). 17 | -------------------------------------------------------------------------------- /src/content/warnings/special-props.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 特殊属性警告 3 | --- 4 | 5 | JSX 上的大多数 props 都会传递给组件，但是有两个特殊的 props（`ref` 与 `key`）被 React 自身使用，因此这两个 props 不会被转发给组件。 6 | 7 | 例如，组件无法读取 `props.key`。如果你需要在子组件中访问相同的值，你应该将其作为不同的 props传递，如 `` 并读取 `props.id`。尽管这可能看起来很多余，但将应用逻辑与 React 提示分开非常重要。 8 | -------------------------------------------------------------------------------- /src/content/warnings/unknown-prop.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 未知属性警告 3 | --- 4 | 5 | 如果尝试使用 React 不认识的属性来渲染 DOM 元素，将会触发未知属性警告。你应该确保 DOM 元素没有无法识别的冗余属性。 6 | 7 | 出现此警告的可能原因有以下几个： 8 | 9 | 1. 你是否正在使用 `{...props}` 或 `cloneElement(element, props)`？在将 props 复制到子组件时，你应该确保不会意外地将仅用于父组件的 props 转发给子组件。请参阅下面针对此问题的常见修复方式。 10 | 11 | 2. 也许是为了展示自定义数据，你正在将非标准的 DOM 属性应用于 DOM 节点。如果你想将自定义数据附加到标准 DOM 元素上，请考虑使用自定义数据属性，如 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes) 中所述。 12 | 13 | 3. React 尚未识别指定的属性。这可能会在未来的 React 版本中修复。如果这样的属性名称为小写，React 将允许你传递它而不会出现警告。 14 | 15 | 4. 如果你使用一个首字母小写的 React 组件，如 ``，React 会将其解释为 DOM 标签，因为 React JSX 使用大小写约定来区分用户自定义组件与 DOM 标签。对于自定义 React 组件，请使用 PascalCase 命名。例如，`` 应该写为 ``。 16 | 17 | --- 18 | 19 | 如果你因为传递了类似 `{...props}` 的 props 而收到此警告，你的父组件需要使用（consume）任何仅用于父组件而不是子组件的 props。这是一个例子： 20 | 21 | **错误的做法**：意外地将 `layout` props 转发给 `div` 标签。 22 | 23 | ```js 24 | function MyDiv(props) { 25 | if (props.layout === 'horizontal') { 26 | // 错误！因为 layout 不是
能理解的属性。 27 | return
28 | } else { 29 | // 错误！因为 layout 不是
能理解的属性。 30 | return
31 | } 32 | } 33 | ``` 34 | 35 | **正确的做法**：使用展开运算符获取其他属性，并将这些属性放在一个变量中。 36 | 37 | ```js 38 | function MyDiv(props) { 39 | const { layout, ...rest } = props 40 | if (layout === 'horizontal') { 41 | return
42 | } else { 43 | return
44 | } 45 | } 46 | ``` 47 | 48 | **正确的做法**：你也可以将 props 拷贝给一个新对象，并从新对象中删除正在使用的键。但要确保不要从原始的 `this.props` 对象中删除属性，因为该对象应被视为不可变的。 49 | 50 | ```js 51 | function MyDiv(props) { 52 | const divProps = Object.assign({}, props); 53 | delete divProps.layout; 54 | 55 | if (props.layout === 'horizontal') { 56 | return
57 | } else { 58 | return
59 | } 60 | } 61 | ``` 62 | -------------------------------------------------------------------------------- /src/hooks/usePendingRoute.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {useRouter} from 'next/router'; 6 | import {useState, useRef, useEffect} from 'react'; 7 | 8 | const usePendingRoute = () => { 9 | const {events} = useRouter(); 10 | const [pendingRoute, setPendingRoute] = useState(null); 11 | const currentRoute = useRef(null); 12 | useEffect(() => { 13 | let routeTransitionTimer: any = null; 14 | 15 | const handleRouteChangeStart = (url: string) => { 16 | clearTimeout(routeTransitionTimer); 17 | routeTransitionTimer = setTimeout(() => { 18 | if (currentRoute.current !== url) { 19 | currentRoute.current = url; 20 | setPendingRoute(url); 21 | } 22 | }, 100); 23 | }; 24 | const handleRouteChangeComplete = () => { 25 | setPendingRoute(null); 26 | clearTimeout(routeTransitionTimer); 27 | }; 28 | events.on('routeChangeStart', handleRouteChangeStart); 29 | events.on('routeChangeComplete', handleRouteChangeComplete); 30 | 31 | return () => { 32 | events.off('routeChangeStart', handleRouteChangeStart); 33 | events.off('routeChangeComplete', handleRouteChangeComplete); 34 | clearTimeout(routeTransitionTimer); 35 | }; 36 | }, [events]); 37 | 38 | return pendingRoute; 39 | }; 40 | 41 | export default usePendingRoute; 42 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {Page} from 'components/Layout/Page'; 6 | import {MDXComponents} from 'components/MDX/MDXComponents'; 7 | import sidebarLearn from '../sidebarLearn.json'; 8 | 9 | const {Intro, MaxWidth, p: P, a: A} = MDXComponents; 10 | 11 | export default function NotFound() { 12 | return ( 13 | 14 | 15 | 16 |

This page doesn’t exist.

17 |

18 | If this is a mistake{', '} 19 | 20 | let us know 21 | 22 | {', '} 23 | and we will try to fix it! 24 |

25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/pages/500.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {Page} from 'components/Layout/Page'; 6 | import {MDXComponents} from 'components/MDX/MDXComponents'; 7 | import sidebarLearn from '../sidebarLearn.json'; 8 | 9 | const {Intro, MaxWidth, p: P, a: A} = MDXComponents; 10 | 11 | export default function NotFound() { 12 | return ( 13 | 17 | 18 | 19 |

Something went very wrong.

20 |

Sorry about that.

21 |

22 | If you’d like, please{' '} 23 | 24 | report a bug. 25 | 26 |

27 | 28 | 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import {useEffect} from 'react'; 6 | import {AppProps} from 'next/app'; 7 | import {useRouter, Router} from 'next/router'; 8 | 9 | import '@docsearch/css'; 10 | import '../styles/algolia.css'; 11 | import '../styles/index.css'; 12 | import '../styles/sandpack.css'; 13 | 14 | if (typeof window !== 'undefined') { 15 | const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload'; 16 | window.addEventListener(terminationEvent, function () { 17 | // @ts-ignore 18 | gtag('event', 'timing', { 19 | event_label: 'JS Dependencies', 20 | event: 'unload', 21 | }); 22 | }); 23 | } 24 | 25 | Router.events.on('routeChangeComplete', (url) => { 26 | try { 27 | (window as any)._hmt.push(['_trackPageview', url]); 28 | } catch (e) {} 29 | }); 30 | 31 | export default function MyApp({Component, pageProps}: AppProps) { 32 | const router = useRouter(); 33 | 34 | useEffect(() => { 35 | // Taken from StackOverflow. Trying to detect both Safari desktop and mobile. 36 | const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); 37 | if (isSafari) { 38 | // This is kind of a lie. 39 | // We still rely on the manual Next.js scrollRestoration logic. 40 | // However, we *also* don't want Safari grey screen during the back swipe gesture. 41 | // Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time. 42 | history.scrollRestoration = 'auto'; 43 | } else { 44 | // For other browsers, let Next.js set scrollRestoration to 'manual'. 45 | // It seems to work better for Chrome and Firefox which don't animate the back swipe. 46 | } 47 | }, []); 48 | 49 | useEffect(() => { 50 | const handleRouteChange = (url: string) => { 51 | const cleanedUrl = url.split(/[\?\#]/)[0]; 52 | // @ts-ignore 53 | gtag('event', 'pageview', { 54 | event_label: cleanedUrl, 55 | }); 56 | }; 57 | router.events.on('routeChangeComplete', handleRouteChange); 58 | return () => { 59 | router.events.off('routeChangeComplete', handleRouteChange); 60 | }; 61 | }, [router.events]); 62 | 63 | return ; 64 | } 65 | -------------------------------------------------------------------------------- /src/pages/errors/index.tsx: -------------------------------------------------------------------------------- 1 | import ErrorDecoderPage from './[errorCode]'; 2 | export default ErrorDecoderPage; 3 | export {getStaticProps} from './[errorCode]'; 4 | -------------------------------------------------------------------------------- /src/sidebarCommunity.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "社区", 3 | "path": "/community", 4 | "routes": [ 5 | { 6 | "hasSectionHeader": true, 7 | "sectionHeader": "参与贡献" 8 | }, 9 | { 10 | "title": "社区", 11 | "path": "/community", 12 | "skipBreadcrumb": true, 13 | "routes": [ 14 | { 15 | "title": "React Conf", 16 | "path": "/community/conferences" 17 | }, 18 | { 19 | "title": "React 见面会", 20 | "path": "/community/meetups" 21 | }, 22 | { 23 | "title": "React 视频", 24 | "path": "/community/videos" 25 | }, 26 | { 27 | "title": "React 团队", 28 | "path": "/community/team" 29 | }, 30 | { 31 | "title": "文档贡献者", 32 | "path": "/community/docs-contributors" 33 | }, 34 | { 35 | "title": "Translations", 36 | "path": "/community/translations" 37 | }, 38 | { 39 | "title": "Acknowledgements", 40 | "path": "/community/acknowledgements" 41 | }, 42 | { 43 | "title": "版本策略", 44 | "path": "/community/versioning-policy" 45 | } 46 | ] 47 | } 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /src/sidebarHome.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "React 文档", 3 | "path": "/", 4 | "routes": [ 5 | { 6 | "hasSectionHeader": true, 7 | "sectionHeader": "起步" 8 | }, 9 | { 10 | "title": "快速入门", 11 | "path": "/learn" 12 | }, 13 | { 14 | "title": "安装", 15 | "path": "/learn/installation" 16 | }, 17 | { 18 | "hasSectionHeader": true, 19 | "sectionHeader": "学习 React" 20 | }, 21 | { 22 | "title": "描述 UI", 23 | "path": "/learn/describing-the-ui" 24 | }, 25 | { 26 | "title": "添加交互", 27 | "path": "/learn/adding-interactivity" 28 | }, 29 | { 30 | "title": "状态管理", 31 | "path": "/learn/managing-state" 32 | }, 33 | { 34 | "title": "脱围机制", 35 | "path": "/learn/escape-hatches" 36 | }, 37 | { 38 | "hasSectionHeader": true, 39 | "sectionHeader": "React API" 40 | }, 41 | { 42 | "title": "Hook", 43 | "path": "/reference/react" 44 | }, 45 | { 46 | "title": "组件", 47 | "path": "/reference/react/components" 48 | }, 49 | { 50 | "title": "API", 51 | "path": "/reference/react/apis" 52 | }, 53 | { 54 | "title": "过时的 API", 55 | "path": "/reference/react/legacy" 56 | }, 57 | { 58 | "hasSectionHeader": true, 59 | "sectionHeader": "React DOM API" 60 | }, 61 | { 62 | "title": "组件", 63 | "path": "/reference/react-dom/components" 64 | }, 65 | { 66 | "title": "API", 67 | "path": "/reference/react-dom" 68 | }, 69 | { 70 | "title": "客户端 API", 71 | "path": "/reference/react-dom/client" 72 | }, 73 | { 74 | "title": "服务端 API", 75 | "path": "/reference/react-dom/server" 76 | }, 77 | { 78 | "hasSectionHeader": true, 79 | "sectionHeader": "参与贡献" 80 | }, 81 | { 82 | "title": "React 社区", 83 | "path": "/community" 84 | }, 85 | { 86 | "hasSectionHeader": true, 87 | "sectionHeader": "时刻了解最新动态" 88 | }, 89 | { 90 | "title": "React 博客", 91 | "path": "/blog" 92 | } 93 | ] 94 | } 95 | -------------------------------------------------------------------------------- /src/siteConfig.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | exports.siteConfig = { 5 | version: '19', 6 | // -------------------------------------- 7 | // Translations should replace these lines: 8 | languageCode: 'zh-hans', 9 | hasLegacySite: true, 10 | isRTL: false, 11 | // -------------------------------------- 12 | copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc. All Rights Reserved.`, 13 | repoUrl: 'https://github.com/facebook/react', 14 | twitterUrl: 'https://twitter.com/reactjs', 15 | algolia: { 16 | appId: '1FCF9AYYAT', 17 | apiKey: '1b7ad4e1c89e645e351e59d40544eda1', 18 | indexName: 'beta-react', 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/types/docsearch-react-modal.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | // This module must be declared and because the dynamic import in 6 | // "src/components/Search.tsx" is not able to resolve the types from 7 | // the package. 8 | declare module '@docsearch/react/modal' { 9 | // re-exports the types from @docsearch/react/dist/esm/index.d.ts 10 | export * from '@docsearch/react/dist/esm/index'; 11 | } 12 | -------------------------------------------------------------------------------- /src/utils/analytics.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | let buffer: Array = []; 6 | let galite: null | Function = null; 7 | let galitePromise: null | Promise = null; 8 | 9 | export function ga(...args: any[]): void { 10 | if (typeof galite === 'function') { 11 | galite.apply(null, args); 12 | return; 13 | } 14 | buffer.push(args); 15 | if (!galitePromise) { 16 | // @ts-ignore 17 | galitePromise = import('ga-lite').then((mod) => { 18 | galite = mod.default; 19 | galitePromise = null; 20 | buffer.forEach((args) => { 21 | mod.default.apply(null, args); 22 | }); 23 | buffer = []; 24 | }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/utils/finishedTranslations.ts: -------------------------------------------------------------------------------- 1 | // This is a list of languages with enough translated content. 2 | // Add more languages here when they have enough content. 3 | // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo. 4 | // It must be the same between all translations. 5 | // This will also affect the 'Translations' article. 6 | 7 | // prettier-ignore 8 | export const finishedTranslations = [ 9 | 'en', 10 | 'zh-hans', 11 | 'es', 12 | 'fr', 13 | 'ja', 14 | 'tr', 15 | 'ko' 16 | ]; 17 | -------------------------------------------------------------------------------- /src/utils/processShim.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | // Used in next.config.js to remove the process transitive dependency. 6 | module.exports = { 7 | env: {}, 8 | cwd() {}, 9 | }; 10 | -------------------------------------------------------------------------------- /src/utils/rafShim.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | // Used in next.config.js to remove the raf transitive dependency. 6 | export default window.requestAnimationFrame; 7 | -------------------------------------------------------------------------------- /src/utils/toCommaSeparatedList.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | */ 4 | 5 | import * as React from 'react'; 6 | 7 | const addString = (list: React.ReactNode[], string: string) => 8 | list.push({string}); 9 | 10 | function toCommaSeparatedList( 11 | array: Item[], 12 | renderCallback: (item: Item, index: number) => React.ReactNode 13 | ): React.ReactNode[] { 14 | if (array.length <= 1) { 15 | return array.map(renderCallback); 16 | } 17 | 18 | const list: React.ReactNode[] = []; 19 | 20 | array.forEach((item, index) => { 21 | if (index === array.length - 1) { 22 | addString(list, array.length === 2 ? ' and ' : ', and '); 23 | list.push(renderCallback(item, index)); 24 | } else if (index > 0) { 25 | addString(list, ', '); 26 | list.push(renderCallback(item, index)); 27 | } else { 28 | list.push(renderCallback(item, index)); 29 | } 30 | }); 31 | 32 | return list; 33 | } 34 | 35 | export default toCommaSeparatedList; 36 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": true, 12 | "noImplicitAny": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "strictNullChecks": true, 16 | "forceConsistentCasingInFileNames": true, 17 | "noEmit": true, 18 | "esModuleInterop": true, 19 | "module": "esnext", 20 | "moduleResolution": "node", 21 | "resolveJsonModule": true, 22 | "isolatedModules": true, 23 | "jsx": "preserve", 24 | "baseUrl": "src", 25 | "incremental": true, 26 | "plugins": [ 27 | { 28 | "name": "next" 29 | } 30 | ] 31 | }, 32 | "include": [ 33 | "next-env.d.ts", 34 | "src/**/*.ts", 35 | "src/**/*.tsx", 36 | ".next/types/**/*.ts" 37 | ], 38 | "exclude": [ 39 | "node_modules" 40 | ] 41 | } 42 | --------------------------------------------------------------------------------