This commit is contained in:
Dan Abramov
2023-02-05 21:20:14 +00:00
parent 1deada190a
commit ec605ec033
7 changed files with 426 additions and 431 deletions

View File

@@ -11,7 +11,8 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
<div className="flex flex-wrap">
{breadcrumbs.map(
(crumb, i) =>
crumb.path && (
crumb.path &&
!crumb.skipBreadcrumb && (
<div className="flex mb-3 mt-0.5 items-center" key={i}>
<Fragment key={crumb.path}>
<Link href={crumb.path}>

View File

@@ -35,6 +35,8 @@ export interface RouteItem {
hasSectionHeader?: boolean;
/** Title of section header */
sectionHeader?: string;
/** Whether it should be omitted in breadcrumbs */
skipBreadcrumb?: boolean;
}
export interface Routes {

View File

@@ -1,5 +1,5 @@
---
title: The React Blog
title: Blog
---
<Intro>

View File

@@ -1,4 +1,6 @@
{
"title": "React Blog",
"path": "/blog",
"routes": [
{
"hasSectionHeader": true,
@@ -7,6 +9,7 @@
{
"title": "Blog",
"path": "/blog",
"skipBreadcrumb": true,
"routes": [
{
"title": "React Labs: June 2022",
@@ -39,4 +42,4 @@
]
}
]
}
}

View File

@@ -1,4 +1,6 @@
{
"title": "React Community",
"path": "/community",
"routes": [
{
"hasSectionHeader": true,
@@ -7,6 +9,7 @@
{
"title": "Community",
"path": "/community",
"skipBreadcrumb": true,
"routes": [
{
"title": "React Conferences",

View File

@@ -1,203 +1,196 @@
{
"title": "Learn React",
"heading": true,
"path": "/learn",
"routes": [
{
"heading": true,
"path": "",
"hasSectionHeader": true,
"sectionHeader": "Get Started"
},
{
"title": "Installation",
"path": "/learn/installation",
"routes": [
{
"hasSectionHeader": true,
"sectionHeader": "Get Started"
"title": "Start a New React Project",
"path": "/learn/start-a-new-react-project"
},
{
"title": "Installation",
"path": "/learn/installation",
"routes": [
{
"title": "Start a New React Project",
"path": "/learn/start-a-new-react-project"
},
{
"title": "Add React to a Website",
"path": "/learn/add-react-to-a-website"
},
{
"title": "Editor Setup",
"path": "/learn/editor-setup"
},
{
"title": "React Developer Tools",
"path": "/learn/react-developer-tools"
}
]
"title": "Add React to a Website",
"path": "/learn/add-react-to-a-website"
},
{
"title": "Quick Start",
"path": "/learn",
"routes": [
{
"title": "Tutorial: Tic-Tac-Toe",
"path": "/learn/tutorial-tic-tac-toe"
},
{
"title": "Thinking in React",
"path": "/learn/thinking-in-react"
}
]
"title": "Editor Setup",
"path": "/learn/editor-setup"
},
{
"hasSectionHeader": true,
"sectionHeader": "Learn React"
"title": "React Developer Tools",
"path": "/learn/react-developer-tools"
}
]
},
{
"title": "Quick Start",
"path": "/learn",
"routes": [
{
"title": "Tutorial: Tic-Tac-Toe",
"path": "/learn/tutorial-tic-tac-toe"
},
{
"title": "Describing the UI",
"tags": [],
"path": "/learn/describing-the-ui",
"routes": [
{
"title": "Your First Component",
"path": "/learn/your-first-component"
},
{
"title": "Importing and Exporting Components",
"path": "/learn/importing-and-exporting-components"
},
{
"title": "Writing Markup with JSX",
"path": "/learn/writing-markup-with-jsx"
},
{
"title": "JavaScript in JSX with Curly Braces",
"path": "/learn/javascript-in-jsx-with-curly-braces"
},
{
"title": "Passing Props to a Component",
"path": "/learn/passing-props-to-a-component"
},
{
"title": "Conditional Rendering",
"path": "/learn/conditional-rendering"
},
{
"title": "Rendering Lists",
"path": "/learn/rendering-lists"
},
{
"title": "Keeping Components Pure",
"path": "/learn/keeping-components-pure"
}
]
"title": "Thinking in React",
"path": "/learn/thinking-in-react"
}
]
},
{
"hasSectionHeader": true,
"sectionHeader": "Learn React"
},
{
"title": "Describing the UI",
"tags": [],
"path": "/learn/describing-the-ui",
"routes": [
{
"title": "Your First Component",
"path": "/learn/your-first-component"
},
{
"title": "Adding Interactivity",
"path": "/learn/adding-interactivity",
"tags": [],
"routes": [
{
"title": "Responding to Events",
"path": "/learn/responding-to-events"
},
{
"title": "State: A Component's Memory",
"path": "/learn/state-a-components-memory"
},
{
"title": "Render and Commit",
"path": "/learn/render-and-commit"
},
{
"title": "State as a Snapshot",
"path": "/learn/state-as-a-snapshot"
},
{
"title": "Queueing a Series of State Updates",
"path": "/learn/queueing-a-series-of-state-updates"
},
{
"title": "Updating Objects in State",
"path": "/learn/updating-objects-in-state"
},
{
"title": "Updating Arrays in State",
"path": "/learn/updating-arrays-in-state"
}
]
"title": "Importing and Exporting Components",
"path": "/learn/importing-and-exporting-components"
},
{
"title": "Managing State",
"path": "/learn/managing-state",
"tags": ["intermediate"],
"routes": [
{
"title": "Reacting to Input with State",
"path": "/learn/reacting-to-input-with-state"
},
{
"title": "Choosing the State Structure",
"path": "/learn/choosing-the-state-structure"
},
{
"title": "Sharing State Between Components",
"path": "/learn/sharing-state-between-components"
},
{
"title": "Preserving and Resetting State",
"path": "/learn/preserving-and-resetting-state"
},
{
"title": "Extracting State Logic into a Reducer",
"path": "/learn/extracting-state-logic-into-a-reducer"
},
{
"title": "Passing Data Deeply with Context",
"path": "/learn/passing-data-deeply-with-context"
},
{
"title": "Scaling Up with Reducer and Context",
"path": "/learn/scaling-up-with-reducer-and-context"
}
]
"title": "Writing Markup with JSX",
"path": "/learn/writing-markup-with-jsx"
},
{
"title": "Escape Hatches",
"path": "/learn/escape-hatches",
"tags": ["advanced"],
"routes": [
{
"title": "Referencing Values with Refs",
"path": "/learn/referencing-values-with-refs"
},
{
"title": "Manipulating the DOM with Refs",
"path": "/learn/manipulating-the-dom-with-refs"
},
{
"title": "Synchronizing with Effects",
"path": "/learn/synchronizing-with-effects"
},
{
"title": "You Might Not Need an Effect",
"path": "/learn/you-might-not-need-an-effect"
},
{
"title": "Lifecycle of Reactive Effects",
"path": "/learn/lifecycle-of-reactive-effects"
},
{
"title": "Separating Events from Effects",
"path": "/learn/separating-events-from-effects"
},
{
"title": "Removing Effect Dependencies",
"path": "/learn/removing-effect-dependencies"
},
{
"title": "Reusing Logic with Custom Hooks",
"path": "/learn/reusing-logic-with-custom-hooks"
}
]
"title": "JavaScript in JSX with Curly Braces",
"path": "/learn/javascript-in-jsx-with-curly-braces"
},
{
"title": "Passing Props to a Component",
"path": "/learn/passing-props-to-a-component"
},
{
"title": "Conditional Rendering",
"path": "/learn/conditional-rendering"
},
{
"title": "Rendering Lists",
"path": "/learn/rendering-lists"
},
{
"title": "Keeping Components Pure",
"path": "/learn/keeping-components-pure"
}
]
},
{
"title": "Adding Interactivity",
"path": "/learn/adding-interactivity",
"tags": [],
"routes": [
{
"title": "Responding to Events",
"path": "/learn/responding-to-events"
},
{
"title": "State: A Component's Memory",
"path": "/learn/state-a-components-memory"
},
{
"title": "Render and Commit",
"path": "/learn/render-and-commit"
},
{
"title": "State as a Snapshot",
"path": "/learn/state-as-a-snapshot"
},
{
"title": "Queueing a Series of State Updates",
"path": "/learn/queueing-a-series-of-state-updates"
},
{
"title": "Updating Objects in State",
"path": "/learn/updating-objects-in-state"
},
{
"title": "Updating Arrays in State",
"path": "/learn/updating-arrays-in-state"
}
]
},
{
"title": "Managing State",
"path": "/learn/managing-state",
"tags": ["intermediate"],
"routes": [
{
"title": "Reacting to Input with State",
"path": "/learn/reacting-to-input-with-state"
},
{
"title": "Choosing the State Structure",
"path": "/learn/choosing-the-state-structure"
},
{
"title": "Sharing State Between Components",
"path": "/learn/sharing-state-between-components"
},
{
"title": "Preserving and Resetting State",
"path": "/learn/preserving-and-resetting-state"
},
{
"title": "Extracting State Logic into a Reducer",
"path": "/learn/extracting-state-logic-into-a-reducer"
},
{
"title": "Passing Data Deeply with Context",
"path": "/learn/passing-data-deeply-with-context"
},
{
"title": "Scaling Up with Reducer and Context",
"path": "/learn/scaling-up-with-reducer-and-context"
}
]
},
{
"title": "Escape Hatches",
"path": "/learn/escape-hatches",
"tags": ["advanced"],
"routes": [
{
"title": "Referencing Values with Refs",
"path": "/learn/referencing-values-with-refs"
},
{
"title": "Manipulating the DOM with Refs",
"path": "/learn/manipulating-the-dom-with-refs"
},
{
"title": "Synchronizing with Effects",
"path": "/learn/synchronizing-with-effects"
},
{
"title": "You Might Not Need an Effect",
"path": "/learn/you-might-not-need-an-effect"
},
{
"title": "Lifecycle of Reactive Effects",
"path": "/learn/lifecycle-of-reactive-effects"
},
{
"title": "Separating Events from Effects",
"path": "/learn/separating-events-from-effects"
},
{
"title": "Removing Effect Dependencies",
"path": "/learn/removing-effect-dependencies"
},
{
"title": "Reusing Logic with Custom Hooks",
"path": "/learn/reusing-logic-with-custom-hooks"
}
]
}

View File

@@ -1,279 +1,272 @@
{
"title": "API Reference",
"heading": true,
"path": "/reference/react",
"routes": [
{
"heading": true,
"path": "",
"hasSectionHeader": true,
"sectionHeader": "react@18.2.0"
},
{
"title": "Components",
"path": "/reference/react/components",
"routes": [
{
"hasSectionHeader": true,
"sectionHeader": "react@18.2.0"
"title": "<Fragment> (<>)",
"path": "/reference/react/Fragment"
},
{
"title": "Components",
"path": "/reference/react/components",
"routes": [
{
"title": "<Fragment> (<>)",
"path": "/reference/react/Fragment"
},
{
"title": "<Profiler>",
"path": "/reference/react/Profiler"
},
{
"title": "<StrictMode>",
"path": "/reference/react/StrictMode"
},
{
"title": "<Suspense>",
"path": "/reference/react/Suspense"
}
]
"title": "<Profiler>",
"path": "/reference/react/Profiler"
},
{
"title": "Hooks",
"path": "/reference/react",
"routes": [
{
"title": "useCallback",
"path": "/reference/react/useCallback"
},
{
"title": "useContext",
"path": "/reference/react/useContext"
},
{
"title": "useDebugValue",
"path": "/reference/react/useDebugValue"
},
{
"title": "useDeferredValue",
"path": "/reference/react/useDeferredValue"
},
{
"title": "useEffect",
"path": "/reference/react/useEffect"
},
{
"title": "useId",
"path": "/reference/react/useId"
},
{
"title": "useImperativeHandle",
"path": "/reference/react/useImperativeHandle"
},
{
"title": "useInsertionEffect",
"path": "/reference/react/useInsertionEffect"
},
{
"title": "useLayoutEffect",
"path": "/reference/react/useLayoutEffect"
},
{
"title": "useMemo",
"path": "/reference/react/useMemo"
},
{
"title": "useReducer",
"path": "/reference/react/useReducer"
},
{
"title": "useRef",
"path": "/reference/react/useRef"
},
{
"title": "useState",
"path": "/reference/react/useState"
},
{
"title": "useSyncExternalStore",
"path": "/reference/react/useSyncExternalStore"
},
{
"title": "useTransition",
"path": "/reference/react/useTransition"
}
]
"title": "<StrictMode>",
"path": "/reference/react/StrictMode"
},
{
"title": "APIs",
"path": "/reference/react/apis",
"routes": [
{
"title": "createContext",
"path": "/reference/react/createContext"
},
{
"title": "forwardRef",
"path": "/reference/react/forwardRef"
},
{
"title": "lazy",
"path": "/reference/react/lazy"
},
{
"title": "memo",
"path": "/reference/react/memo"
},
{
"title": "startTransition",
"path": "/reference/react/startTransition"
}
]
"title": "<Suspense>",
"path": "/reference/react/Suspense"
}
]
},
{
"title": "Hooks",
"path": "/reference/react",
"routes": [
{
"title": "useCallback",
"path": "/reference/react/useCallback"
},
{
"hasSectionHeader": true,
"sectionHeader": "react-dom@18.2.0"
"title": "useContext",
"path": "/reference/react/useContext"
},
{
"title": "Components",
"path": "/reference/react-dom/components",
"routes": [
{
"title": "Common (e.g. <div>)",
"path": "/reference/react-dom/components/common"
},
{
"title": "<input>",
"path": "/reference/react-dom/components/input"
},
{
"title": "<option>",
"path": "/reference/react-dom/components/option"
},
{
"title": "<progress>",
"path": "/reference/react-dom/components/progress"
},
{
"title": "<select>",
"path": "/reference/react-dom/components/select"
},
{
"title": "<textarea>",
"path": "/reference/react-dom/components/textarea"
}
]
"title": "useDebugValue",
"path": "/reference/react/useDebugValue"
},
{
"title": "APIs",
"path": "/reference/react-dom",
"routes": [
{
"title": "createPortal",
"path": "/reference/react-dom/createPortal"
},
{
"title": "flushSync",
"path": "/reference/react-dom/flushSync"
},
{
"title": "findDOMNode",
"path": "/reference/react-dom/findDOMNode"
},
{
"title": "hydrate",
"path": "/reference/react-dom/hydrate"
},
{
"title": "render",
"path": "/reference/react-dom/render"
},
{
"title": "unmountComponentAtNode",
"path": "/reference/react-dom/unmountComponentAtNode"
}
]
"title": "useDeferredValue",
"path": "/reference/react/useDeferredValue"
},
{
"title": "Client APIs",
"path": "/reference/react-dom/client",
"routes": [
{
"title": "createRoot",
"path": "/reference/react-dom/client/createRoot"
},
{
"title": "hydrateRoot",
"path": "/reference/react-dom/client/hydrateRoot"
}
]
"title": "useEffect",
"path": "/reference/react/useEffect"
},
{
"title": "Server APIs",
"path": "/reference/react-dom/server",
"routes": [
{
"title": "renderToNodeStream",
"path": "/reference/react-dom/server/renderToNodeStream"
},
{
"title": "renderToPipeableStream",
"path": "/reference/react-dom/server/renderToPipeableStream"
},
{
"title": "renderToReadableStream",
"path": "/reference/react-dom/server/renderToReadableStream"
},
{
"title": "renderToStaticMarkup",
"path": "/reference/react-dom/server/renderToStaticMarkup"
},
{
"title": "renderToStaticNodeStream",
"path": "/reference/react-dom/server/renderToStaticNodeStream"
},
{
"title": "renderToString",
"path": "/reference/react-dom/server/renderToString"
}
]
"title": "useId",
"path": "/reference/react/useId"
},
{
"hasSectionHeader": true,
"sectionHeader": "Legacy APIs"
"title": "useImperativeHandle",
"path": "/reference/react/useImperativeHandle"
},
{
"title": "Legacy React APIs",
"path": "/reference/react/legacy",
"routes": [
{
"title": "Children",
"path": "/reference/react/Children"
},
{
"title": "cloneElement",
"path": "/reference/react/cloneElement"
},
{
"title": "Component",
"path": "/reference/react/Component"
},
{
"title": "createElement",
"path": "/reference/react/createElement"
},
{
"title": "createFactory",
"path": "/reference/react/createFactory"
},
{
"title": "createRef",
"path": "/reference/react/createRef"
},
{
"title": "isValidElement",
"path": "/reference/react/isValidElement"
},
{
"title": "PureComponent",
"path": "/reference/react/PureComponent"
}
]
"title": "useInsertionEffect",
"path": "/reference/react/useInsertionEffect"
},
{
"title": "useLayoutEffect",
"path": "/reference/react/useLayoutEffect"
},
{
"title": "useMemo",
"path": "/reference/react/useMemo"
},
{
"title": "useReducer",
"path": "/reference/react/useReducer"
},
{
"title": "useRef",
"path": "/reference/react/useRef"
},
{
"title": "useState",
"path": "/reference/react/useState"
},
{
"title": "useSyncExternalStore",
"path": "/reference/react/useSyncExternalStore"
},
{
"title": "useTransition",
"path": "/reference/react/useTransition"
}
]
},
{
"title": "APIs",
"path": "/reference/react/apis",
"routes": [
{
"title": "createContext",
"path": "/reference/react/createContext"
},
{
"title": "forwardRef",
"path": "/reference/react/forwardRef"
},
{
"title": "lazy",
"path": "/reference/react/lazy"
},
{
"title": "memo",
"path": "/reference/react/memo"
},
{
"title": "startTransition",
"path": "/reference/react/startTransition"
}
]
},
{
"hasSectionHeader": true,
"sectionHeader": "react-dom@18.2.0"
},
{
"title": "Components",
"path": "/reference/react-dom/components",
"routes": [
{
"title": "Common (e.g. <div>)",
"path": "/reference/react-dom/components/common"
},
{
"title": "<input>",
"path": "/reference/react-dom/components/input"
},
{
"title": "<option>",
"path": "/reference/react-dom/components/option"
},
{
"title": "<progress>",
"path": "/reference/react-dom/components/progress"
},
{
"title": "<select>",
"path": "/reference/react-dom/components/select"
},
{
"title": "<textarea>",
"path": "/reference/react-dom/components/textarea"
}
]
},
{
"title": "APIs",
"path": "/reference/react-dom",
"routes": [
{
"title": "createPortal",
"path": "/reference/react-dom/createPortal"
},
{
"title": "flushSync",
"path": "/reference/react-dom/flushSync"
},
{
"title": "findDOMNode",
"path": "/reference/react-dom/findDOMNode"
},
{
"title": "hydrate",
"path": "/reference/react-dom/hydrate"
},
{
"title": "render",
"path": "/reference/react-dom/render"
},
{
"title": "unmountComponentAtNode",
"path": "/reference/react-dom/unmountComponentAtNode"
}
]
},
{
"title": "Client APIs",
"path": "/reference/react-dom/client",
"routes": [
{
"title": "createRoot",
"path": "/reference/react-dom/client/createRoot"
},
{
"title": "hydrateRoot",
"path": "/reference/react-dom/client/hydrateRoot"
}
]
},
{
"title": "Server APIs",
"path": "/reference/react-dom/server",
"routes": [
{
"title": "renderToNodeStream",
"path": "/reference/react-dom/server/renderToNodeStream"
},
{
"title": "renderToPipeableStream",
"path": "/reference/react-dom/server/renderToPipeableStream"
},
{
"title": "renderToReadableStream",
"path": "/reference/react-dom/server/renderToReadableStream"
},
{
"title": "renderToStaticMarkup",
"path": "/reference/react-dom/server/renderToStaticMarkup"
},
{
"title": "renderToStaticNodeStream",
"path": "/reference/react-dom/server/renderToStaticNodeStream"
},
{
"title": "renderToString",
"path": "/reference/react-dom/server/renderToString"
}
]
},
{
"hasSectionHeader": true,
"sectionHeader": "Legacy APIs"
},
{
"title": "Legacy React APIs",
"path": "/reference/react/legacy",
"routes": [
{
"title": "Children",
"path": "/reference/react/Children"
},
{
"title": "cloneElement",
"path": "/reference/react/cloneElement"
},
{
"title": "Component",
"path": "/reference/react/Component"
},
{
"title": "createElement",
"path": "/reference/react/createElement"
},
{
"title": "createFactory",
"path": "/reference/react/createFactory"
},
{
"title": "createRef",
"path": "/reference/react/createRef"
},
{
"title": "isValidElement",
"path": "/reference/react/isValidElement"
},
{
"title": "PureComponent",
"path": "/reference/react/PureComponent"
}
]
}