[Beta] APIs -> Reference (#5400)

* [Beta] APIs -> Reference

* oops

beta/src/components/Layout/Footer.tsx

@@ -112,11 +112,13 @@ export function Footer() {
               </FooterLink>
             </div>
             <div className="flex flex-col">
-              <FooterLink href="/apis/react" isHeader={true}>
+              <FooterLink href="/reference/react" isHeader={true}>
                 API Reference
               </FooterLink>
-              <FooterLink href="/apis/react">React APIs</FooterLink>
-              <FooterLink href="/apis/react-dom">React DOM APIs</FooterLink>
+              <FooterLink href="/reference/react">React APIs</FooterLink>
+              <FooterLink href="/reference/react-dom">
+                React DOM APIs
+              </FooterLink>
             </div>
             <div className="flex flex-col sm:col-start-2 xl:col-start-4">
               <FooterLink href="/" isHeader={true}>

beta/src/components/Layout/Nav/Nav.tsx

@@ -20,7 +20,7 @@ import {SidebarContext} from 'components/Layout/useRouteMeta';
 import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
 import type {RouteItem} from '../useRouteMeta';
 import sidebarLearn from '../../../sidebarLearn.json';
-import sidebarAPIs from '../../../sidebarAPIs.json';
+import sidebarReference from '../../../sidebarReference.json';
 
 declare global {
   interface Window {
@@ -117,8 +117,8 @@ export default function Nav() {
       case 'learn':
         routeTree = sidebarLearn as RouteItem;
         break;
-      case 'apis':
-        routeTree = sidebarAPIs as RouteItem;
+      case 'reference':
+        routeTree = sidebarReference as RouteItem;
         break;
     }
   }
@@ -185,7 +185,7 @@ export default function Nav() {
       });
   }, [showFeedback]);
 
-  function selectTab(nextTab: 'learn' | 'apis') {
+  function selectTab(nextTab: 'learn' | 'reference') {
     setTab(nextTab);
     scrollParentRef.current!.scrollTop = 0;
   }
@@ -252,8 +252,8 @@ export default function Nav() {
             isActive={section === 'learn' || section === 'home'}>
             Learn
           </NavLink>
-          <NavLink href="/apis/react" isActive={section === 'apis'}>
-            API
+          <NavLink href="/reference/react" isActive={section === 'reference'}>
+            Reference
           </NavLink>
         </div>
         <div className="flex my-4 h-10 mx-0 w-full lg:hidden justify-end lg:max-w-sm">
@@ -318,9 +318,9 @@ export default function Nav() {
             Learn
           </TabButton>
           <TabButton
-            isActive={tab === 'apis'}
-            onClick={() => selectTab('apis')}>
-            API
+            isActive={tab === 'reference'}
+            onClick={() => selectTab('reference')}>
+            Reference
           </TabButton>
         </div>
       )}

beta/src/components/Layout/Page.tsx

@@ -12,7 +12,7 @@ import {Footer} from './Footer';
 import {Toc} from './Toc';
 import SocialBanner from '../SocialBanner';
 import sidebarLearn from '../../sidebarLearn.json';
-import sidebarAPIs from '../../sidebarAPIs.json';
+import sidebarReference from '../../sidebarReference.json';
 import type {TocItem} from 'components/MDX/TocContext';
 
 interface PageProps {
@@ -25,8 +25,8 @@ export function Page({children, toc}: PageProps) {
   const section = useActiveSection();
   let routeTree = sidebarLearn as RouteItem;
   switch (section) {
-    case 'apis':
-      routeTree = sidebarAPIs as RouteItem;
+    case 'reference':
+      routeTree = sidebarReference as RouteItem;
       break;
   }
   return (

beta/src/components/MDX/HomepageHero.tsx

@@ -29,7 +29,7 @@ function HomepageHero() {
           </YouWillLearnCard>
         </div>
         <div className="flex flex-col justify-center">
-          <YouWillLearnCard title="API Reference" path="/apis/react">
+          <YouWillLearnCard title="API Reference" path="/reference/react">
             <p>
               Look up the API of React Hooks, and see their shape with
               color-coded signatures.

beta/src/content/learn/add-react-to-a-website.md

@@ -229,7 +229,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/react/createElement) which has a special structure explained below.
+- Use [`React.createElement()`](/reference/react/createElement) which has a special structure explained below.
 
 With JSX, you would write a component like so:
 

beta/src/content/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/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.
+You can add state to a component with a [`useState`](/reference/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);

beta/src/content/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/react/useState) from React:
+First, import [`useState`](/reference/react/useState) from React:
 
 ```js
 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/react) 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.](/reference/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.
 

beta/src/content/learn/keeping-components-pure.md

@@ -195,7 +195,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/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.**
+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`](/reference/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!
 
@@ -206,7 +206,7 @@ When possible, try to express your logic with rendering alone. You'll be surpris
 Writing pure functions takes some habit and discipline. But it also unlocks marvelous opportunities:
 
 * Your components could run in a different environment—for example, on the server! Since they return the same result for the same inputs, one component can serve many user requests.
-* You can improve performance by [skipping rendering](/apis/react/memo) components whose inputs have not changed. This is safe because pure functions always return the same results, so they are safe to cache.
+* You can improve performance by [skipping rendering](/reference/react/memo) components whose inputs have not changed. This is safe because pure functions always return the same results, so they are safe to cache.
 * If some data changes in the middle of rendering a deep component tree, React can restart rendering without wasting time to finish the outdated render. Purity makes it safe to stop calculating at any time.
 
 Every new React feature we're building takes advantage of purity. From data fetching to animations to performance, keeping components pure unlocks the power of the React paradigm.

beta/src/content/learn/lifecycle-of-reactive-effects.md

@@ -581,7 +581,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/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.
+**A mutable value like [`ref.current`](/reference/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.
 
@@ -685,7 +685,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/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.
+In some cases, React *knows* that a value never changes even though it's declared inside the component. For example, the [`set` function](/reference/react/useState#setstate) returned from `useState` and the ref object returned by [`useRef`](/reference/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>