Add stub pages for all React and ReactDOM APIs (reactjs#4910)

* Add ReactDOM Client APIs

* Feedback fixes

* TODO and link fixes

* Update createRoot.md

* Nits

* Nits

* Update reactdomclient.md

* Update hydrateRoot.md

* Update hydrateRoot.md

* Update createRoot.md

* Update hydrateRoot.md

* createRoot tweaks

* bla

* tweaks

* tweaks

* tweak

* bump

* Add another troubleshooting error

* Add stubs for React.* APIs

* Add and organize remaining APIs

* Update links

* fix whitespace

* Add re-directs for old API URLs

* Fix some links

* Add StrictMode

Co-authored-by: dan <dan.abramov@gmail.com>

Author: rickhanlonii

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.**
 

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}>

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>

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', {

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>
         );

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[];
 }

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) {

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.

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,