diff --git a/beta/CONTRIBUTING.md b/beta/CONTRIBUTING.md
index f893cab1..dd81c854 100644
--- a/beta/CONTRIBUTING.md
+++ b/beta/CONTRIBUTING.md
@@ -20,7 +20,7 @@ The documentation is divided into sections to cater to different learning styles
 
 **[Learn React](https://beta.reactjs.org/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them.
 
-**[API Reference](https://reactjs.org/apis)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
+**[API Reference](https://reactjs.org/apis/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
 
 **Try to follow your own instructions.**
 
diff --git a/beta/src/components/Layout/Footer.tsx b/beta/src/components/Layout/Footer.tsx
index 5133dc79..20b555bf 100644
--- a/beta/src/components/Layout/Footer.tsx
+++ b/beta/src/components/Layout/Footer.tsx
@@ -89,11 +89,11 @@ export function Footer() {
               </FooterLink>
             </div>
             <div className="flex flex-col">
-              <FooterLink href="/apis" isHeader={true}>
+              <FooterLink href="/apis/react" isHeader={true}>
                 API Reference
               </FooterLink>
-              <FooterLink href="/apis">React APIs</FooterLink>
-              <FooterLink href="/apis/reactdom">React DOM APIs</FooterLink>
+              <FooterLink href="/apis/react">React APIs</FooterLink>
+              <FooterLink href="/apis/react-dom">React DOM APIs</FooterLink>
             </div>
             <div className="flex flex-col sm:col-start-2 xl:col-start-4">
               <FooterLink href="/" isHeader={true}>
diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx
index a5099cc1..bc370485 100644
--- a/beta/src/components/Layout/Nav/Nav.tsx
+++ b/beta/src/components/Layout/Nav/Nav.tsx
@@ -182,7 +182,7 @@ export default function Nav() {
         <NavLink href="/learn" isActive={section === 'learn'}>
           Learn
         </NavLink>
-        <NavLink href="/apis" isActive={section === 'apis'}>
+        <NavLink href="/apis/react" isActive={section === 'apis'}>
           API
         </NavLink>
       </div>
diff --git a/beta/src/components/Layout/Sidebar/SidebarLink.tsx b/beta/src/components/Layout/Sidebar/SidebarLink.tsx
index 987a9428..b3744591 100644
--- a/beta/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/beta/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -16,6 +16,7 @@ interface SidebarLinkProps {
   selected?: boolean;
   title: string;
   level: number;
+  wip: boolean | undefined;
   icon?: React.ReactNode;
   heading?: boolean;
   isExpanded?: boolean;
@@ -28,6 +29,7 @@ export function SidebarLink({
   href,
   selected = false,
   title,
+  wip,
   level,
   heading = false,
   isExpanded,
@@ -74,7 +76,12 @@ export function SidebarLink({
           }
         )}>
         {/* This here needs to be refactored ofc */}
-        {title}
+        <span
+          className={cn({
+            'text-gray-400 dark:text-gray-500': wip,
+          })}>
+          {title}
+        </span>
         {isExpanded != null && !heading && !hideArrow && (
           <span
             className={cn('pr-1', {
diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 3c8fc66a..1e327645 100644
--- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -100,7 +100,7 @@ export function SidebarRouteTree({
   const expanded = expandedPath;
   return (
     <ul>
-      {currentRoutes.map(({path, title, routes, heading}) => {
+      {currentRoutes.map(({path, title, routes, wip, heading}) => {
         const pagePath = path && removeFromLast(path, '.');
         const selected = slug === pagePath;
 
@@ -127,6 +127,7 @@ export function SidebarRouteTree({
                 selected={selected}
                 level={level}
                 title={title}
+                wip={wip}
                 isExpanded={isExpanded}
                 isBreadcrumb={expandedPath === path}
                 hideArrow={isMobile}
@@ -151,6 +152,7 @@ export function SidebarRouteTree({
               selected={selected}
               level={level}
               title={title}
+              wip={wip}
             />
           </li>
         );
diff --git a/beta/src/components/Layout/useRouteMeta.tsx b/beta/src/components/Layout/useRouteMeta.tsx
index 5f962f7e..37b6a477 100644
--- a/beta/src/components/Layout/useRouteMeta.tsx
+++ b/beta/src/components/Layout/useRouteMeta.tsx
@@ -30,6 +30,8 @@ export interface RouteItem {
   path?: string;
   /** Whether the entry is a heading */
   heading?: boolean;
+  /** Whether the page is under construction */
+  wip?: boolean;
   /** List of sub-routes */
   routes?: RouteItem[];
 }
diff --git a/beta/src/components/MDX/ExpandableCallout.tsx b/beta/src/components/MDX/ExpandableCallout.tsx
index c4fc53c6..835cf9a2 100644
--- a/beta/src/components/MDX/ExpandableCallout.tsx
+++ b/beta/src/components/MDX/ExpandableCallout.tsx
@@ -7,7 +7,7 @@ import cn from 'classnames';
 import {IconNote} from '../Icon/IconNote';
 import {IconGotcha} from '../Icon/IconGotcha';
 
-type CalloutVariants = 'gotcha' | 'note';
+type CalloutVariants = 'gotcha' | 'note' | 'wip';
 
 interface ExpandableCalloutProps {
   children: React.ReactNode;
@@ -32,6 +32,14 @@ const variantMap = {
     overlayGradient:
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
+  wip: {
+    title: 'Under Construction',
+    Icon: IconNote,
+    containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
+    textColor: 'text-yellow-50 dark:text-yellow-40',
+    overlayGradient:
+      'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+  },
 };
 
 function ExpandableCallout({children, type}: ExpandableCalloutProps) {
diff --git a/beta/src/components/MDX/HomepageHero.tsx b/beta/src/components/MDX/HomepageHero.tsx
index 17953852..9b86da8e 100644
--- a/beta/src/components/MDX/HomepageHero.tsx
+++ b/beta/src/components/MDX/HomepageHero.tsx
@@ -30,7 +30,7 @@ function HomepageHero() {
           </YouWillLearnCard>
         </div>
         <div className="flex flex-col justify-center">
-          <YouWillLearnCard title="API Reference" path="/apis">
+          <YouWillLearnCard title="API Reference" path="/apis/react">
             <p>
               Look up the API signatures of React Hooks, and see their shape
               using the visual code diagrams.
diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx
index 7b4f9d49..59df9415 100644
--- a/beta/src/components/MDX/MDXComponents.tsx
+++ b/beta/src/components/MDX/MDXComponents.tsx
@@ -67,7 +67,9 @@ const UL = (p: JSX.IntrinsicElements['ul']) => (
 const Divider = () => (
   <hr className="my-6 block border-b border-border dark:border-border-dark" />
 );
-
+const Wip = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="wip">{children}</ExpandableCallout>
+);
 const Gotcha = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="gotcha">{children}</ExpandableCallout>
 );
@@ -296,6 +298,7 @@ export const MDXComponents = {
   Diagram,
   DiagramGroup,
   Gotcha,
+  Wip,
   HomepageHero,
   Illustration,
   IllustrationBlock,
diff --git a/beta/src/pages/apis/index.md b/beta/src/pages/apis/index.md
deleted file mode 100644
index 254ee491..00000000
--- a/beta/src/pages/apis/index.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: React APIs
----
-
-<Intro>
-
-The React package contains all the APIs necessary to define and use [components](/learn/your-first-component).
-
-</Intro>
-
-## Installation {/*installation*/}
-
-It is available as [`react`](https://www.npmjs.com/package/react) on npm. You can also [add React to the page as a `<script>` tag](/learn/add-react-to-a-website).
-
-<PackageImport>
-
-<TerminalBlock>
-
-npm install react
-
-</TerminalBlock>
-
-```js
-// Importing a specific API:
-import { useState } from 'react';
-
-// Importing all APIs together:
-import * as React from 'react';
-```
-
-</PackageImport>
-
-If you use React on the web, you'll also need the same version of [ReactDOM](/apis/reactdom).
-
-## Exports {/*exports*/}
-
-### State {/*state*/}
-
-<YouWillLearnCard title="useState" path="/apis/usestate">
-
-Declares a state variable.
-
-```js
-function MyComponent() {
-  const [age, setAge] = useState(42);
-  // ...
-```
-
-</YouWillLearnCard>
-
-<YouWillLearnCard title="useReducer" path="/apis/usereducer">
-
-Declares a state variable managed with a reducer.
-
-```js
-function MyComponent() {
-  const [state, dispatch] = useReducer(reducer, { age: 42 });
-  // ...
-```
-
-</YouWillLearnCard>
-
-### Context {/*context*/}
-
-<YouWillLearnCard title="useContext" path="/apis/usecontext">
-
-Reads and subscribes to a context.
-
-```js
-function MyComponent() {
-  const theme = useContext(ThemeContext);
-  // ...
-```
-
-</YouWillLearnCard>
-
-<YouWillLearnCard title="createContext" path="/apis/createContext">
-
-Creates a context that components can provide or read.
-
-```js
-const ThemeContext = createContext('light');
-```
-
-</YouWillLearnCard>
-
-### Refs {/*refs*/}
-
-<YouWillLearnCard title="useRef" path="/apis/useref">
-
-Declares a ref.
-
-```js
-function MyComponent() {
-  const inputRef = useRef(null);
-  // ...
-```
-
-</YouWillLearnCard>
-
-
-This section is incomplete and is still being written!
diff --git a/beta/src/pages/apis/createRoot.md b/beta/src/pages/apis/react-dom/client/createRoot.md
similarity index 92%
rename from beta/src/pages/apis/createRoot.md
rename to beta/src/pages/apis/react-dom/client/createRoot.md
index 33c1b4d0..211ca001 100644
--- a/beta/src/pages/apis/createRoot.md
+++ b/beta/src/pages/apis/react-dom/client/createRoot.md
@@ -94,7 +94,7 @@ function Counter() {
 
 **If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** 
 
-From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state](/apis/usestate). When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/apis/createportal)
+From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state](/apis/react/useState). When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/apis/react-dom/createPortal)
 
 <Note>
 
@@ -104,13 +104,13 @@ When your HTML is empty, the user sees a blank page until the app's JavaScript c
 <div id="root"></div>
 ```
 
-This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/apis/reactdomserver) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend to [use a framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
+This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/apis/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend to [use a framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
 
 </Note>
 
 <Gotcha>
 
-**Apps using server rendering or static generation must call [`hydrateRoot`](/apis/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them.
+**Apps using server rendering or static generation must call [`hydrateRoot`](/apis/react-dom/client/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them.
 
 </Gotcha>
 
@@ -240,7 +240,7 @@ export default function App({counter}) {
 
 </Sandpack>
 
-It is uncommon to call `render` multiple times. Usually, you'll [update state](/apis/usestate) inside one of the components instead.
+It is uncommon to call `render` multiple times. Usually, you'll [update state](/apis/react/useState) inside one of the components instead.
 
 ---
 ## Reference {/*reference*/}
@@ -272,7 +272,7 @@ An app fully built with React will usually only have one `createRoot` call for i
 * **optional** `options`: A object contain options for this React root.
 
   * `onRecoverableError`: optional callback called when React automatically recovers from errors.
-  * `identifierPrefix`: optional prefix React uses for IDs generated by [`useId`](/apis/useid). Useful to avoid conflicts when using multiple roots on the same page.
+  * `identifierPrefix`: optional prefix React uses for IDs generated by [`useId`](/apis/react/useId). Useful to avoid conflicts when using multiple roots on the same page.
 #### Returns {/*returns*/}
 
 `createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`](#root-unmount).
@@ -311,7 +311,7 @@ React will display `<App />` in the `root`, and take over managing the DOM insid
 
 * If your root's DOM node contains HTML generated by React on the server or during the build, use [`hydrateRoot()`](/apis/react-dom/client/hydrateRoot) instead, which attaches the event handlers to the existing HTML.
 
-* If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/apis/usestate#setstate) on the root component: React avoids unnecessary DOM updates.
+* If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/apis/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
 
 ---
 
@@ -415,7 +415,7 @@ If you can't get it working, check out [Adding React to a Website](/learn/add-re
 
 If your app is server-rendered and includes the initial HTML generated by React, you might notice that creating a root and calling `root.render` deletes all that HTML, and then re-creates all the DOM nodes from scratch. This can be slower, resets focus and scroll positions, and may lose other user input.
 
-Server-rendered apps must use [`hydrateRoot`](/apis/hydrateRoot) instead of `createRoot`:
+Server-rendered apps must use [`hydrateRoot`](/apis/react-dom/client/hydrateRoot) instead of `createRoot`:
 
 ```js {1,4-7}
 import { hydrateRoot } from 'react-dom/client';
diff --git a/beta/src/pages/apis/hydrateRoot.md b/beta/src/pages/apis/react-dom/client/hydrateRoot.md
similarity index 93%
rename from beta/src/pages/apis/hydrateRoot.md
rename to beta/src/pages/apis/react-dom/client/hydrateRoot.md
index ca93cfbc..a89dd8c0 100644
--- a/beta/src/pages/apis/hydrateRoot.md
+++ b/beta/src/pages/apis/react-dom/client/hydrateRoot.md
@@ -4,7 +4,7 @@ title: hydrateRoot
 
 <Intro>
 
-`hydrateRoot` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/apis/reactdomserver).
+`hydrateRoot` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/apis/react-dom/server).
 
 ```js
 const root = hydrateRoot(domNode, reactNode, options?)
@@ -26,7 +26,7 @@ const root = hydrateRoot(domNode, reactNode, options?)
 
 ### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
 
-If your app's HTML was generated by [`react-dom/server`](/apis/createRoot), you need to *hydrate* it on the client.
+If your app's HTML was generated by [`react-dom/server`](/apis/react-dom/client/createRoot), you need to *hydrate* it on the client.
 
 ```js [[1, 3, "document.getElementById('root')"], [2, 3, "<App />"]]
 import {hydrateRoot} from 'react-dom/client';
@@ -83,7 +83,7 @@ function Counter() {
 
 </Sandpack>
 
-You shouldn't need to call `hydrateRoot` again or to call it in more places. From this point on, React will be managing the DOM of your application. If you want to update the UI, your components can do this by [using state](/apis/usestate).
+You shouldn't need to call `hydrateRoot` again or to call it in more places. From this point on, React will be managing the DOM of your application. If you want to update the UI, your components can do this by [using state](/apis/react/useState).
 
 <Gotcha>
 
@@ -104,7 +104,7 @@ React can recover from some hydration errors, but **you must fix them like other
 
 ### Updating a hydrated root component {/*updating-a-hydrated-root-component*/}
 
-After the root has finished hydrating, you can call [`root.render`](#root-render) to update the root React component. **Unlike with [`createRoot`](/apis/createRoot), you don't usually need to do this because the initial content was already rendered as HTML.**
+After the root has finished hydrating, you can call [`root.render`](#root-render) to update the root React component. **Unlike with [`createRoot`](/apis/react-dom/client/createRoot), you don't usually need to do this because the initial content was already rendered as HTML.**
 
 If you call `root.render` at some point after hydration, and the component tree structure matches up with what was previously rendered, React will [preserve the state](/learn/preserving-and-resetting-state). Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive:
 
@@ -148,7 +148,7 @@ export default function App({counter}) {
 
 </Sandpack>
 
-It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually, you'll [update state](/apis/usestate) inside one of the components instead.
+It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually, you'll [update state](/apis/react/useState) inside one of the components instead.
 
 
 ---
@@ -176,7 +176,7 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
 * **optional** `options`: A object contain options for this React root.
 
   * `onRecoverableError`: optional callback called when React automatically recovers from errors.
-  * `identifierPrefix`: optional prefix React uses for IDs generated by [`useId`](/apis/useid). Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
+  * `identifierPrefix`: optional prefix React uses for IDs generated by [`useId`](/apis/react/useId). Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
 
 #### Returns {/*returns*/}
 
@@ -186,7 +186,7 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
 * `hydrateRoot()` expects the rendered content to be identical with the server-rendered content. You should treat mismatches as bugs and fix them.
 * In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
 * You'll likely have only one `hydrateRoot` call in your app. If you use a framework, it might do this call for you.
-* If your app is client-rendered with no HTML rendered already, using `hydrateRoot()` is not supported. Use [`createRoot()`](/apis/createRoot) instead.
+* If your app is client-rendered with no HTML rendered already, using `hydrateRoot()` is not supported. Use [`createRoot()`](/apis/react-dom/client/createRoot) instead.
 
 ---
 
diff --git a/beta/src/pages/apis/react-dom/createPortal.md b/beta/src/pages/apis/react-dom/createPortal.md
new file mode 100644
index 00000000..3a96beee
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/createPortal.md
@@ -0,0 +1,21 @@
+---
+title: createPortal
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [createPortal](https://reactjs.org/docs/react-dom.html#createportal).
+
+</Wip>
+
+
+<Intro>
+
+Portals provide a way to render children into a DOM node that exists outside the hierarchy of the DOM component.
+
+
+```js
+createPortal(child, container)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react-dom/findDOMNode.md b/beta/src/pages/apis/react-dom/findDOMNode.md
new file mode 100644
index 00000000..abbc6366
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/findDOMNode.md
@@ -0,0 +1,26 @@
+---
+title: findDOMNode
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [findDOMNode](https://reactjs.org/docs/react-dom.html#finddomnode).
+
+</Wip>
+
+
+<Intro>
+
+If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. **In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.**
+
+```js
+findDOMNode(component)
+```
+
+</Intro>
+
+<Gotcha>
+
+`findDOMNode` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. [It has been deprecated in StrictMode](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
+
+</Gotcha>
diff --git a/beta/src/pages/apis/react-dom/flushSync.md b/beta/src/pages/apis/react-dom/flushSync.md
new file mode 100644
index 00000000..f33a97c3
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/flushSync.md
@@ -0,0 +1,21 @@
+---
+title: flushSync
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [flushSync](https://reactjs.org/docs/react-dom.html#flushsync).
+
+</Wip>
+
+
+<Intro>
+
+Force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.
+
+
+```js
+flushSync(callback)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react-dom/hydrate.md b/beta/src/pages/apis/react-dom/hydrate.md
new file mode 100644
index 00000000..4f7cd084
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/hydrate.md
@@ -0,0 +1,20 @@
+---
+title: flushSync
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [hydrate](https://reactjs.org/docs/react-dom.html#hydrate).
+
+</Wip>
+
+
+<Intro>
+
+Same as `render()`, but is used to hydrate a container whose HTML contents were rendered by `react-dom/server`. React will attempt to attach event listeners to the existing markup.
+
+```js
+hydrate(element, container, callback?)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react-dom/index.md b/beta/src/pages/apis/react-dom/index.md
new file mode 100644
index 00000000..f3ed0e7a
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/index.md
@@ -0,0 +1,181 @@
+---
+title: ReactDOM APIs
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [ReactDOM](https://reactjs.org/docs/react-dom.html).
+
+</Wip>
+
+
+<Intro>
+
+The ReactDOM package lets you render React components on a webpage.
+
+</Intro>
+
+Typically, you will use ReactDOM at the top level of your app to display your components. You will either use it directly or a [framework](/learn/start-a-new-react-project#building-with-react-and-a-framework) may do it for you. Most of your components should *not* need to import this module.
+
+## Installation {/*installation*/}
+
+<PackageImport>
+
+<TerminalBlock>
+
+npm install react-dom
+
+</TerminalBlock>
+
+```js
+// Importing a specific API:
+import { createRoot } from 'react-dom/client';
+
+// Importing all APIs together:
+import * as ReactDOMClient from 'react-dom/client';
+```
+
+</PackageImport>
+
+You'll also need to install the same version of [React](/apis/react).
+
+## Browser Support {/*browser-support*/}
+
+ReactDOM supports all popular browsers, including Internet Explorer 9 and above. [Some polyfills are required](http://todo%20link%20to%20js%20environment%20requirements/) for older browsers such as IE 9 and IE 10.
+
+## Exports {/*exports*/}
+
+### Portals {/*portals*/}
+
+<YouWillLearnCard title="createPortal" path="/apis/react-dom/createPortal">
+
+Create a portal.
+
+```js
+createPortal(child, container);
+```
+
+</YouWillLearnCard>
+
+### Flushing {/*flushing*/}
+
+<YouWillLearnCard title="flushSync" path="/apis/react-dom/flushSync">
+
+Flush in progress updates.
+
+```js
+flushSync(() => {
+  // ...
+});
+```
+
+</YouWillLearnCard>
+
+### Client APIs {/*clientapis*/}
+
+<YouWillLearnCard title="createRoot" path="/apis/react-dom/client/createRoot">
+
+Create and render a React root.
+
+```js
+const root = createRoot(domNode);
+root.render(<App />);
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="hydrateRoot" path="/apis/react-dom/client/hydrateRoot">
+
+Hydrate server-rendered HTML.
+
+```js
+hydrateRoot(domNode, <App />);
+```
+
+</YouWillLearnCard>
+
+### Server APIs {/*serverapis*/}
+
+<YouWillLearnCard title="renderToPipeableStream" path="/apis/react-dom/server/renderToPipeableStream">
+
+Render a React element to a pipeable stream.
+
+```js
+renderToPipeableStream(element, options)
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="renderToReadableStream" path="/apis/react-dom/server/renderToReadableStream">
+
+Render a React element to a Readable stream.
+
+```js
+renderToReadableStream(element, options)
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="renderToNodeStream" path="/apis/react-dom/server/renderToNodeStream">
+
+Render a React element to a Node stream.
+
+```js
+renderToNodeStream(element)
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="renderToStaticNodeStream" path="/apis/react-dom/server/renderToStaticNodeStream">
+
+Render a React element to a static Node stream.
+
+```js
+renderToStaticNodeStream(element)
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="renderToString" path="/apis/react-dom/server/renderToString">
+
+Render a React element to a string.
+
+```js
+renderToString(element)
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="renderToStaticMarkup" path="/apis/react-dom/server/renderToStaticMarkup">
+
+Render a React element to static markup.
+
+```js
+renderToStaticMarkup(element)
+```
+
+</YouWillLearnCard>
+
+### Deprecated {/*deprecated*/}
+
+<YouWillLearnCard title="render" path="/apis/react-dom/render">
+
+Displays a React component inside a browser DOM node (deprecated).
+
+```js
+render(<App />, document.getElementById('root'));
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="hydrate" path="/apis/react-dom/hydrate">
+
+Hydrate server-rendered HTMl (deprecated).
+
+```js
+hydrate(<App />, document.getElementById('root'));
+```
+
+</YouWillLearnCard>
+
+This section is incomplete and is still being written!
diff --git a/beta/src/pages/apis/render.md b/beta/src/pages/apis/react-dom/render.md
similarity index 90%
rename from beta/src/pages/apis/render.md
rename to beta/src/pages/apis/react-dom/render.md
index 594efb12..ad4544df 100644
--- a/beta/src/pages/apis/render.md
+++ b/beta/src/pages/apis/react-dom/render.md
@@ -4,7 +4,7 @@ title: render
 
 <Gotcha>
 
-In React 18, `render` was replaced by [`createRoot`](/apis/createRoot). Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis).
+In React 18, `render` was replaced by [`createRoot`](/apis/react-dom/client/createRoot). Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis).
 
 </Gotcha>
 
@@ -63,7 +63,7 @@ export default function App() {
 
 </Sandpack>
 
-Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. If you want to update the UI, your components can do this by [using state](/apis/usestate).
+Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. If you want to update the UI, your components can do this by [using state](/apis/react/useState).
 
 ---
 
@@ -177,7 +177,7 @@ export default function App({counter}) {
 
 </Sandpack>
 
-It is uncommon to call `render` multiple times. Usually, you'll [update state](/apis/usestate) inside one of the components instead.
+It is uncommon to call `render` multiple times. Usually, you'll [update state](/apis/react/useState) inside one of the components instead.
 
 ---
 
@@ -213,11 +213,11 @@ An app fully built with React will usually only have one `render` call with its
 
 #### Caveats {/*caveats*/}
 
-* In React 18, `render` was replaced by [`createRoot`](/apis/createRoot). Please use for React 18 and beyond.
+* In React 18, `render` was replaced by [`createRoot`](/apis/react-dom/client/createRoot). Please use for React 18 and beyond.
 
 * The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/TODO) instead, which attaches the event handlers to the existing HTML.
 
-* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/apis/usestate#setstate) on the root component: React avoids unnecessary DOM updates.
+* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/apis/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
 
 * If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](TODO) instead of `render`.
 
diff --git a/beta/src/pages/apis/react-dom/server/renderToNodeStream.md b/beta/src/pages/apis/react-dom/server/renderToNodeStream.md
new file mode 100644
index 00000000..2bce8b9b
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/server/renderToNodeStream.md
@@ -0,0 +1,21 @@
+---
+title: renderToNodeStream
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [renderToNodeStream](https://reactjs.org/docs/react-dom-server.html#rendertonodestream).
+
+</Wip>
+
+
+<Intro>
+
+Render a React element to its initial HTML.
+
+
+```js
+renderToNodeStream(element)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react-dom/server/renderToPipeableStream.md b/beta/src/pages/apis/react-dom/server/renderToPipeableStream.md
new file mode 100644
index 00000000..73323d4d
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/server/renderToPipeableStream.md
@@ -0,0 +1,21 @@
+---
+title: renderToPipeableStream
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [renderToPipeableStream](https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream).
+
+</Wip>
+
+
+<Intro>
+
+Render a React element to a stream.
+
+
+```js
+renderToPipeableStream(element, options)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react-dom/server/renderToReadableStream.md b/beta/src/pages/apis/react-dom/server/renderToReadableStream.md
new file mode 100644
index 00000000..63f320d6
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/server/renderToReadableStream.md
@@ -0,0 +1,21 @@
+---
+title: renderToReadableStream
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [renderToReadableStream](https://reactjs.org/docs/react-dom-server.html#rendertoreadablestream).
+
+</Wip>
+
+
+<Intro>
+
+Streams a React element to its initial HTML. Returns a Promise that resolves to a [Readable Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). Fully supports Suspense and streaming of HTML. [Read more](https://github.com/reactwg/react-18/discussions/127)
+
+
+```js
+renderToReadableStream(element, options);
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react-dom/server/renderToStaticMarkup.md b/beta/src/pages/apis/react-dom/server/renderToStaticMarkup.md
new file mode 100644
index 00000000..a3e3a6b5
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/server/renderToStaticMarkup.md
@@ -0,0 +1,23 @@
+---
+title: renderToStaticMarkup
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [renderToStaticMarkup](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup).
+
+</Wip>
+
+
+<Intro>
+
+Similar to renderToString, except this doesn’t create extra DOM attributes that React uses internally, such as data-reactroot. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
+
+
+```js
+renderToStaticMarkup(element)
+```
+
+If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use renderToString on the server and ReactDOM.hydrateRoot() on the client.
+
+</Intro>
diff --git a/beta/src/pages/apis/react-dom/server/renderToStaticNodeStream.md b/beta/src/pages/apis/react-dom/server/renderToStaticNodeStream.md
new file mode 100644
index 00000000..9f086f08
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/server/renderToStaticNodeStream.md
@@ -0,0 +1,21 @@
+---
+title: renderToStaticNodeStream
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [renderToStaticNodeStream](https://reactjs.org/docs/react-dom-server.html#rendertostaticnodestream).
+
+</Wip>
+
+
+<Intro>
+
+Similar to renderToNodeStream, except this doesn’t create extra DOM attributes that React uses internally, such as `data-reactroot`. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
+
+
+```js
+renderToStaticNodeStream(element)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react-dom/server/renderToString.md b/beta/src/pages/apis/react-dom/server/renderToString.md
new file mode 100644
index 00000000..12b9c1d3
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/server/renderToString.md
@@ -0,0 +1,21 @@
+---
+title: renderToString
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [renderToString](https://reactjs.org/docs/react-dom-server.html#rendertostring).
+
+</Wip>
+
+
+<Intro>
+
+Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
+
+
+```js
+renderToString(element)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react-dom/unmountComponentAtNode.md b/beta/src/pages/apis/react-dom/unmountComponentAtNode.md
new file mode 100644
index 00000000..d0190eed
--- /dev/null
+++ b/beta/src/pages/apis/react-dom/unmountComponentAtNode.md
@@ -0,0 +1,20 @@
+---
+title: unmountComponentAtNode
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [unmountComponentAtNode](https://reactjs.org/docs/react-dom.html#unmountcomponentatnode).
+
+</Wip>
+
+
+<Intro>
+
+Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
+
+```js
+unmountComponentAtNode(container)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/Children.md b/beta/src/pages/apis/react/Children.md
new file mode 100644
index 00000000..d510d2e4
--- /dev/null
+++ b/beta/src/pages/apis/react/Children.md
@@ -0,0 +1,18 @@
+---
+title: React.Children
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [React.Children](https://reactjs.org/docs/react-api.html#reactchildren).
+
+</Wip>
+
+
+<Intro>
+
+`React.Children` provides utilities for dealing with the this.props.children opaque data structure.
+
+See the [React.Children](https://reactjs.org/docs/react-api.html#reactchildren) docs for more info.
+
+</Intro>
diff --git a/beta/src/pages/apis/react/Component.md b/beta/src/pages/apis/react/Component.md
new file mode 100644
index 00000000..b2b255c0
--- /dev/null
+++ b/beta/src/pages/apis/react/Component.md
@@ -0,0 +1,26 @@
+---
+title: React.Component
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [React.Component](https://reactjs.org/docs/react-component.html).
+
+</Wip>
+
+
+<Intro>
+
+React lets you define components as classes:
+
+```js
+class Welcome extends React.Component {
+  render() {
+    return <h1>Hello, {this.props.name}</h1>;
+  }
+}
+```
+
+The only method you must define in a `React.Component` subclass is called `render()`. All the other methods described on are optional. Please see the old [React.Component](https://reactjs.org/docs/react-component.html) docs for more info.
+
+</Intro>
diff --git a/beta/src/pages/apis/react/Fragment.md b/beta/src/pages/apis/react/Fragment.md
new file mode 100644
index 00000000..c7dfbbc8
--- /dev/null
+++ b/beta/src/pages/apis/react/Fragment.md
@@ -0,0 +1,31 @@
+---
+title: React.Fragment
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [React.Fragment](https://reactjs.org/docs/react-api.html#reactfragment).
+
+</Wip>
+
+
+<Intro>
+
+The `React.Fragment` component lets you return multiple elements without creating an additional DOM element:
+
+```
+function Component() {
+  return (
+    <React.Fragment>
+      Some text.
+      <h2>A heading</h2>
+    </React.Fragment>
+  );
+}
+```
+
+You can also use it with the shorthand `<></>` syntax.
+
+For more information, see [React v16.2.0: Improved Support for Fragments](https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html).
+
+</Intro>
diff --git a/beta/src/pages/apis/react/PureComponent.md b/beta/src/pages/apis/react/PureComponent.md
new file mode 100644
index 00000000..896cb453
--- /dev/null
+++ b/beta/src/pages/apis/react/PureComponent.md
@@ -0,0 +1,26 @@
+---
+title: React.PureComponent
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [React.PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent).
+
+</Wip>
+
+
+<Intro>
+
+React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
+
+If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.
+
+```js
+class Welcome extends React.PureComponent {
+  render() {
+    return <h1>Hello, {this.props.name}</h1>;
+  }
+}
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/StrictMode.md b/beta/src/pages/apis/react/StrictMode.md
new file mode 100644
index 00000000..ed387ad2
--- /dev/null
+++ b/beta/src/pages/apis/react/StrictMode.md
@@ -0,0 +1,10 @@
+---
+title: StrictMode
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [StrictMode](https://reactjs.org/docs/strict-mode.html).
+
+</Wip>
+
diff --git a/beta/src/pages/apis/react/Suspense.md b/beta/src/pages/apis/react/Suspense.md
new file mode 100644
index 00000000..e52c6b5e
--- /dev/null
+++ b/beta/src/pages/apis/react/Suspense.md
@@ -0,0 +1,18 @@
+---
+title: Suspense
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [Suspense](https://reactjs.org/docs/react-api.html#reactsuspense).
+
+</Wip>
+
+
+<Intro>
+
+```js
+<React.Suspense fallback={<Spinner />}>
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/cloneElement.md b/beta/src/pages/apis/react/cloneElement.md
new file mode 100644
index 00000000..ef5e93e8
--- /dev/null
+++ b/beta/src/pages/apis/react/cloneElement.md
@@ -0,0 +1,18 @@
+---
+title: cloneElement
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [cloneElement](https://reactjs.org/docs/react-api.html#cloneelement).
+
+</Wip>
+
+
+<Intro>
+
+```js
+React.cloneElement(element, [config], [...children])
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/createcontext.md b/beta/src/pages/apis/react/createContext.md
similarity index 90%
rename from beta/src/pages/apis/createcontext.md
rename to beta/src/pages/apis/react/createContext.md
index e960fe86..d4a000f1 100644
--- a/beta/src/pages/apis/createcontext.md
+++ b/beta/src/pages/apis/react/createContext.md
@@ -39,7 +39,7 @@ const ThemeContext = createContext('light');
 const AuthContext = createContext(null);
 ```
 
-`createContext` returns a <CodeStep step={1}>context object</CodeStep>. Components can read context by passing it to [`useContext()`](/apis/usecontext):
+`createContext` returns a <CodeStep step={1}>context object</CodeStep>. Components can read context by passing it to [`useContext()`](/apis/react/useContext):
 
 ```js [[1, 2, "ThemeContext"], [1, 7, "AuthContext"]]
 function Button() {
@@ -76,7 +76,7 @@ function App() {
 
 Now the `Page` component and any components inside it, no matter how deep, will "see" the passed context values. If the passed context values change, React will re-render the components reading the context as well.
 
-[Read more about reading and providing context and see examples.](/apis/usecontext)
+[Read more about reading and providing context and see examples.](/apis/react/useContext)
 
 ---
 
@@ -144,7 +144,7 @@ const ThemeContext = createContext('light');
 
 `createContext` returns a context object.
 
-**The context object itself does not hold any information.** It represents _which_ context other components can read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/apis/usecontext) in components below to read it. The context object has a few properties:
+**The context object itself does not hold any information.** It represents _which_ context other components can read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/apis/react/useContext) in components below to read it. The context object has a few properties:
 
 * `SomeContext.Provider` lets you provide the context value to components.
 * `SomeContext.Consumer` is an alternative and rarely used way to read the context value.
@@ -169,7 +169,7 @@ function App() {
 
 #### Props {/*provider-props*/}
 
-* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/apis/usecontext) inside of the provider receives the `value` of the innermost corresponding context provider above it.
+* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/apis/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it.
 
 ---
 
@@ -190,7 +190,7 @@ function Button() {
 }
 ```
 
-Although this older way still works, but **newly written code should read context with [`useContext()`](/apis/usecontext) instead:**
+Although this older way still works, but **newly written code should read context with [`useContext()`](/apis/react/useContext) instead:**
 
 ```js
 function Button() {
@@ -202,7 +202,7 @@ function Button() {
 
 #### Props {/*consumer-props*/}
 
-* `children`: A function. React will call the function you pass with the current context value determined by the same algorithm as [`useContext()`](/apis/usecontext) does, and render the result you return from this function. React will also re-run this function and update the UI whenever the context passed from the parent components have changed.
+* `children`: A function. React will call the function you pass with the current context value determined by the same algorithm as [`useContext()`](/apis/react/useContext) does, and render the result you return from this function. React will also re-run this function and update the UI whenever the context passed from the parent components have changed.
 
 ---
 
@@ -219,5 +219,5 @@ const ThemeContext = createContext('light');
 
 This value never changes. React only uses this value as a fallback if it can't find a matching provider above.
 
-To make context change over time, [add state and wrap components in a context provider](/apis/usecontext#updating-data-passed-via-context).
+To make context change over time, [add state and wrap components in a context provider](/apis/react/useContext#updating-data-passed-via-context).
 
diff --git a/beta/src/pages/apis/react/createElement.md b/beta/src/pages/apis/react/createElement.md
new file mode 100644
index 00000000..a5db09d9
--- /dev/null
+++ b/beta/src/pages/apis/react/createElement.md
@@ -0,0 +1,18 @@
+---
+title: createElement
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [createElement](https://reactjs.org/docs/react-api.html#createelement).
+
+</Wip>
+
+
+<Intro>
+
+```js
+React.createElement(type, [props], [...children])
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/createFactory.md b/beta/src/pages/apis/react/createFactory.md
new file mode 100644
index 00000000..de236ea3
--- /dev/null
+++ b/beta/src/pages/apis/react/createFactory.md
@@ -0,0 +1,18 @@
+---
+title: createFactory
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [createFactory](https://reactjs.org/docs/react-api.html#createfactory).
+
+</Wip>
+
+
+<Intro>
+
+```js
+React.createFactory(type)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/createRef.md b/beta/src/pages/apis/react/createRef.md
new file mode 100644
index 00000000..b8e7681f
--- /dev/null
+++ b/beta/src/pages/apis/react/createRef.md
@@ -0,0 +1,18 @@
+---
+title: createRef
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [createRef](https://reactjs.org/docs/react-api.html#reactcreateref).
+
+</Wip>
+
+
+<Intro>
+
+```js
+React.createRef();
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/forwardRef.md b/beta/src/pages/apis/react/forwardRef.md
new file mode 100644
index 00000000..d05dfb03
--- /dev/null
+++ b/beta/src/pages/apis/react/forwardRef.md
@@ -0,0 +1,24 @@
+---
+title: forwardRef
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [forwardRef](https://reactjs.org/docs/react-api.html#reactforwardref).
+
+</Wip>
+
+
+<Intro>
+
+`React.forwardRef` creates a React component that forwards the `ref` attribute it receives to another component below in the tree.
+
+```js
+const FancyButton = React.forwardRef((props, ref) => (
+  <button ref={ref} className="FancyButton">
+    {props.children}
+  </button>
+));
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/index.md b/beta/src/pages/apis/react/index.md
new file mode 100644
index 00000000..67050189
--- /dev/null
+++ b/beta/src/pages/apis/react/index.md
@@ -0,0 +1,427 @@
+---
+title: React APIs
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [React](https://reactjs.org/docs/react-api.html).
+
+</Wip>
+
+<Intro>
+
+The React package contains all the APIs necessary to define and use [components](/learn/your-first-component).
+
+</Intro>
+
+## Installation {/*installation*/}
+
+It is available as [`react`](https://www.npmjs.com/package/react) on npm. You can also [add React to the page as a `<script>` tag](/learn/add-react-to-a-website).
+
+<PackageImport>
+
+<TerminalBlock>
+
+npm install react
+
+</TerminalBlock>
+
+```js
+// Importing a specific API:
+import { useState } from 'react';
+
+// Importing all APIs together:
+import * as React from 'react';
+```
+
+</PackageImport>
+
+If you use React on the web, you'll also need the same version of [ReactDOM](/apis/react-dom).
+
+## Exports {/*exports*/}
+
+### State {/*state*/}
+
+<YouWillLearnCard title="useState" path="/apis/react/useState">
+
+Declares a state variable.
+
+```js
+function MyComponent() {
+  const [age, setAge] = useState(42);
+  // ...
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="useReducer" path="/apis/react/useReducer">
+
+Declares a state variable managed with a reducer.
+
+```js
+function MyComponent() {
+  const [state, dispatch] = useReducer(reducer, { age: 42 });
+  // ...
+```
+
+</YouWillLearnCard>
+
+### Context {/*context*/}
+
+<YouWillLearnCard title="useContext" path="/apis/react/useContext">
+
+Reads and subscribes to a context.
+
+```js
+function MyComponent() {
+  const theme = useContext(ThemeContext);
+  // ...
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="createContext" path="/apis/react/useContext">
+
+Creates a context that components can provide or read.
+
+```js
+const ThemeContext = createContext('light');
+```
+
+</YouWillLearnCard>
+
+### Refs {/*refs*/}
+
+
+<YouWillLearnCard title="useRef" path="/apis/react/useRef">
+
+Declares a ref.
+
+```js
+function MyComponent() {
+  const inputRef = useRef(null);
+  // ...
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="forwardRef" path="/apis/react/forwardRef">
+
+Create a component that forward the ref attribute:
+
+```js
+const Component = forwardRef((props, ref) => {
+    // ...
+});
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="useImperativeHandle" path="/apis/react/useImperativeHandle">
+
+Customize instance value exposed to parent refs:
+
+```js
+useImperativeHandle(ref, () => {
+  // ...        
+});
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="createRef" path="/apis/react/createRef">
+
+Create a ref (typically for class components):
+
+```js
+this.ref = createRef(); 
+```
+
+</YouWillLearnCard>
+
+### Components {/*components*/}
+
+<YouWillLearnCard title="React.Component" path="/apis/react/Component">
+
+Define a components as a class:
+
+```js
+class MyComponent extends React.Component {
+  // ...
+}
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="React.PureComponent" path="/apis/react/PureComponent">
+
+Define a pure component as a class:
+
+```js
+class MyComponent extends React.PureComponent {
+    // ...
+}
+```
+
+</YouWillLearnCard>
+
+### Elements {/*elements*/}
+
+<YouWillLearnCard title="Fragment" path="/apis/react/Fragment">
+
+Return multiple elements:
+
+```js
+function MyComponent() {
+    return (
+        <>
+            <h1>Title</h1>
+            <h2>Subtitle</h2>
+        </>
+    );
+}
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="Children" path="/apis/react/Children">
+
+Utilities for dealing with `props.children`:
+
+```js
+React.Children.map(children, () => ([]));
+
+React.Children.forEach(children, () => {});
+
+React.Children.count(children);
+
+React.Children.only(children);
+
+React.Children.toArray(children);
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="createElement" path="/apis/react/createElement">
+
+Create a React element:
+
+```js
+React.createElement('div', { title: 'Element'});
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="createFactory" path="/apis/react/createFactory">
+
+Create a factory for React elements of a given type:
+
+```js
+React.createFactory('div');
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="cloneElement" path="/apis/react/cloneElement">
+
+Clone a React element:
+
+```js
+React.cloneElement(element, props);
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="isValidElement" path="/apis/react/isValidElement">
+
+Verifies the object is a React element:
+
+```js
+React.isValidElement(object)
+```
+
+</YouWillLearnCard>
+
+### Suspense {/*suspense*/}
+
+<YouWillLearnCard title="React.lazy" path="/apis/react/lazy">
+
+Define a component that is loaded dynamically:
+
+```js
+const SomeComponent = React.lazy(() => import('./SomeComponent'));
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="Suspense" path="/apis/react/Suspense">
+
+Define Suspense boundaries:
+
+```js
+<React.Suspense fallback={<Spinner />}>
+  //...
+</React.Suspense>
+```
+
+</YouWillLearnCard>
+
+### Transitions {/*transitions*/}
+
+<YouWillLearnCard title="startTransition" path="/apis/react/startTransition">
+
+Mark updates as transitions:
+
+```js
+startTransition(() => {
+  setState(c => c + 1);
+});
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="useTransition" path="/apis/react/startTransition">
+
+Mark updates as transitions with pending flags:
+
+```js
+const [isPending, startTransition] = useTransition();
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="useDeferredValue" path="/apis/react/useDeferredValue">
+
+Defer to more urgent updates:
+
+```js
+const deferredValue = useDeferredValue(value);
+```
+
+</YouWillLearnCard>
+
+### Effects {/*effects*/}
+
+<YouWillLearnCard title="useEffect" path="/apis/react/useEffect">
+
+Synchronize external state:
+
+```js
+useEffect(() => {
+  const unsubscribe = socket.connect(props.userId);
+    
+  return () => {
+    unsubscribe();
+  }
+}, [props.userId])
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="useLayoutEffect" path="/apis/react/useLayoutEffect">
+
+Read layout DOM state:
+
+```js
+useLayoutEffect(() => {
+  // Read DOM layout
+})
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="useInsertionEffect" path="/apis/react/useInsertionEffect">
+
+Insert styles into the DOM.
+
+```js
+useInsertionEffect(() => {
+  // Insert styles
+})
+```
+
+</YouWillLearnCard>
+
+### Memoization {/*memoization*/}
+
+<YouWillLearnCard title="useCallback" path="/apis/react/useCallback">
+
+Return a memoized callback.
+
+```js
+const memoizedCallback = useCallback(callback, [...deps]);
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="useMemo" path="/apis/react/useMemo">
+
+Return a memoized value.
+
+```js
+const memoizedValue = useMemo(() => value, [...deps]);
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="memo" path="/apis/react/memo">
+
+Return a memoized component.
+
+```js
+const MyComponent = React.memo(function MyComponent(props) {
+    // ...
+});
+```
+
+</YouWillLearnCard>
+
+### Subscribing {/*subscribing*/}
+
+<YouWillLearnCard title="useSyncExternalStore" path="/apis/react/useSyncExternalStore">
+
+Subscribe to external state.
+
+```js
+const state = useSyncExternalStore(subscribe, getSnapshot);
+```
+
+</YouWillLearnCard>
+
+### Accessibility {/*accessibility*/}
+
+<YouWillLearnCard title="useId" path="/apis/react/useId">
+
+Generate unique IDs across the server and client:
+
+```js
+const id = useId();
+```
+
+</YouWillLearnCard>
+
+### Debugging {/*devtools*/}
+
+<YouWillLearnCard title="StrictMode" path="/apis/react/StrictMode">
+
+Eagerly highlight potential problems.
+
+```js
+<StrictMode>{...}</StrictMode>
+```
+
+</YouWillLearnCard>
+
+<YouWillLearnCard title="useDebugValue" path="/apis/react/useDebugValue">
+
+Display a label for custom hooks.
+
+```js
+useDebugValue('Custom Label');
+```
+
+</YouWillLearnCard>
+
+
+This section is incomplete and is still being written!
+
diff --git a/beta/src/pages/apis/react/isValidElement.md b/beta/src/pages/apis/react/isValidElement.md
new file mode 100644
index 00000000..6156c334
--- /dev/null
+++ b/beta/src/pages/apis/react/isValidElement.md
@@ -0,0 +1,20 @@
+---
+title: isValidElement
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [isValidElement](https://reactjs.org/docs/react-api.html#isvalidelement).
+
+</Wip>
+
+
+<Intro>
+
+Verifies the object is a React element. Returns true or false.
+
+```js
+React.isValidElement(object)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/lazy.md b/beta/src/pages/apis/react/lazy.md
new file mode 100644
index 00000000..cafef497
--- /dev/null
+++ b/beta/src/pages/apis/react/lazy.md
@@ -0,0 +1,21 @@
+---
+title: lazy
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [lazy](https://reactjs.org/docs/react-api.html#reactlazy).
+
+</Wip>
+
+
+<Intro>
+
+`React.lazy()` lets you define a component that is loaded dynamically. This helps reduce the bundle size to delay loading components that aren’t used during the initial render.
+
+```js
+// This component is loaded dynamically
+const SomeComponent = React.lazy(() => import('./SomeComponent'));
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/memo.md b/beta/src/pages/apis/react/memo.md
new file mode 100644
index 00000000..17f5f22b
--- /dev/null
+++ b/beta/src/pages/apis/react/memo.md
@@ -0,0 +1,20 @@
+---
+title: React.memo
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [React.memo](https://reactjs.org/docs/react-api.html#reactmemo).
+
+</Wip>
+
+
+<Intro>
+
+```js
+const MyComponent = React.memo(function MyComponent(props) {
+  /* render using props */
+});
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/startTransition.md b/beta/src/pages/apis/react/startTransition.md
new file mode 100644
index 00000000..87151875
--- /dev/null
+++ b/beta/src/pages/apis/react/startTransition.md
@@ -0,0 +1,18 @@
+---
+title: startTransition
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [startTransition](https://reactjs.org/docs/react-api.html#starttransition).
+
+</Wip>
+
+
+<Intro>
+
+```js
+React.startTransition(callback);
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/useCallback.md b/beta/src/pages/apis/react/useCallback.md
new file mode 100644
index 00000000..efef88e2
--- /dev/null
+++ b/beta/src/pages/apis/react/useCallback.md
@@ -0,0 +1,18 @@
+---
+title: useCallback
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback).
+
+</Wip>
+
+
+<Intro>
+
+```js
+const memoizedCallback = useCallback(callback, [...dependencies])
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/usecontext.md b/beta/src/pages/apis/react/useContext.md
similarity index 97%
rename from beta/src/pages/apis/usecontext.md
rename to beta/src/pages/apis/react/useContext.md
index 58e33d70..5b62530f 100644
--- a/beta/src/pages/apis/usecontext.md
+++ b/beta/src/pages/apis/react/useContext.md
@@ -155,7 +155,7 @@ function Button({ children }) {
 
 ### Updating data passed via context {/*updating-data-passed-via-context*/}
 
-Often, you'll want the context to change over time. To update context, you need to combine it with [state](/apis/usestate). Declare a state variable in the parent component, and pass the current state down as the <CodeStep step={2}>context value</CodeStep> to the provider.
+Often, you'll want the context to change over time. To update context, you need to combine it with [state](/apis/react/useState). Declare a state variable in the parent component, and pass the current state down as the <CodeStep step={2}>context value</CodeStep> to the provider.
 
 ```js {2} [[1, 4, "ThemeContext"], [2, 4, "theme"], [1, 11, "ThemeContext"]]
 function MyPage() {
@@ -717,7 +717,7 @@ label {
 
 ### Scaling up with context and a reducer {/*scaling-up-with-context-and-a-reducer*/}
 
-In larger apps, it is common to combine context with a [reducer](/apis/usereducer) to extract the logic related to some state out of components. In this example, all the "wiring" is hidden in the `TasksContext.js`, which contains a reducer and two separate contexts.
+In larger apps, it is common to combine context with a [reducer](/apis/react/useReducer) to extract the logic related to some state out of components. In this example, all the "wiring" is hidden in the `TasksContext.js`, which contains a reducer and two separate contexts.
 
 Read a [full walkthrough](/learn/scaling-up-with-reducer-and-context) of this example.
 
@@ -927,7 +927,7 @@ ul, li { margin: 0; padding: 0; }
 
 ### Specifying a fallback default value {/*specifying-a-fallback-default-value*/}
 
-If React can't find any providers of that particular <CodeStep step={1}>context</CodeStep> in the parent tree, the context value returned by `useContext()` will be equal to the <CodeStep step={3}>default value</CodeStep> that you specified when you [created that context](/apis/createcontext):
+If React can't find any providers of that particular <CodeStep step={1}>context</CodeStep> in the parent tree, the context value returned by `useContext()` will be equal to the <CodeStep step={3}>default value</CodeStep> that you specified when you [created that context](/apis/react/useContext):
 
 ```js [[1, 1, "ThemeContext"], [3, 1, "null"]]
 const ThemeContext = createContext(null);
@@ -1289,7 +1289,7 @@ function MyApp() {
 
 Here, the <CodeStep step={2}>context value</CodeStep> is a JavaScript object with two properties, one of which is a function. Whenever `MyApp` re-renders (for example, on a route update), this will be a *different* object pointing at a *different* function, so React will also have to re-render all components deep in the tree that call `useContext(AuthContext)`.
 
-In smaller apps, this is not a problem. However, there is no need to re-render them if the underlying data, like `currentUser`, has not changed. To help React take advantage of that fact, you may wrap the `login` function with [`useCallback`](/apis/usecallback) and wrap the object creation into [`useMemo`](/apis/usememo). This is a performance optimization:
+In smaller apps, this is not a problem. However, there is no need to re-render them if the underlying data, like `currentUser`, has not changed. To help React take advantage of that fact, you may wrap the `login` function with [`useCallback`](/apis/react/usecallback) and wrap the object creation into [`useMemo`](/apis/usememo). This is a performance optimization:
 
 ```js {1,6-9,11-14}
 import { useCallback, useMemo } from 'react';
@@ -1337,11 +1337,11 @@ function MyComponent() {
 
 #### Parameters {/*parameters*/}
 
-* `SomeContext`: The context that you've previously created with [`createContext`](/apis/createcontext). The context itself does not hold the information, it only represents the kind of information you can provide or read from components.
+* `SomeContext`: The context that you've previously created with [`createContext`](/apis/react/useContext). The context itself does not hold the information, it only represents the kind of information you can provide or read from components.
 
 #### Returns {/*returns*/}
 
-`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/apis/createcontext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes.
+`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/apis/react/useContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes.
 
 #### Caveats {/*caveats*/}
 
diff --git a/beta/src/pages/apis/react/useDebugValue.md b/beta/src/pages/apis/react/useDebugValue.md
new file mode 100644
index 00000000..704d7939
--- /dev/null
+++ b/beta/src/pages/apis/react/useDebugValue.md
@@ -0,0 +1,20 @@
+---
+title: useDebugValue
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useDebugValue](https://reactjs.org/docs/hooks-reference.html#usedebugvalue).
+
+</Wip>
+
+
+<Intro>
+
+`useDebugValue` can be used to display a label for custom hooks in React DevTools.
+
+```js
+useDebugValue(value)
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/useDeferredValue.md b/beta/src/pages/apis/react/useDeferredValue.md
new file mode 100644
index 00000000..f9e14bc2
--- /dev/null
+++ b/beta/src/pages/apis/react/useDeferredValue.md
@@ -0,0 +1,20 @@
+---
+title: useDeferredValue
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useDeferredValue](https://reactjs.org/docs/hooks-reference.html#usedeferredvalue).
+
+</Wip>
+
+
+<Intro>
+
+`useDeferredValue` accepts a value and returns a new copy of the value that will defer to more urgent updates. If the current render is the result of an urgent update, like user input, React will return the previous value and then render the new value after the urgent render has completed.
+
+```js
+const deferredValue = useDeferredValue(value);
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/useEffect.md b/beta/src/pages/apis/react/useEffect.md
new file mode 100644
index 00000000..844be1a5
--- /dev/null
+++ b/beta/src/pages/apis/react/useEffect.md
@@ -0,0 +1,18 @@
+---
+title: useEffect
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect).
+
+</Wip>
+
+
+<Intro>
+
+```js
+useEffect(callback, [...dependencies])
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/useId.md b/beta/src/pages/apis/react/useId.md
new file mode 100644
index 00000000..aab799d2
--- /dev/null
+++ b/beta/src/pages/apis/react/useId.md
@@ -0,0 +1,26 @@
+---
+title: useId
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useId](https://reactjs.org/docs/hooks-reference.html#useid).
+
+</Wip>
+
+
+<Intro>
+
+`useId` is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches.
+
+```js
+const id = useId();
+```
+
+</Intro>
+
+<Gotcha>
+
+`useId` is not for generating keys in a list. Keys should be generated from your data.
+
+</Gotcha>
diff --git a/beta/src/pages/apis/react/useImperativeHandle.md b/beta/src/pages/apis/react/useImperativeHandle.md
new file mode 100644
index 00000000..edcc248c
--- /dev/null
+++ b/beta/src/pages/apis/react/useImperativeHandle.md
@@ -0,0 +1,18 @@
+---
+title: useImperativeHandle
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useImperativeHandle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle).
+
+</Wip>
+
+
+<Intro>
+
+```js
+useImperativeHandle(ref, createHandle, [deps])
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/useInsertionEffect.md b/beta/src/pages/apis/react/useInsertionEffect.md
new file mode 100644
index 00000000..fc4a621e
--- /dev/null
+++ b/beta/src/pages/apis/react/useInsertionEffect.md
@@ -0,0 +1,26 @@
+---
+title: useInsertionEffect
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useInsertionEffect](https://reactjs.org/docs/hooks-reference.html#useinsertioneffect).
+
+</Wip>
+
+
+<Intro>
+
+The signateure is identical to `useEffect`, but it fires synchronously before all DOM mutations. Use this to inject styles into the DOM before reading layout in `useLayoutEffect`. Since this hook is limited in scope, this hook does not have access to refs and cannot schedule updates.
+
+```js
+useInsertionEffect(didUpdate);
+```
+
+</Intro>
+
+<Gotcha>
+
+`useInsertionEffect` should be limited to css-in-js library authors. Prefer [`useEffect`](/apis/react/useEffect) or [`useLayoutEffect`](/apis/react/useLayoutEffect) instead.
+
+</Gotcha>
diff --git a/beta/src/pages/apis/react/useLayoutEffect.md b/beta/src/pages/apis/react/useLayoutEffect.md
new file mode 100644
index 00000000..adc24980
--- /dev/null
+++ b/beta/src/pages/apis/react/useLayoutEffect.md
@@ -0,0 +1,18 @@
+---
+title: useLayoutEffect
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useLayoutEffect](https://reactjs.org/docs/hooks-reference.html#uselayouteffect).
+
+</Wip>
+
+
+<Intro>
+
+```js
+useLayoutEffect(callback, [...dependencies])
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/useMemo.md b/beta/src/pages/apis/react/useMemo.md
new file mode 100644
index 00000000..c4c59318
--- /dev/null
+++ b/beta/src/pages/apis/react/useMemo.md
@@ -0,0 +1,18 @@
+---
+title: useMemo
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo).
+
+</Wip>
+
+
+<Intro>
+
+```js
+const memoizedValue = useMemo(callback, [...dependencies])
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/usereducer.md b/beta/src/pages/apis/react/useReducer.md
similarity index 98%
rename from beta/src/pages/apis/usereducer.md
rename to beta/src/pages/apis/react/useReducer.md
index cf92304a..a4b17b17 100644
--- a/beta/src/pages/apis/usereducer.md
+++ b/beta/src/pages/apis/react/useReducer.md
@@ -98,7 +98,7 @@ button { display: block; margin-top: 10px; }
 
 </Sandpack>
 
-`useReducer` is very similar to [`useState`](/apis/usestate), but it lets you move the state update logic from event handlers into a single function outside of your component. Read more about [choosing between `useState` and `useReducer`](/learn/extracting-state-logic-into-a-reducer#comparing-usestate-and-usereducer).
+`useReducer` is very similar to [`useState`](/apis/react/useState), but it lets you move the state update logic from event handlers into a single function outside of your component. Read more about [choosing between `useState` and `useReducer`](/learn/extracting-state-logic-into-a-reducer#comparing-usestate-and-usereducer).
 
 ---
 
@@ -945,7 +945,7 @@ React will set the next state to the result of calling the `reducer` function yo
 
 * If the new value you provide is identical to the current `state`, as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison, React will **skip re-rendering the component and its children.** This is an optimization. React may still need to call your component before ignoring the result, but it shouldn't affect your code.
 
-* React [batches state updates](/learn/queueing-a-series-of-state-updates). It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`](/apis/flushsync).
+* React [batches state updates](/learn/queueing-a-series-of-state-updates). It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`](/apis/react-dom/flushsync).
 
 ---
 
@@ -1094,7 +1094,7 @@ If you can't find the cause of this error, click on the arrow next to the error
 
 ### My reducer or initializer function runs twice {/*my-reducer-or-initializer-function-runs-twice*/}
 
-In [Strict Mode](/apis/strictmode), React will call your reducer and initializer functions twice. This shouldn't break your code.
+In [Strict Mode](/apis/react/strictmode), React will call your reducer and initializer functions twice. This shouldn't break your code.
 
 This **development-only** behavior helps you [keep components pure](/learn/keeping-components-pure). React uses the result of one of the calls, and ignores the result of the other call. As long as your component, initializer, and reducer functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice the mistakes and fix it.
 
diff --git a/beta/src/pages/apis/useref.md b/beta/src/pages/apis/react/useRef.md
similarity index 97%
rename from beta/src/pages/apis/useref.md
rename to beta/src/pages/apis/react/useRef.md
index 4bd400a5..9dec4de1 100644
--- a/beta/src/pages/apis/useref.md
+++ b/beta/src/pages/apis/react/useRef.md
@@ -39,7 +39,7 @@ function Stopwatch() {
 
 `useRef` returns a <CodeStep step={1}>ref object</CodeStep> with a single <CodeStep step={2}>`current` property</CodeStep> initially set to the <CodeStep step={3}>initial value</CodeStep> you provided.
 
-On the next renders, `useRef` will return the same object. You can change its `current` property to store information and read it later. This might remind you of [state](/apis/usestate), but there is an important difference.
+On the next renders, `useRef` will return the same object. You can change its `current` property to store information and read it later. This might remind you of [state](/apis/react/useState), but there is an important difference.
 
 **Changing a ref does not trigger a re-render.** This means refs are perfect for storing information that doesn't affect the visual output of your component. For example, if you need to store an [interval ID](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) and retrieve it later, you can put it in a ref. To update the value inside the ref, you need to manually change its <CodeStep step={2}>`current` property</CodeStep>:
 
@@ -195,7 +195,7 @@ function MyComponent() {
 }
 ```
 
-If you *have to* read [or write](/apis/usestate#storing-information-from-previous-renders) something during rendering, [use state](/apis/usestate) instead.
+If you *have to* read [or write](/apis/react/useState#storing-information-from-previous-renders) something during rendering, [use state](/apis/react/useState) instead.
 
 When you break these rules, your component might still work, but most of the newer features we're adding to React will rely on these expectations. Read more about [keeping your components pure](/learn/keeping-components-pure#where-you-can-cause-side-effects).
 
@@ -417,7 +417,7 @@ button { display: block; margin-bottom: 20px; }
 
 ### Exposing a ref to your own component {/*exposing-a-ref-to-your-own-component*/}
 
-Sometimes, you may want to let the parent component manipulate the DOM inside of your component. For example, maybe you're writing a `MyInput` component, but you want the parent to be able to focus the input (which the parent has no access to). You can use a combination of `useRef` to hold the input and [`forwardRef`](/apis/forwardref) to expose it to the parent component. Read a [detailed walkthrough](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes) here.
+Sometimes, you may want to let the parent component manipulate the DOM inside of your component. For example, maybe you're writing a `MyInput` component, but you want the parent to be able to focus the input (which the parent has no access to). You can use a combination of `useRef` to hold the input and [`forwardRef`](/apis/react/forwardRef) to expose it to the parent component. Read a [detailed walkthrough](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes) here.
 
 <Sandpack>
 
@@ -578,7 +578,7 @@ export default function MyInput({ value, onChange }) {
 }
 ```
 
-And then wrap it in [`forwardRef`](/apis/forwardref) like this:
+And then wrap it in [`forwardRef`](/apis/react/forwardRef) like this:
 
 ```js {3,8}
 import { forwardRef } from 'react';
diff --git a/beta/src/pages/apis/usestate.md b/beta/src/pages/apis/react/useState.md
similarity index 99%
rename from beta/src/pages/apis/usestate.md
rename to beta/src/pages/apis/react/useState.md
index 9fa0916c..9d021545 100644
--- a/beta/src/pages/apis/usestate.md
+++ b/beta/src/pages/apis/react/useState.md
@@ -1013,7 +1013,7 @@ Usually, you will update state in event handlers. However, in rare cases you mig
 
 In most cases, you don't need this:
 
-* **If the value you need can be computed entirely from the current props or other state, [remove that redundant state altogether](/learn/choosing-the-state-structure#avoid-redundant-state).** If you're worried about recomputing too often, the [`useMemo` Hook](/apis/usememo) can help.
+* **If the value you need can be computed entirely from the current props or other state, [remove that redundant state altogether](/learn/choosing-the-state-structure#avoid-redundant-state).** If you're worried about recomputing too often, the [`useMemo` Hook](/apis/react/usememo) can help.
 * If you want to reset the entire component tree's state, [pass a different `key` to your component.](#resetting-state-with-a-key)
 * If you can, update all the relevant state in the event handlers.
 
@@ -1149,7 +1149,7 @@ function handleClick() {
 
 * If the new value you provide is identical to the current `state`, as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison, React will **skip re-rendering the component and its children.** This is an optimization. Although in some cases React may still need to call your component before skipping the children, it shouldn't affect your code.
 
-* React [batches state updates](/learn/queueing-a-series-of-state-updates). It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`](/apis/flushsync).
+* React [batches state updates](/learn/queueing-a-series-of-state-updates). It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`](/apis/react-dom/flushsync).
 
 * Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example above.](#storing-information-from-previous-renders)
 
@@ -1232,7 +1232,7 @@ If you can't find the cause of this error, click on the arrow next to the error
 
 ### My initializer or updater function runs twice {/*my-initializer-or-updater-function-runs-twice*/}
 
-In [Strict Mode](/apis/strictmode), React will call some of your functions twice instead of once:
+In [Strict Mode](/apis/react/strictmode), React will call some of your functions twice instead of once:
 
 ```js {2,5-6,11-12}
 function TodoList() {
@@ -1300,4 +1300,4 @@ const [fn, setFn] = useState(() => someFunction);
 function handleClick() {
   setFn(() => someOtherFunction);
 }
-```
\ No newline at end of file
+```
diff --git a/beta/src/pages/apis/react/useSyncExternalStore.md b/beta/src/pages/apis/react/useSyncExternalStore.md
new file mode 100644
index 00000000..1b78b388
--- /dev/null
+++ b/beta/src/pages/apis/react/useSyncExternalStore.md
@@ -0,0 +1,20 @@
+---
+title: useSyncExternalStore
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useSyncExternalStore](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore).
+
+</Wip>
+
+
+<Intro>
+
+`useSyncExternalStore` is a hook recommended for reading and subscribing from external data sources in a way that’s compatible with concurrent rendering features like selective hydration and time slicing.
+
+```js
+const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/react/useTransition.md b/beta/src/pages/apis/react/useTransition.md
new file mode 100644
index 00000000..a9e450c5
--- /dev/null
+++ b/beta/src/pages/apis/react/useTransition.md
@@ -0,0 +1,18 @@
+---
+title: useTransition
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [useTransition](https://reactjs.org/docs/hooks-reference.html#usetransition).
+
+</Wip>
+
+
+<Intro>
+
+```js
+const [isPending, startTransition] = useTransition();
+```
+
+</Intro>
diff --git a/beta/src/pages/apis/reactdom.md b/beta/src/pages/apis/reactdom.md
deleted file mode 100644
index a3030727..00000000
--- a/beta/src/pages/apis/reactdom.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: ReactDOM API
----
-
-<Intro>
-
-The ReactDOM package lets you render React components on a webpage.
-
-</Intro>
-
-Typically, you will use ReactDOM at the top level of your app to display your components. You will either use it directly or a [framework](/learn/start-a-new-react-project#building-with-react-and-a-framework) may do it for you. Most of your components should *not* need to import this module.
-
-## Installation {/*installation*/}
-
-<PackageImport>
-
-<TerminalBlock>
-
-npm install react-dom
-
-</TerminalBlock>
-
-```js
-// Importing a specific API:
-import { createRoot } from 'react-dom/client';
-
-// Importing all APIs together:
-import * as ReactDOMClient from 'react-dom/client';
-```
-
-</PackageImport>
-
-You'll also need to install the same version of [React](/apis/).
-
-## Browser Support {/*browser-support*/}
-
-ReactDOM supports all popular browsers, including Internet Explorer 9 and above. [Some polyfills are required](http://todo%20link%20to%20js%20environment%20requirements/) for older browsers such as IE 9 and IE 10.
-
-## Exports {/*exports*/}
-
-<YouWillLearnCard title="render" path="/apis/render">
-
-Displays a React component inside a browser DOM node.
-
-```js
-render(<App />, document.getElementById('root'));
-```
-
-</YouWillLearnCard>
-
-This section is incomplete and is still being written!
diff --git a/beta/src/pages/apis/reactdomclient.md b/beta/src/pages/apis/reactdomclient.md
deleted file mode 100644
index c09d902c..00000000
--- a/beta/src/pages/apis/reactdomclient.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: ReactDOM Client APIs
----
-
-<Intro>
-
-The ReactDOM client APIs let you render a React application in the browser.
-
-</Intro>
-
-Typically, you will use these APIs at the top level of your app to display your components. You will either use them directly or a [framework](/learn/start-a-new-react-project#building-with-react-and-a-framework) may do it for you. Most of your components should *not* need to import these APIs.
-
-
-Note: This section is incomplete and is still being written!
diff --git a/beta/src/pages/learn/add-react-to-a-website.md b/beta/src/pages/learn/add-react-to-a-website.md
index 129b31e2..635f5d83 100644
--- a/beta/src/pages/learn/add-react-to-a-website.md
+++ b/beta/src/pages/learn/add-react-to-a-website.md
@@ -227,7 +227,7 @@ If you're getting comfortable with build tools and want them to do more for you,
 Originally JSX was introduced to make writing components with React feel as familiar as writing HTML. Since then, the syntax has become widespread. However, there may be instances where you do not want to use or cannot use JSX. You have two options:
 
 - Use a JSX alternative like [htm](https://github.com/developit/htm) which uses JavaScript [template strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) instead of a compiler.
-- Use [`React.createElement()`](/apis/createelement) which has a special structure explained below.
+- Use [`React.createElement()`](/apis/react/createElement) which has a special structure explained below.
 
 With JSX, you would write a component like so:
 
diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index b2318d6a..393da035 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -76,7 +76,7 @@ Read **[Responding to Events](/learn/responding-to-events)** to learn how to add
 
 Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.*
 
-You can add state to a component with a [`useState`](/apis/usestate) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
+You can add state to a component with a [`useState`](/apis/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
 
 ```js
 const [index, setIndex] = useState(0);
diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 8fcb7130..300a80df 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -302,7 +302,7 @@ Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_
 
 Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component.
 
-First, import [`useState`](/apis/usestate) from React:
+First, import [`useState`](/apis/react/useState) from React:
 
 ```js {1,4}
 import { useState } from 'react';
@@ -382,7 +382,7 @@ Notice how each button "remembers" its own `count` state and doesn't affect othe
 
 ## Using Hooks {/*using-hooks*/}
 
-Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [React API reference](/apis). You can also write your own Hooks by combining the existing ones.
+Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [React API reference](/apis/react). You can also write your own Hooks by combining the existing ones.
 
 Hooks are more restrictive than regular functions. You can only call Hooks *at the top level* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there.
 
diff --git a/beta/src/pages/learn/keeping-components-pure.md b/beta/src/pages/learn/keeping-components-pure.md
index 5c950e26..44086a1b 100644
--- a/beta/src/pages/learn/keeping-components-pure.md
+++ b/beta/src/pages/learn/keeping-components-pure.md
@@ -193,7 +193,7 @@ While functional programming relies heavily on purity, at some point, somewhere,
 
 In React, **side effects usually belong inside [event handlers](/learn/responding-to-events).** Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined *inside* your component, they don't run *during* rendering! **So event handlers don't need to be pure.**
 
-If you've exhausted all other options and can't find the right event handler for your side effect, you can still attach it to your returned JSX with a [`useEffect`](/apis/useeffect) call in your component. This tells React to execute it later, after rendering, when side effects are allowed. **However, this approach should be your last resort.**
+If you've exhausted all other options and can't find the right event handler for your side effect, you can still attach it to your returned JSX with a [`useEffect`](/apis/react/useEffect) call in your component. This tells React to execute it later, after rendering, when side effects are allowed. **However, this approach should be your last resort.**
 
 When possible, try to express your logic with rendering alone. You'll be surprised how far this can take you!
 
diff --git a/beta/src/pages/learn/lifecycle-of-reactive-effects.md b/beta/src/pages/learn/lifecycle-of-reactive-effects.md
index cdfcbc1a..7062b867 100644
--- a/beta/src/pages/learn/lifecycle-of-reactive-effects.md
+++ b/beta/src/pages/learn/lifecycle-of-reactive-effects.md
@@ -579,7 +579,7 @@ Mutable values (including global variables) aren't reactive.
 
 **A mutable value like [`location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) can't be a dependency.** It's mutable, so it can change at any time completely outside of the React rendering data flow. Changing it wouldn't trigger a re-render of your component. Therefore, even if you specified it in the dependencies, React *wouldn't know* to re-synchronize the Effect when it changes. This also breaks the rules of React because reading mutable data during rendering (which is when you calculate the dependencies) breaks [purity of rendering.](/learn/keeping-components-pure) Instead, you should read and subscribe to an external mutable value with [`useSyncExternalStore`](/learn/you-might-not-need-an-effect#subscribing-to-an-external-store).
 
-**A mutable value like [`ref.current`](/apis/useref#reference) or things you read from it also can't be a dependency.** The ref object returned by `useRef` itself can be a dependency, but its `current` property is intentionally mutable. It lets you [keep track of something without triggering a re-render.](/learn/referencing-values-with-refs) But since changing it doesn't trigger a re-render, it's not a reactive value, and React won't know to re-run your Effect when it changes.
+**A mutable value like [`ref.current`](/apis/react/useRef#reference) or things you read from it also can't be a dependency.** The ref object returned by `useRef` itself can be a dependency, but its `current` property is intentionally mutable. It lets you [keep track of something without triggering a re-render.](/learn/referencing-values-with-refs) But since changing it doesn't trigger a re-render, it's not a reactive value, and React won't know to re-run your Effect when it changes.
 
 As you'll learn below on this page, a linter will check for these issues automatically.
 
@@ -683,7 +683,7 @@ Try this fix in the sandbox above. Verify that the linter error is gone, and tha
 
 <Note>
 
-In some cases, React *knows* that a value never changes even though it's declared inside the component. For example, the [`set` function](/apis/usestate#setstate) returned from `useState` and the ref object returned by [`useRef`](/apis/useref) are *stable*--they are guaranteed to not change on a re-render. Stable values aren't reactive, so the linter lets you omit them from the list. However, including them is allowed: they won't change, so it doesn't matter.
+In some cases, React *knows* that a value never changes even though it's declared inside the component. For example, the [`set` function](/apis/react/useState#setstate) returned from `useState` and the ref object returned by [`useRef`](/apis/react/useRef) are *stable*--they are guaranteed to not change on a re-render. Stable values aren't reactive, so the linter lets you omit them from the list. However, including them is allowed: they won't change, so it doesn't matter.
 
 </Note>
 
diff --git a/beta/src/pages/learn/reacting-to-input-with-state.md b/beta/src/pages/learn/reacting-to-input-with-state.md
index 7cf077e4..23895e2a 100644
--- a/beta/src/pages/learn/reacting-to-input-with-state.md
+++ b/beta/src/pages/learn/reacting-to-input-with-state.md
@@ -344,7 +344,7 @@ Form states
 
 ### Step 3: Represent the state in memory with `useState` {/*step-3-represent-the-state-in-memory-with-usestate*/}
 
-Next you'll need to represent the visual states of your component in memory with [`useState`](/apis/usestate). Simplicity is key: each piece of state is a "moving piece", and **you want as few "moving pieces" as possible**. More complexity leads to more bugs!
+Next you'll need to represent the visual states of your component in memory with [`useState`](/apis/react/useState). Simplicity is key: each piece of state is a "moving piece", and **you want as few "moving pieces" as possible**. More complexity leads to more bugs!
 
 Start with the state that *absolutely must* be there. For example, you'll need to store the `answer` for the input, and the `error` (if it exists) to store the last error:
 
diff --git a/beta/src/pages/learn/render-and-commit.md b/beta/src/pages/learn/render-and-commit.md
index 28297dec..4c0fabd1 100644
--- a/beta/src/pages/learn/render-and-commit.md
+++ b/beta/src/pages/learn/render-and-commit.md
@@ -69,7 +69,7 @@ Try commenting out the `ReactDOM.render` call and see the component disappear!
 
 ### Re-renders when state updates {/*re-renders-when-state-updates*/}
 
-Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function](/apis/usestate#setstate). Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
+Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function](/apis/react/useState#setstate). Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
 
 <IllustrationBlock sequential>
   <Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index f89541a7..300128e5 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -231,7 +231,7 @@ If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-abo
 
 ### Naming event handler props {/*naming-event-handler-props*/}
 
-Built-in components like `<button>` and `<div>` only support [browser event names](/apis/reactdom-api) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
+Built-in components like `<button>` and `<div>` only support [browser event names](/apis/react-dom/events) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
 
 > By convention, event handler props should start with `on`, followed by a capital letter.
 
@@ -738,4 +738,4 @@ export default function App() {
 
 </Solution>
 
-</Challenges>
\ No newline at end of file
+</Challenges>
diff --git a/beta/src/pages/learn/state-a-components-memory.md b/beta/src/pages/learn/state-a-components-memory.md
index fd09d6ec..ac79f3f2 100644
--- a/beta/src/pages/learn/state-a-components-memory.md
+++ b/beta/src/pages/learn/state-a-components-memory.md
@@ -10,7 +10,7 @@ Components often need to change what's on the screen as a result of an interacti
 
 <YouWillLearn>
 
-* How to add a state variable with the [`useState`](/apis/usestate) Hook
+* How to add a state variable with the [`useState`](/apis/react/useState) Hook
 * What pair of values the `useState` Hook returns
 * How to add more than one state variable
 * Why state is called local
@@ -161,7 +161,7 @@ To update a component with new data, two things need to happen:
 1. **Retain** the data between renders.
 2. **Trigger** React to render the component with new data (re-rendering).
 
-The [`useState`](/apis/usestate) Hook provides those two things:
+The [`useState`](/apis/react/useState) Hook provides those two things:
 
 1. A **state variable** to retain the data between renders.
 2. A **state setter function** to update the variable and trigger React to render the component again.
@@ -347,7 +347,7 @@ State is just one of those features, but you will meet the other Hooks later.
 
 ### Anatomy of `useState` {/*anatomy-of-usestate*/}
 
-When you call [`useState`](/apis/usestate), you are telling React that you want this component to remember something:
+When you call [`useState`](/apis/react/useState), you are telling React that you want this component to remember something:
 
 ```js
 const [index, setIndex] = useState(0);
@@ -1501,4 +1501,4 @@ A state variable is only necessary to keep information between re-renders of a c
 
 </Solution>
 
-</Challenges>
\ No newline at end of file
+</Challenges>
diff --git a/beta/src/pages/learn/synchronizing-with-effects.md b/beta/src/pages/learn/synchronizing-with-effects.md
index e97d37a7..10118e24 100644
--- a/beta/src/pages/learn/synchronizing-with-effects.md
+++ b/beta/src/pages/learn/synchronizing-with-effects.md
@@ -397,7 +397,7 @@ video { width: 250px; }
 
 </Sandpack>
 
-The dependency array can contain multiple dependencies. React will only skip re-running the Effect if *all* of the dependencies you specify have exactly the same values as they had during the previous render. React compares the dependency values using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. See the [`useEffect` API reference](/apis/useeffect#reference) for more details.
+The dependency array can contain multiple dependencies. React will only skip re-running the Effect if *all* of the dependencies you specify have exactly the same values as they had during the previous render. React compares the dependency values using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. See the [`useEffect` API reference](/apis/react/useEffect#reference) for more details.
 
 **Notice that you can't "choose" your dependencies.** You will get a lint error if the dependencies you specified don't match what React expects based on the code inside your Effect. This helps catch many bugs in your code. If your Effect uses some value but you *don't* want to re-run the Effect when it changes, you'll need to [*edit the Effect code itself* to not "need" that dependency.](/learn/lifecycle-of-reactive-effects#what-to-do-when-you-dont-want-to-re-synchronize)
 
@@ -439,7 +439,7 @@ function VideoPlayer({ src, isPlaying }) {
   }, [isPlaying]);
 ```
 
-This is because the `ref` object has a *stable identity:* React guarantees [you'll always get the same object](/apis/useref#returns) from the same `useRef` call on every render. It never changes, so it will never by itself cause the Effect to re-run. Therefore, it does not matter whether you include it or not. Including it is fine too:
+This is because the `ref` object has a *stable identity:* React guarantees [you'll always get the same object](/apis/react/useRef#returns) from the same `useRef` call on every render. It never changes, so it will never by itself cause the Effect to re-run. Therefore, it does not matter whether you include it or not. Including it is fine too:
 
 ```js {9}
 function VideoPlayer({ src, isPlaying }) {
@@ -453,7 +453,7 @@ function VideoPlayer({ src, isPlaying }) {
   }, [isPlaying, ref]);
 ```
 
-The [`set` functions](/apis/usestate#setstate) returned by `useState` also have stable identity, so you will often see them omitted from the dependencies too. If the linter lets you omit a dependency without errors, it is safe to do.
+The [`set` functions](/apis/react/useState#setstate) returned by `useState` also have stable identity, so you will often see them omitted from the dependencies too. If the linter lets you omit a dependency without errors, it is safe to do.
 
 Omitting always-stable dependencies only works when the linter can "see" that the object is stable. For example, if `ref` was passed from a parent component, you would have to specify it in the dependency array. However, this is good because you can't know whether the parent component always passes the same ref, or passes one of several refs conditionally. So your Effect _would_ depend on which ref is passed.
 
@@ -584,7 +584,7 @@ Now you get three console logs in development:
 
 **This is the correct behavior in development.** By remounting your component, React verifies that navigating away and back would not break your code. Disconnecting and then connecting again is exactly what should happen! When you implement the cleanup well, there should be no user-visible difference between running the Effect once vs running it, cleaning it up, and running it again. There's an extra connect/disconnect call pair because React is probing your code for bugs in development. This is normal and you shouldn't try to make it go away.
 
-**In production, you would only see `"✅ Connecting..."` printed once.** Remounting components only happens in development to help you find Effects that need cleanup. You can turn off [Strict Mode](/apis/strictmode) to opt out of the development behavior, but we recommend keeping it on. This lets you find many bugs like the one above.
+**In production, you would only see `"✅ Connecting..."` printed once.** Remounting components only happens in development to help you find Effects that need cleanup. You can turn off [Strict Mode](/apis/react/StrictMode) to opt out of the development behavior, but we recommend keeping it on. This lets you find many bugs like the one above.
 
 ## How to handle the Effect firing twice in development? {/*how-to-handle-the-effect-firing-twice-in-development*/}
 
@@ -935,7 +935,7 @@ Finally, let's say the user navigates away, and the `ChatRoom` component unmount
 
 #### Development-only behaviors {/*development-only-behaviors*/}
 
-When [Strict Mode](/apis/strictmode) is on, React remounts every component once after mount (state and DOM are preserved). This [helps you find Effects that need cleanup](#step-3-add-cleanup-if-needed) and exposes bugs like race conditions early. Additionally, React will remount the Effects whenever you save a file in development. Both of these behaviors are development-only.
+When [Strict Mode](/apis/react/StrictMode) is on, React remounts every component once after mount (state and DOM are preserved). This [helps you find Effects that need cleanup](#step-3-add-cleanup-if-needed) and exposes bugs like race conditions early. Additionally, React will remount the Effects whenever you save a file in development. Both of these behaviors are development-only.
 
 </DeepDive>
 
@@ -1365,7 +1365,7 @@ body {
 
 <Solution>
 
-When [Strict Mode](/apis/strictmode) is on (like in the sandboxes on this site), React remounts each component once in development. This causes the interval to be set up twice, and this is why each second the counter increments twice.
+When [Strict Mode](/apis/StrictMode) is on (like in the sandboxes on this site), React remounts each component once in development. This causes the interval to be set up twice, and this is why each second the counter increments twice.
 
 However, React's behavior is not the *cause* of the bug: the bug already exists in the code. React's behavior makes the bug more noticeable. The real cause is that this Effect starts a process but doesn't provide a way to clean it up.
 
diff --git a/beta/src/pages/learn/thinking-in-react.md b/beta/src/pages/learn/thinking-in-react.md
index eca38579..1291ace0 100644
--- a/beta/src/pages/learn/thinking-in-react.md
+++ b/beta/src/pages/learn/thinking-in-react.md
@@ -271,7 +271,7 @@ Now let's run through our strategy for this state:
 
 So the state values will live in `FilterableProductTable`. 
 
-Add state to the component with the [`useState()` Hook](/apis/usestate). Hooks let you "hook into" a component's [render cycle](/learn/render-and-commit). Add two state variables at the top of `FilterableProductTable` and specify the initial state of your application:
+Add state to the component with the [`useState()` Hook](/apis/react/useState). Hooks let you "hook into" a component's [render cycle](/learn/render-and-commit). Add two state variables at the top of `FilterableProductTable` and specify the initial state of your application:
 
 ```js
 function FilterableProductTable({ products }) {
diff --git a/beta/src/pages/learn/you-might-not-need-an-effect.md b/beta/src/pages/learn/you-might-not-need-an-effect.md
index bd20c7a7..15fd1010 100644
--- a/beta/src/pages/learn/you-might-not-need-an-effect.md
+++ b/beta/src/pages/learn/you-might-not-need-an-effect.md
@@ -93,7 +93,7 @@ function TodoList({ todos, filter }) {
 
 In many cases, this code is fine! But maybe `getFilteredTodos()` is slow or you have a lot of `todos`. In that case you don't want to recalculate `getFilteredTodos()` if some unrelated state variable like `newTodo` has changed.
 
-You can cache (or ["memoize"](https://en.wikipedia.org/wiki/Memoization)) an expensive calculation by wrapping it in a [`useMemo`](/apis/usememo) Hook:
+You can cache (or ["memoize"](https://en.wikipedia.org/wiki/Memoization)) an expensive calculation by wrapping it in a [`useMemo`](/apis/react/useMemo) Hook:
 
 ```js {5-8}
 import { useMemo, useState } from 'react';
@@ -123,7 +123,7 @@ function TodoList({ todos, filter }) {
 
 **This tells React that you don't want the inner function to re-run unless either `todos` or `filter` have changed.** React will remember the return value of `getFilteredTodos()` during the initial render. During the next renders, it will check if `todos` or `filter` are different. If they're the same as last time, `useMemo` will return the last result it has stored. But if they are different, React will call the wrapped function again (and store _that_ result instead).
 
-The function you wrap in [`useMemo`](/apis/usememo) runs during rendering, so this only works for [pure calculations](/learn/keeping-components-pure).
+The function you wrap in [`useMemo`](/apis/react/useMemo) runs during rendering, so this only works for [pure calculations](/learn/keeping-components-pure).
 
 <DeepDive title="How to tell if a calculation is expensive?">
 
@@ -149,7 +149,7 @@ console.timeEnd('filter array');
 
 Keep in mind that your machine is probably faster than your users' so it's a good idea to test the performance with an artificial slowdown. For example, Chrome offers a [CPU Throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling) option for this.
 
-Also note that measuring performance in development will not give you the most accurate results. (For example, when [Strict Mode](/apis/strictmode) is on, you will see each component render twice rather than once.) To get the most accurate timings, build your app for production and test it on a device like your users have.
+Also note that measuring performance in development will not give you the most accurate results. (For example, when [Strict Mode](/apis/react/StrictMode) is on, you will see each component render twice rather than once.) To get the most accurate timings, build your app for production and test it on a device like your users have.
 
 </DeepDive>
 
@@ -232,7 +232,7 @@ function List({ items }) {
 }
 ```
 
-[Storing information from previous renders](/apis/usestate#storing-information-from-previous-renders) like this can be hard to understand, but it’s better than updating the same state in an Effect. In the above example, `setSelection` is called directly during a render. React will re-render the `List` *immediately* after it exits with a `return` statement. By that point, React hasn't rendered the `List` children or updated the DOM yet, so this lets the `List` children skip rendering the stale `selection` value.
+[Storing information from previous renders](/apis/react/useState#storing-information-from-previous-renders) like this can be hard to understand, but it’s better than updating the same state in an Effect. In the above example, `setSelection` is called directly during a render. React will re-render the `List` *immediately* after it exits with a `return` statement. By that point, React hasn't rendered the `List` children or updated the DOM yet, so this lets the `List` children skip rendering the stale `selection` value.
 
 When you update a component during rendering, React throws away the returned JSX and immediately retries rendering. To avoid very slow cascading retries, React only lets you update the *same* component's state during a render. If you update another component's state during a render, you'll see an error. A condition like `items !== prevItems` is necessary to avoid loops. You may adjust state like this, but any other side effects (like changing the DOM or setting a timeout) should remain in event handlers or Effects to [keep your components predictable](/learn/keeping-components-pure).
 
@@ -656,7 +656,7 @@ function ChatIndicator() {
 
 Here, the component subscribes to an external data store (in this case, the browser `navigator.onLine` API). Since this API does not exist on the server (so it can't be used to generate the initial HTML), initially the state is set to `true`. Whenever the value of that data store changes in the browser, the component updates its state.
 
-Although it's common to use Effects for this, React has a purpose-built Hook for subscribing to an external store that is preferred instead. Delete the Effect and replace it with a call to [`useSyncExternalStore`](/apis/usesyncexternalstore):
+Although it's common to use Effects for this, React has a purpose-built Hook for subscribing to an external store that is preferred instead. Delete the Effect and replace it with a call to [`useSyncExternalStore`](/apis/react/usesyncexternalstore):
 
 ```js {11-16}
 function subscribe(callback) {
diff --git a/beta/src/sidebarReference.json b/beta/src/sidebarReference.json
index 83c45540..e4f926e2 100644
--- a/beta/src/sidebarReference.json
+++ b/beta/src/sidebarReference.json
@@ -9,51 +9,225 @@
       "routes": [
         {
           "title": "React APIs",
-          "path": "/apis",
+          "path": "/apis/react",
           "routes": [
             {
-              "title": "createContext()",
-              "path": "/apis/createcontext"
+              "title": "Children",
+              "path": "/apis/react/Children",
+              "wip": true
             },
             {
-              "title": "useContext()",
-              "path": "/apis/usecontext"
+              "title": "cloneElement",
+              "path": "/apis/react/cloneElement",
+              "wip": true
             },
             {
-              "title": "useReducer()",
-              "path": "/apis/usereducer"
+              "title": "Component",
+              "path": "/apis/react/Component",
+              "wip": true
             },
             {
-              "title": "useRef()",
-              "path": "/apis/useref"
+              "title": "createContext",
+              "path": "/apis/react/createContext"
             },
             {
-              "title": "useState()",
-              "path": "/apis/usestate"
+              "title": "createElement",
+              "path": "/apis/react/createElement",
+              "wip": true
+            },
+            {
+              "title": "createFactory",
+              "path": "/apis/react/createFactory",
+              "wip": true
+            },
+            {
+              "title": "createRef",
+              "path": "/apis/react/createRef",
+              "wip": true
+            },
+            {
+              "title": "forwardRef",
+              "path": "/apis/react/forwardRef",
+              "wip": true
+            },
+            {
+              "title": "Fragment",
+              "path": "/apis/react/Fragment",
+              "wip": true
+            },
+            {
+              "title": "isValidElement",
+              "path": "/apis/react/isValidElement",
+              "wip": true
+            },
+            {
+              "title": "lazy",
+              "path": "/apis/react/lazy",
+              "wip": true
+            },
+            {
+              "title": "memo",
+              "path": "/apis/react/memo",
+              "wip": true
+            },
+            {
+              "title": "PureComponent",
+              "path": "/apis/react/PureComponent",
+              "wip": true
+            },
+            {
+              "title": "startTransition",
+              "path": "/apis/react/startTransition",
+              "wip": true
+            },
+            {
+              "title": "StrictMode",
+              "path": "/apis/react/StrictMode",
+              "wip": true
+            },
+            {
+              "title": "Suspense",
+              "path": "/apis/react/Suspense",
+              "wip": true
+            },
+            {
+              "title": "useCallback",
+              "path": "/apis/react/useCallback",
+              "wip": true
+            },
+            {
+              "title": "useContext",
+              "path": "/apis/react/useContext"
+            },
+            {
+              "title": "useDebugValue",
+              "path": "/apis/react/useDebugValue",
+              "wip": true
+            },
+            {
+              "title": "useDeferredValue",
+              "path": "/apis/react/useDeferredValue",
+              "wip": true
+            },
+            {
+              "title": "useEffect",
+              "path": "/apis/react/useEffect",
+              "wip": true
+            },
+            {
+              "title": "useId",
+              "path": "/apis/react/useId",
+              "wip": true
+            },
+            {
+              "title": "useImperativeHandle",
+              "path": "/apis/react/useImperativeHandle",
+              "wip": true
+            },
+            {
+              "title": "useInsertionEffect",
+              "path": "/apis/react/useInsertionEffect",
+              "wip": true
+            },
+            {
+              "title": "useMemo",
+              "path": "/apis/react/useMemo",
+              "wip": true
+            },
+            {
+              "title": "useReducer",
+              "path": "/apis/react/useReducer"
+            },
+            {
+              "title": "useRef",
+              "path": "/apis/react/useRef"
+            },
+            {
+              "title": "useState",
+              "path": "/apis/react/useState"
+            },
+            {
+              "title": "useSyncExternalStore",
+              "path": "/apis/react/useSyncExternalStore",
+              "wip": true
+            },
+            {
+              "title": "useTransition",
+              "path": "/apis/react/useTransition",
+              "wip": true
             }
           ]
         },
         {
           "title": "ReactDOM APIs",
-          "path": "/apis/reactdom",
+          "path": "/apis/react-dom",
           "routes": [
             {
-              "title": "render()",
-              "path": "/apis/render"
-            }
-          ]
-        },
-        {
-          "title": "ReactDOM Client APIs",
-          "path": "/apis/reactdomclient",
-          "routes": [
+              "title": "createRoot",
+              "path": "/apis/react-dom/client/createRoot"
+            },
+            {
+              "title": "createPortal",
+              "path": "/apis/react-dom/createPortal",
+              "wip": true
+            },
+            {
+              "title": "findDOMNode",
+              "path": "/apis/react-dom/findDOMNode",
+              "wip": true
+            },
+            {
+              "title": "flushSync",
+              "path": "/apis/react-dom/flushSync",
+              "wip": true
+            },
+            {
+              "title": "hydrate",
+              "path": "/apis/react-dom/hydrate",
+              "wip": true
+            },
+            {
+              "title": "hydrateRoot",
+              "path": "/apis/react-dom/client/hydrateRoot"
+            },
+            {
+              "title": "render",
+              "path": "/apis/react-dom/render"
+            },
+            {
+              "title": "renderToNodeStream",
+              "path": "/apis/react-dom/server/renderToNodeStream",
+              "wip": true
+            },
+            {
+              "title": "renderToPipeableStream",
+              "path": "/apis/react-dom/server/renderToPipeableStream",
+              "wip": true
+            },
+            {
+              "title": "renderToReadableStream",
+              "path": "/apis/react-dom/server/renderToReadableStream",
+              "wip": true
+            },
+            {
+              "title": "renderToStaticMarkup",
+              "path": "/apis/react-dom/server/renderToStaticMarkup",
+              "wip": true
+            },
+            {
+              "title": "renderToStaticNodeStream",
+              "path": "/apis/react-dom/server/renderToStaticNodeStream",
+              "wip": true
+            },
             {
-              "title": "createRoot()",
-              "path": "/apis/createRoot"
+              "title": "renderToString",
+              "path": "/apis/react-dom/server/renderToString",
+              "wip": true
             },
             {
-              "title": "hydrateRoot()",
-              "path": "/apis/hydrateRoot"
+              "title": "unmountComponentAtNode",
+              "path": "/apis/react-dom/unmountComponentAtNode",
+              "wip": true
             }
           ]
         }
diff --git a/beta/vercel.json b/beta/vercel.json
index 1e94a9b5..b8207722 100644
--- a/beta/vercel.json
+++ b/beta/vercel.json
@@ -253,6 +253,51 @@
       "source": "/version/16.0",
       "destination": "https://5a046bf5a6188f4b8fa4938a--reactjs.netlify.com",
       "permanent": false
+    },
+    {
+      "source": "/apis/createcontext",
+      "destination": "/apis/react/createContext",
+      "permanent": true
+    },
+    {
+      "source": "/apis/usecontext",
+      "destination": "/apis/react/useContext",
+      "permanent": true
+    },
+    {
+      "source": "/apis/usereducer",
+      "destination": "/apis/react/useReducer",
+      "permanent": true
+    },
+    {
+      "source": "/apis/useref",
+      "destination": "/apis/react/useRef",
+      "permanent": true
+    },
+    {
+      "source": "/apis/usestate",
+      "destination": "/apis/react/useState",
+      "permanent": true
+    },
+    {
+      "source": "/apis",
+      "destination": "/apis/react",
+      "permanent": true
+    },
+    {
+      "source": "/apis/reactdom",
+      "destination": "/apis/react-dom",
+      "permanent": true
+    },
+    {
+      "source": "/apis/render",
+      "destination": "/apis/react-dom/render",
+      "permanent": true
+    },
+    {
+      "source": "/apis/createportal",
+      "destination": "/apis/react-dom/createPortal",
+      "permanent": true
     }
   ],
   "headers": [