[Beta] Split ReactDOM APIs (#5052)

beta/src/content/apis/react-dom/client/index.md

@@ -0,0 +1,62 @@
+---
+title: ReactDOMClient APIs
+---
+
+<Intro>
+
+The ReactDOMClient APIs let you render React components in the browser.
+
+</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*/}
+
+<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>
+

beta/src/content/apis/react-dom/index.md

@@ -11,11 +11,11 @@ This section is incomplete, please see the old docs for [ReactDOM](https://react
 
 <Intro>
 
-The ReactDOM package lets you render React components on a webpage.
+The ReactDOM package provides DOM-specific methods that your components can import.
 
 </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.
+Most of your components should *not* need to import this module.
 
 ## Installation {/*installation*/}
 
@@ -29,20 +29,16 @@ npm install react-dom
 
 ```js
 // Importing a specific API:
-import { createRoot } from 'react-dom/client';
+import { createPortal } from 'react-dom';
 
 // Importing all APIs together:
-import * as ReactDOMClient from 'react-dom/client';
+import * as ReactDOM from 'react-dom';
 ```
 
 </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*/}
@@ -71,111 +67,46 @@ flushSync(() => {
 
 </YouWillLearnCard>
 
-### Client APIs {/*clientapis*/}
+### Deprecated {/*deprecated*/}
-
-<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">
+<YouWillLearnCard title="render" path="/apis/react-dom/render">
 
-Render a React element to a string.
+Displays a React component inside a browser DOM node (deprecated).
 
 ```js
-renderToString(element)
+render(<App />, document.getElementById('root'));
 ```
 
 </YouWillLearnCard>
 
-<YouWillLearnCard title="renderToStaticMarkup" path="/apis/react-dom/server/renderToStaticMarkup">
+<YouWillLearnCard title="hydrate" path="/apis/react-dom/hydrate">
 
-Render a React element to static markup.
+Hydrate server-rendered HTMl (deprecated).
 
 ```js
-renderToStaticMarkup(element)
+hydrate(<App />, document.getElementById('root'));
 ```
 
 </YouWillLearnCard>
 
-### Deprecated {/*deprecated*/}
+## Entry points {/*entry-points*/}
 
-<YouWillLearnCard title="render" path="/apis/react-dom/render">
+<YouWillLearnCard title="ReactDOMClient APIs" path="/apis/react-dom/client">
 
-Displays a React component inside a browser DOM node (deprecated).
+The ReactDOMClient APIs let you render React components in the browser.
 
 ```js
-render(<App />, document.getElementById('root'));
+import * as ReactDOMClient from 'react-dom/client';
 ```
 
 </YouWillLearnCard>
 
-<YouWillLearnCard title="hydrate" path="/apis/react-dom/hydrate">
+<YouWillLearnCard title="ReactDOMServer APIs" path="/apis/react-dom/server">
 
-Hydrate server-rendered HTMl (deprecated).
+The ReactDOMServer APIs let you render React components to HTML.
 
 ```js
-hydrate(<App />, document.getElementById('root'));
+import * as ReactDOMServer from 'react-dom/server';
 ```
 
 </YouWillLearnCard>
-
-This section is incomplete and is still being written!

beta/src/content/apis/react-dom/server/index.md

@@ -0,0 +1,102 @@
+---
+title: ReactDOMServer APIs
+---
+
+<Wip>
+
+This section is incomplete, please see the old docs for [ReactDOM](https://reactjs.org/docs/react-dom.html).
+
+</Wip>
+
+
+<Intro>
+
+The ReactDOMServer APIs let you render React components to HTML.
+
+</Intro>
+
+Typically, you will run ReactDOMServer on the server to generate your app's initial HTML. 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 { renderToPipeableStream } from 'react-dom/server';
+
+// Importing all APIs together:
+import * as ReactDOMServer from 'react-dom/server';
+```
+
+</PackageImport>
+
+You'll also need to install the same version of [React](/apis/react).
+
+## Exports {/*exports*/}
+
+<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>

beta/src/content/apis/react/index.md

@@ -426,6 +426,3 @@ useDebugValue('Custom Label');
 
 </YouWillLearnCard>
 
-
-This section is incomplete and is still being written!
-

beta/src/sidebarReference.json

@@ -165,10 +165,6 @@
           "title": "ReactDOM APIs",
           "path": "/apis/react-dom",
           "routes": [
-            {
-              "title": "createRoot",
-              "path": "/apis/react-dom/client/createRoot"
-            },
             {
               "title": "createPortal",
               "path": "/apis/react-dom/createPortal",
@@ -188,14 +184,35 @@
               "title": "hydrate",
               "path": "/apis/react-dom/hydrate"
             },
-            {
-              "title": "hydrateRoot",
-              "path": "/apis/react-dom/client/hydrateRoot"
-            },
             {
               "title": "render",
               "path": "/apis/react-dom/render"
             },
+            {
+              "title": "unmountComponentAtNode",
+              "path": "/apis/react-dom/unmountComponentAtNode",
+              "wip": true
+            }
+          ]
+        },
+        {
+          "title": "ReactDOMClient APIs",
+          "path": "/apis/react-dom/client",
+          "routes": [
+            {
+              "title": "createRoot",
+              "path": "/apis/react-dom/client/createRoot"
+            },
+            {
+              "title": "hydrateRoot",
+              "path": "/apis/react-dom/client/hydrateRoot"
+            }
+          ]
+        },
+        {
+          "title": "ReactDOMServer APIs",
+          "path": "/apis/react-dom/server",
+          "routes": [
             {
               "title": "renderToNodeStream",
               "path": "/apis/react-dom/server/renderToNodeStream",
@@ -225,11 +242,6 @@
               "title": "renderToString",
               "path": "/apis/react-dom/server/renderToString",
               "wip": true
-            },
-            {
-              "title": "unmountComponentAtNode",
-              "path": "/apis/react-dom/unmountComponentAtNode",
-              "wip": true
             }
           ]
         }