;
7 | }
8 | ```
9 |
--------------------------------------------------------------------------------
/src/components/Layout/TopNav/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | export {default as TopNav} from './TopNav';
13 |
--------------------------------------------------------------------------------
/src/pages/errors/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import ErrorDecoderPage from './[errorCode]';
9 | export default ErrorDecoderPage;
10 | export {getStaticProps} from './[errorCode]';
11 |
--------------------------------------------------------------------------------
/src/components/Layout/SidebarNav/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | export {default as SidebarNav} from './SidebarNav';
13 |
--------------------------------------------------------------------------------
/scripts/generateRss.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 | const {generateRssFeed} = require('../src/utils/rss');
12 |
13 | generateRssFeed();
14 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/src/utils/rafShim.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | // Used in next.config.js to remove the raf transitive dependency.
13 | export default window.requestAnimationFrame;
14 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | contact_links:
2 | - name: 📃 Bugs in React
3 | url: https://github.com/facebook/react/issues/new/choose
4 | about: This issue tracker is not for bugs in React. Please file React issues here.
5 | - name: 🤔 Questions and Help
6 | url: https://reactjs.org/community/support.html
7 | about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.
8 |
--------------------------------------------------------------------------------
/eslint-local-rules/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | const lintMarkdownCodeBlocks = require('./rules/lint-markdown-code-blocks');
9 |
10 | module.exports = {
11 | rules: {
12 | 'lint-markdown-code-blocks': lintMarkdownCodeBlocks,
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/utils/processShim.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | // Used in next.config.js to remove the process transitive dependency.
13 | module.exports = {
14 | env: {},
15 | cwd() {},
16 | };
17 |
--------------------------------------------------------------------------------
/src/components/Layout/Sidebar/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | export {SidebarButton} from './SidebarButton';
13 | export {SidebarLink} from './SidebarLink';
14 | export {SidebarRouteTree} from './SidebarRouteTree';
15 |
--------------------------------------------------------------------------------
/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "React",
3 | "short_name": "React",
4 | "icons": [
5 | {
6 | "src": "/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/android-chrome-384x384.png",
12 | "sizes": "384x384",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#23272f",
17 | "background_color": "#23272f",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
/src/content/warnings/special-props.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Special Props Warning
3 | ---
4 |
5 | Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component.
6 |
7 | For instance, you can't read `props.key` from a component. If you need to access the same value within the child component, you should pass it as a different prop (ex: `` and read `props.id`). While this may seem redundant, it's important to separate app logic from hints to React.
8 |
--------------------------------------------------------------------------------
/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/components/MDX/LanguagesContext.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {createContext} from 'react';
13 |
14 | export type LanguageItem = {
15 | code: string;
16 | name: string;
17 | enName: string;
18 | };
19 | export type Languages = Array;
20 |
21 | export const LanguagesContext = createContext(null);
22 |
--------------------------------------------------------------------------------
/src/components/MDX/TocContext.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {createContext} from 'react';
13 | import type {ReactNode} from 'react';
14 |
15 | export type TocItem = {
16 | url: string;
17 | text: ReactNode;
18 | depth: number;
19 | };
20 | export type Toc = Array;
21 |
22 | export const TocContext = createContext([]);
23 |
--------------------------------------------------------------------------------
/src/components/MDX/Challenges/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import * as React from 'react';
13 | export {Challenges} from './Challenges';
14 |
15 | export function Hint({children}: {children: React.ReactNode}) {
16 | return
;
21 | }
22 |
--------------------------------------------------------------------------------
/src/content/errors/index.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ரியாக்டின் மினிஃபைடு புரொடக்ஷன் பில்டில், நெட்வொர்க் வழியாக அனுப்பப்படும் பைட்ஸின் அளவை குறைக்க, முழு எரர் மெசேஜ்களை அனுப்பாமல் இருக்கிறோம்.
4 |
5 |
6 |
7 |
8 | உங்கள் ஆப்பை டிபக் செய்யும்போது லோக்கலாக டெவலப்மென்ட் பில்டை பயன்படுத்தும்படி நாம் வலியுறுத்துகிறோம்; அது கூடுதல் டிபக் இன்போவை டிராக் செய்து, உங்கள் ஆப்ஸில் இருக்கக்கூடிய பிரச்சினைகள் குறித்து உதவிகரமான வார்னிங்ஸ்களை வழங்கும். ஆனால் புரொடக்ஷன் பில்டைப் பயன்படுத்தும் போது எக்செப்ஷன் ஏற்பட்டால், அந்த எரர் மெசேஜில் அந்த எரருக்கான டாக்ஸ்க்கு ஒரு லிங்க் மட்டும் இருக்கும்.
9 |
10 | ஒரு உதாரணத்திற்கு, இதைப் பாருங்கள்: [https://react.dev/errors/149](/errors/149).
11 |
--------------------------------------------------------------------------------
/src/types/docsearch-react-modal.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | // This module must be declared and because the dynamic import in
13 | // "src/components/Search.tsx" is not able to resolve the types from
14 | // the package.
15 | declare module '@docsearch/react/modal' {
16 | // re-exports the types from @docsearch/react/dist/esm/index.d.ts
17 | export * from '@docsearch/react/dist/esm/index';
18 | }
19 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | module.exports = {
13 | plugins: {
14 | tailwindcss: {},
15 | autoprefixer: {},
16 | 'postcss-flexbugs-fixes': {},
17 | 'postcss-preset-env': {
18 | autoprefixer: {
19 | flexbox: 'no-2009',
20 | },
21 | stage: 3,
22 | features: {
23 | 'custom-properties': false,
24 | },
25 | },
26 | },
27 | };
28 |
--------------------------------------------------------------------------------
/src/content/reference/rsc/directives.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Directives
3 | ---
4 |
5 |
6 |
7 | Directives are for use in [React Server Components](/reference/rsc/server-components).
8 |
9 |
10 |
11 |
12 |
13 | Directives provide instructions to [bundlers compatible with React Server Components](/learn/creating-a-react-app#full-stack-frameworks).
14 |
15 |
16 |
17 | ---
18 |
19 | ## Source code directives {/*source-code-directives*/}
20 |
21 | * [`'use client'`](/reference/rsc/use-client) lets you mark what code runs on the client.
22 | * [`'use server'`](/reference/rsc/use-server) marks server-side functions that can be called from client-side code.
23 |
--------------------------------------------------------------------------------
/src/components/MDX/Intro.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import * as React from 'react';
13 |
14 | export interface IntroProps {
15 | children?: React.ReactNode;
16 | }
17 |
18 | function Intro({children}: IntroProps) {
19 | return (
20 |
21 | {children}
22 |
23 | );
24 | }
25 |
26 | export default Intro;
27 |
--------------------------------------------------------------------------------
/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/components/MDX/Recap.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import * as React from 'react';
13 | import {H2} from './Heading';
14 |
15 | interface RecapProps {
16 | children: React.ReactNode;
17 | }
18 |
19 | function Recap({children}: RecapProps) {
20 | return (
21 |
22 |
23 | Recap
24 |
25 | {children}
26 |
27 | );
28 | }
29 |
30 | export default Recap;
31 |
--------------------------------------------------------------------------------
/src/components/ExternalLink.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 | import type {DetailedHTMLProps, AnchorHTMLAttributes} from 'react';
12 |
13 | export function ExternalLink({
14 | href,
15 | target,
16 | children,
17 | ...props
18 | }: DetailedHTMLProps<
19 | AnchorHTMLAttributes,
20 | HTMLAnchorElement
21 | >) {
22 | return (
23 |
24 | {children}
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/MDX/DiagramGroup.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {ReactNode} from 'react';
13 |
14 | interface DiagramGroupProps {
15 | children: ReactNode;
16 | }
17 |
18 | export function DiagramGroup({children}: DiagramGroupProps) {
19 | return (
20 |
43 |
44 | }>
45 |
46 |
47 | );
48 | });
49 |
--------------------------------------------------------------------------------
/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/components/Icon/IconWarning.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {memo} from 'react';
13 |
14 | export const IconWarning = memo(
15 | function IconWarning({className}) {
16 | return (
17 |
32 | );
33 | }
34 | );
35 |
--------------------------------------------------------------------------------
/src/hooks/usePendingRoute.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {useRouter} from 'next/router';
13 | import {useState, useRef, useEffect} from 'react';
14 |
15 | const usePendingRoute = () => {
16 | const {events} = useRouter();
17 | const [pendingRoute, setPendingRoute] = useState(null);
18 | const currentRoute = useRef(null);
19 | useEffect(() => {
20 | let routeTransitionTimer: any = null;
21 |
22 | const handleRouteChangeStart = (url: string) => {
23 | clearTimeout(routeTransitionTimer);
24 | routeTransitionTimer = setTimeout(() => {
25 | if (currentRoute.current !== url) {
26 | currentRoute.current = url;
27 | setPendingRoute(url);
28 | }
29 | }, 100);
30 | };
31 | const handleRouteChangeComplete = () => {
32 | setPendingRoute(null);
33 | clearTimeout(routeTransitionTimer);
34 | };
35 | events.on('routeChangeStart', handleRouteChangeStart);
36 | events.on('routeChangeComplete', handleRouteChangeComplete);
37 |
38 | return () => {
39 | events.off('routeChangeStart', handleRouteChangeStart);
40 | events.off('routeChangeComplete', handleRouteChangeComplete);
41 | clearTimeout(routeTransitionTimer);
42 | };
43 | }, [events]);
44 |
45 | return pendingRoute;
46 | };
47 |
48 | export default usePendingRoute;
49 |
--------------------------------------------------------------------------------
/src/components/MDX/Sandpack/template.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | export const template = {
9 | '/src/index.js': {
10 | hidden: true,
11 | code: `import { StrictMode } from "react";
12 | import { createRoot } from "react-dom/client";
13 | import "./styles.css";
14 |
15 | import App from "./App";
16 |
17 | const root = createRoot(document.getElementById("root"));
18 | root.render(
19 |
20 |
21 |
22 | );`,
23 | },
24 | '/package.json': {
25 | hidden: true,
26 | code: JSON.stringify(
27 | {
28 | name: 'react.dev',
29 | version: '0.0.0',
30 | main: '/src/index.js',
31 | scripts: {
32 | start: 'react-scripts start',
33 | build: 'react-scripts build',
34 | test: 'react-scripts test --env=jsdom',
35 | eject: 'react-scripts eject',
36 | },
37 | dependencies: {
38 | react: '^19.2.1',
39 | 'react-dom': '^19.2.1',
40 | 'react-scripts': '^5.0.0',
41 | },
42 | },
43 | null,
44 | 2
45 | ),
46 | },
47 | '/public/index.html': {
48 | hidden: true,
49 | code: `
50 |
51 |
52 |
53 |
54 | Document
55 |
56 |
57 |
58 |
59 | `,
60 | },
61 | };
62 |
--------------------------------------------------------------------------------
/src/components/MDX/CodeDiagram.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {Children} from 'react';
13 | import * as React from 'react';
14 | import CodeBlock from './CodeBlock';
15 |
16 | interface CodeDiagramProps {
17 | children: React.ReactNode;
18 | flip?: boolean;
19 | }
20 |
21 | export function CodeDiagram({children, flip = false}: CodeDiagramProps) {
22 | const illustration = Children.toArray(children).filter((child: any) => {
23 | return child.type === 'img';
24 | });
25 | const content = Children.toArray(children).map((child: any) => {
26 | if (child.type?.mdxName === 'pre') {
27 | return (
28 |
34 | );
35 | } else if (child.type === 'img') {
36 | return null;
37 | } else {
38 | return child;
39 | }
40 | });
41 | if (flip) {
42 | return (
43 |
44 | {illustration}
45 |
{content}
46 |
47 | );
48 | }
49 | return (
50 |
51 |
{content}
52 |
{illustration}
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/Button.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import * as React from 'react';
13 | import cn from 'classnames';
14 |
15 | interface ButtonProps {
16 | children: React.ReactNode;
17 | onClick?: (event: React.MouseEvent) => void;
18 | active?: boolean;
19 | className?: string;
20 | style?: Record;
21 | }
22 |
23 | export function Button({
24 | children,
25 | onClick,
26 | active = false,
27 | className,
28 | style,
29 | }: ButtonProps) {
30 | return (
31 |
50 | );
51 | }
52 |
53 | export default Button;
54 |
--------------------------------------------------------------------------------
/src/components/MDX/Sandpack/useSandpackLint.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | // @ts-nocheck
13 |
14 | import {useState, useEffect} from 'react';
15 | import type {EditorView} from '@codemirror/view';
16 |
17 | export type LintDiagnostic = {
18 | line: number;
19 | column: number;
20 | severity: 'warning' | 'error';
21 | message: string;
22 | }[];
23 |
24 | export const useSandpackLint = () => {
25 | const [lintErrors, setLintErrors] = useState([]);
26 | const [lintExtensions, setLintExtensions] = useState([]);
27 | useEffect(() => {
28 | const loadLinter = async () => {
29 | const {linter} = await import('@codemirror/lint');
30 | const onLint = linter(async (props: EditorView) => {
31 | // This is intentionally delayed until CodeMirror calls it
32 | // so that we don't take away bandwidth from things loading early.
33 | const {runESLint} = await import('./runESLint');
34 | const editorState = props.state.doc;
35 | let {errors, codeMirrorErrors} = runESLint(editorState);
36 | // Ignore parsing or internal linter errors.
37 | const isReactRuleError = (error: any) => error.ruleId != null;
38 | setLintErrors(errors.filter(isReactRuleError));
39 | return codeMirrorErrors.filter(isReactRuleError);
40 | });
41 | setLintExtensions([onLint]);
42 | };
43 |
44 | loadLinter();
45 | }, []);
46 | return {lintErrors, lintExtensions};
47 | };
48 |
--------------------------------------------------------------------------------
/src/components/Icon/IconNote.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {memo} from 'react';
13 |
14 | export const IconNote = memo(function IconNote({
15 | className,
16 | }) {
17 | return (
18 |
47 | );
48 | });
49 |
--------------------------------------------------------------------------------
/src/components/Icon/IconArrowSmall.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {memo} from 'react';
13 | import cn from 'classnames';
14 | import type {SVGProps} from 'react';
15 |
16 | export const IconArrowSmall = memo<
17 | SVGProps & {
18 | /**
19 | * The direction the arrow should point.
20 | * `start` and `end` are relative to the current locale.
21 | * for example, in LTR, `start` is left and `end` is right.
22 | */
23 | displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
24 | }
25 | >(function IconArrowSmall({displayDirection, className, ...rest}) {
26 | const classes = cn(className, {
27 | 'rotate-180': displayDirection === 'left',
28 | 'rotate-180 rtl:rotate-0': displayDirection === 'start',
29 | 'rtl:rotate-180': displayDirection === 'end',
30 | 'rotate-90': displayDirection === 'down',
31 | });
32 | return (
33 |
45 | );
46 | });
47 |
--------------------------------------------------------------------------------
/src/content/reference/eslint-plugin-react-hooks/lints/gating.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: gating
3 | ---
4 |
5 |
6 |
7 | Validates configuration of [gating mode](/reference/react-compiler/gating).
8 |
9 |
10 |
11 | ## Rule Details {/*rule-details*/}
12 |
13 | Gating mode lets you gradually adopt React Compiler by marking specific components for optimization. This rule ensures your gating configuration is valid so the compiler knows which components to process.
14 |
15 | ### Invalid {/*invalid*/}
16 |
17 | Examples of incorrect code for this rule:
18 |
19 | ```js
20 | // ❌ Missing required fields
21 | module.exports = {
22 | plugins: [
23 | ['babel-plugin-react-compiler', {
24 | gating: {
25 | importSpecifierName: '__experimental_useCompiler'
26 | // Missing 'source' field
27 | }
28 | }]
29 | ]
30 | };
31 |
32 | // ❌ Invalid gating type
33 | module.exports = {
34 | plugins: [
35 | ['babel-plugin-react-compiler', {
36 | gating: '__experimental_useCompiler' // Should be object
37 | }]
38 | ]
39 | };
40 | ```
41 |
42 | ### Valid {/*valid*/}
43 |
44 | Examples of correct code for this rule:
45 |
46 | ```js
47 | // ✅ Complete gating configuration
48 | module.exports = {
49 | plugins: [
50 | ['babel-plugin-react-compiler', {
51 | gating: {
52 | importSpecifierName: 'isCompilerEnabled', // exported function name
53 | source: 'featureFlags' // module name
54 | }
55 | }]
56 | ]
57 | };
58 |
59 | // featureFlags.js
60 | export function isCompilerEnabled() {
61 | // ...
62 | }
63 |
64 | // ✅ No gating (compile everything)
65 | module.exports = {
66 | plugins: [
67 | ['babel-plugin-react-compiler', {
68 | // No gating field - compiles all components
69 | }]
70 | ]
71 | };
72 | ```
73 |
--------------------------------------------------------------------------------
/src/components/SocialBanner.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | import {useRef, useEffect} from 'react';
9 | import cn from 'classnames';
10 | import {ExternalLink} from './ExternalLink';
11 |
12 | const bannerText = 'Join us for React Conf on Oct 7-8.';
13 | const bannerLink = 'https://conf.react.dev/';
14 | const bannerLinkText = 'Learn more.';
15 |
16 | export default function SocialBanner() {
17 | const ref = useRef(null);
18 | useEffect(() => {
19 | function patchedScrollTo(x: number, y: number) {
20 | if (y === 0) {
21 | // We're trying to reset scroll.
22 | // If we already scrolled past the banner, consider it as y = 0.
23 | const bannerHeight = ref.current?.offsetHeight ?? 0; // Could be zero (e.g. mobile)
24 | y = Math.min(window.scrollY, bannerHeight);
25 | }
26 | return realScrollTo(x, y);
27 | }
28 | const realScrollTo = window.scrollTo;
29 | (window as any).scrollTo = patchedScrollTo;
30 | return () => {
31 | (window as any).scrollTo = realScrollTo;
32 | };
33 | }, []);
34 | return (
35 |
40 |
{bannerText}
41 |
44 | {bannerLinkText}
45 |
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/content/learn/react-compiler/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: React Compiler
3 | ---
4 |
5 | ## Introduction {/*introduction*/}
6 |
7 | Learn [what React Compiler does](/learn/react-compiler/introduction) and how it automatically optimizes your React application by handling memoization for you, eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`.
8 |
9 | ## Installation {/*installation*/}
10 |
11 | Get started with [installing React Compiler](/learn/react-compiler/installation) and learn how to configure it with your build tools.
12 |
13 |
14 | ## Incremental Adoption {/*incremental-adoption*/}
15 |
16 | Learn [strategies for gradually adopting React Compiler](/learn/react-compiler/incremental-adoption) in your existing codebase if you're not ready to enable it everywhere yet.
17 |
18 | ## Debugging and Troubleshooting {/*debugging-and-troubleshooting*/}
19 |
20 | When things don't work as expected, use our [debugging guide](/learn/react-compiler/debugging) to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow.
21 |
22 | ## Configuration and Reference {/*configuration-and-reference*/}
23 |
24 | For detailed configuration options and API reference:
25 |
26 | - [Configuration Options](/reference/react-compiler/configuration) - All compiler configuration options including React version compatibility
27 | - [Directives](/reference/react-compiler/directives) - Function-level compilation control
28 | - [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Shipping pre-compiled libraries
29 |
30 | ## Additional resources {/*additional-resources*/}
31 |
32 | In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
33 |
34 |
--------------------------------------------------------------------------------
/src/content/reference/react/apis.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Built-in React APIs"
3 | ---
4 |
5 |
6 |
7 | In addition to [Hooks](/reference/react/hooks) and [Components](/reference/react/components), the `react` package exports a few other APIs that are useful for defining components. This page lists all the remaining modern React APIs.
8 |
9 |
10 |
11 | ---
12 |
13 | * [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
14 | * [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
15 | * [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
16 | * [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
17 | * [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions.
18 |
19 | ---
20 |
21 | ## Resource APIs {/*resource-apis*/}
22 |
23 | *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.
24 |
25 | To read a value from a resource, use this API:
26 |
27 | * [`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).
28 | ```js
29 | function MessageComponent({ messagePromise }) {
30 | const message = use(messagePromise);
31 | const theme = use(ThemeContext);
32 | // ...
33 | }
34 | ```
35 |
--------------------------------------------------------------------------------
/src/components/ButtonLink.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import cn from 'classnames';
13 | import NextLink from 'next/link';
14 |
15 | interface ButtonLinkProps {
16 | size?: 'md' | 'lg';
17 | type?: 'primary' | 'secondary';
18 | label?: string;
19 | target?: '_self' | '_blank';
20 | }
21 |
22 | function ButtonLink({
23 | href,
24 | className,
25 | children,
26 | type = 'primary',
27 | size = 'md',
28 | label,
29 | target = '_self',
30 | ...props
31 | }: React.AnchorHTMLAttributes & ButtonLinkProps) {
32 | const classes = cn(
33 | className,
34 | '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',
35 | {
36 | 'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80':
37 | type === 'primary',
38 | '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':
39 | type === 'secondary',
40 | 'text-lg py-3 rounded-full px-4 sm:px-6': size === 'lg',
41 | 'text-base rounded-full px-4 py-2': size === 'md',
42 | }
43 | );
44 | return (
45 |
51 | {children}
52 |
53 | );
54 | }
55 |
56 | export default ButtonLink;
57 |
--------------------------------------------------------------------------------
/src/components/MDX/Diagram.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import Image from 'next/image';
13 |
14 | interface DiagramProps {
15 | name: string;
16 | alt: string;
17 | height: number;
18 | width: number;
19 | children: string;
20 | captionPosition: 'top' | 'bottom' | null;
21 | }
22 |
23 | function Caption({text}: {text: string}) {
24 | return (
25 |
62 | )}
63 |
64 | );
65 | }
66 |
67 | export default Diagram;
68 |
--------------------------------------------------------------------------------
/src/content/community/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: React Community
3 | ---
4 |
5 |
6 |
7 | React has a community of millions of developers. On this page we've listed some React-related communities that you can be a part of; see the other pages in this section for additional online and in-person learning materials.
8 |
9 |
10 |
11 | ## Code of Conduct {/*code-of-conduct*/}
12 |
13 | Before participating in React's communities, [please read our Code of Conduct.](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within.
14 |
15 | ## Stack Overflow {/*stack-overflow*/}
16 |
17 | Stack Overflow is a popular forum to ask code-level questions or if you're stuck with a specific error. Read through the [existing questions](https://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](https://stackoverflow.com/questions/ask?tags=reactjs)!
18 |
19 | ## Popular Discussion Forums {/*popular-discussion-forums*/}
20 |
21 | There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React. If you have an answerable code-level question, Stack Overflow is usually a better fit.
22 |
23 | Each community consists of many thousands of React users.
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 {/*news*/}
31 |
32 | For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website.
33 |
--------------------------------------------------------------------------------
/scripts/headingIDHelpers/validateHeadingIDs.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | const fs = require('fs');
9 | const walk = require('./walk');
10 |
11 | /**
12 | * Validate if there is a custom heading id and exit if there isn't a heading
13 | * @param {string} line
14 | * @returns
15 | */
16 | function validateHeaderId(line) {
17 | if (!line.startsWith('#')) {
18 | return;
19 | }
20 |
21 | const match = /\{\/\*(.*?)\*\/}/.exec(line);
22 | const id = match;
23 | if (!id) {
24 | console.error('Run yarn fix-headings to generate headings.');
25 | process.exit(1);
26 | }
27 | }
28 |
29 | /**
30 | * Loops through the lines to skip code blocks
31 | * @param {Array} lines
32 | */
33 | function validateHeaderIds(lines) {
34 | let inCode = false;
35 | const results = [];
36 | lines.forEach((line) => {
37 | // Ignore code blocks
38 | if (line.startsWith('```')) {
39 | inCode = !inCode;
40 |
41 | results.push(line);
42 | return;
43 | }
44 | if (inCode) {
45 | results.push(line);
46 | return;
47 | }
48 | validateHeaderId(line);
49 | });
50 | }
51 | /**
52 | * paths are basically array of path for which we have to validate heading IDs
53 | * @param {Array} paths
54 | */
55 | async function main(paths) {
56 | paths = paths.length === 0 ? ['src/content'] : paths;
57 | const files = paths.map((path) => [...walk(path)]).flat();
58 |
59 | files.forEach((file) => {
60 | if (!(file.endsWith('.md') || file.endsWith('.mdx'))) {
61 | return;
62 | }
63 |
64 | const content = fs.readFileSync(file, 'utf8');
65 | const lines = content.split('\n');
66 | validateHeaderIds(lines);
67 | });
68 | }
69 |
70 | module.exports = main;
71 |
--------------------------------------------------------------------------------
/src/components/MDX/Link.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {Children, cloneElement} from 'react';
13 | import NextLink from 'next/link';
14 | import cn from 'classnames';
15 |
16 | import {ExternalLink} from 'components/ExternalLink';
17 |
18 | function Link({
19 | href,
20 | className,
21 | children,
22 | ...props
23 | }: React.AnchorHTMLAttributes) {
24 | const classes =
25 | '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';
26 | const modifiedChildren = Children.toArray(children).map((child: any) => {
27 | if (child.type?.mdxName && child.type?.mdxName === 'inlineCode') {
28 | return cloneElement(child, {
29 | isLink: true,
30 | });
31 | }
32 | return child;
33 | });
34 |
35 | if (!href) {
36 | // eslint-disable-next-line jsx-a11y/anchor-has-content
37 | return ;
38 | }
39 | return (
40 | <>
41 | {href.startsWith('https://') ? (
42 |
43 | {modifiedChildren}
44 |
45 | ) : href.startsWith('#') ? (
46 | // eslint-disable-next-line jsx-a11y/anchor-has-content
47 |
48 | {modifiedChildren}
49 |
50 | ) : (
51 |
52 | {modifiedChildren}
53 |
54 | )}
55 |
56 | );
57 | }
58 |
59 | export default Link;
60 |
--------------------------------------------------------------------------------
/src/content/reference/react-dom/static/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Static React DOM APIs
3 | ---
4 |
5 |
6 |
7 | The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
8 |
9 |
10 |
11 | ---
12 |
13 | ## Static APIs for Web Streams {/*static-apis-for-web-streams*/}
14 |
15 | These methods are only available in the environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), which includes browsers, Deno, and some modern edge runtimes:
16 |
17 | * [`prerender`](/reference/react-dom/static/prerender) renders a React tree to static HTML with a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
18 | * [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) continues a prerendered React tree to static HTML with a [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream).
19 |
20 | Node.js also includes these methods for compatibility, but they are not recommended due to worse performance. Use the [dedicated Node.js APIs](#static-apis-for-nodejs-streams) instead.
21 |
22 | ---
23 |
24 | ## Static APIs for Node.js Streams {/*static-apis-for-nodejs-streams*/}
25 |
26 | These methods are only available in the environments with [Node.js Streams](https://nodejs.org/api/stream.html):
27 |
28 | * [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) renders a React tree to static HTML with a [Node.js Stream.](https://nodejs.org/api/stream.html)
29 | * [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) continues a prerendered React tree to static HTML with a [Node.js Stream.](https://nodejs.org/api/stream.html)
30 |
31 |
--------------------------------------------------------------------------------
/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Introducing Zero-Bundle-Size React Server Components"
3 | author: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbage
4 | date: 2020/12/21
5 | description: 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components.
6 | ---
7 |
8 | December 21, 2020 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), and [Sebastian Markbåge](https://twitter.com/sebmarkbage)
9 |
10 | ---
11 |
12 |
13 |
14 | 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size **React Server Components**.
15 |
16 |
17 |
18 | ---
19 |
20 | To introduce React Server Components, we have prepared a talk and a demo. If you want, you can check them out during the holidays, or later when work picks back up in the new year.
21 |
22 |
23 |
24 | **React Server Components are still in research and development.** We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so **don't feel like you have to catch up right now!**
25 |
26 | If you want to check them out, we recommend going in the following order:
27 |
28 | 1. **Watch the talk** to learn about React Server Components and see the demo.
29 |
30 | 2. **[Clone the demo](http://github.com/reactjs/server-components-demo)** to play with React Server Components on your computer.
31 |
32 | 3. **[Read the RFC (with FAQ at the end)](https://github.com/reactjs/rfcs/pull/188)** for a deeper technical breakdown and to provide feedback.
33 |
34 | We are excited to hear from you on the RFC or in replies to the [@reactjs](https://twitter.com/reactjs) Twitter handle. Happy holidays, stay safe, and see you next year!
35 |
--------------------------------------------------------------------------------
/src/components/Breadcrumbs.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /*
9 | * Copyright (c) Facebook, Inc. and its affiliates.
10 | */
11 |
12 | import {Fragment} from 'react';
13 | import Link from 'next/link';
14 | import type {RouteItem} from 'components/Layout/getRouteMeta';
15 |
16 | function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
17 | return (
18 |