diff --git a/beta/src/content/apis/react-dom/client/index.md b/beta/src/content/apis/react-dom/client/index.md
new file mode 100644
index 00000000..14839890
--- /dev/null
+++ b/beta/src/content/apis/react-dom/client/index.md
@@ -0,0 +1,62 @@
+---
+title: ReactDOMClient APIs
+---
+
+
+
+The ReactDOMClient APIs let you render React components in the browser.
+
+
+
+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*/}
+
+
+
+
+
+npm install react-dom
+
+
+
+```js
+// Importing a specific API:
+import { createRoot } from 'react-dom/client';
+
+// Importing all APIs together:
+import * as ReactDOMClient from 'react-dom/client';
+```
+
+
+
+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*/}
+
+
+
+Create and render a React root.
+
+```js
+const root = createRoot(domNode);
+root.render();
+```
+
+
+
+
+
+Hydrate server-rendered HTML.
+
+```js
+hydrateRoot(domNode, );
+```
+
+
+
diff --git a/beta/src/content/apis/react-dom/index.md b/beta/src/content/apis/react-dom/index.md
index f3ed0e7a..0d73bd9c 100644
--- a/beta/src/content/apis/react-dom/index.md
+++ b/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
-The ReactDOM package lets you render React components on a webpage.
+The ReactDOM package provides DOM-specific methods that your components can import.
-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';
```
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(() => {
-### Client APIs {/*clientapis*/}
-
-
-
-Create and render a React root.
-
-```js
-const root = createRoot(domNode);
-root.render();
-```
-
-
-
-
-
-Hydrate server-rendered HTML.
-
-```js
-hydrateRoot(domNode, );
-```
-
-
-
-### Server APIs {/*serverapis*/}
-
-
-
-Render a React element to a pipeable stream.
-
-```js
-renderToPipeableStream(element, options)
-```
-
-
-
-
-
-Render a React element to a Readable stream.
-
-```js
-renderToReadableStream(element, options)
-```
-
-
-
-
-
-Render a React element to a Node stream.
-
-```js
-renderToNodeStream(element)
-```
-
-
-
-
-
-Render a React element to a static Node stream.
-
-```js
-renderToStaticNodeStream(element)
-```
-
-
+### Deprecated {/*deprecated*/}
-
+
-Render a React element to a string.
+Displays a React component inside a browser DOM node (deprecated).
```js
-renderToString(element)
+render(, document.getElementById('root'));
```
-
+
-Render a React element to static markup.
+Hydrate server-rendered HTMl (deprecated).
```js
-renderToStaticMarkup(element)
+hydrate(, document.getElementById('root'));
```
-### Deprecated {/*deprecated*/}
+## Entry points {/*entry-points*/}
-
+
-Displays a React component inside a browser DOM node (deprecated).
+The ReactDOMClient APIs let you render React components in the browser.
```js
-render(, document.getElementById('root'));
+import * as ReactDOMClient from 'react-dom/client';
```
-
+
-Hydrate server-rendered HTMl (deprecated).
+The ReactDOMServer APIs let you render React components to HTML.
```js
-hydrate(, document.getElementById('root'));
+import * as ReactDOMServer from 'react-dom/server';
```
-
-This section is incomplete and is still being written!
diff --git a/beta/src/content/apis/react-dom/server/index.md b/beta/src/content/apis/react-dom/server/index.md
new file mode 100644
index 00000000..6c15e0f7
--- /dev/null
+++ b/beta/src/content/apis/react-dom/server/index.md
@@ -0,0 +1,102 @@
+---
+title: ReactDOMServer APIs
+---
+
+
+
+This section is incomplete, please see the old docs for [ReactDOM](https://reactjs.org/docs/react-dom.html).
+
+
+
+
+
+
+The ReactDOMServer APIs let you render React components to HTML.
+
+
+
+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*/}
+
+
+
+
+
+npm install react-dom
+
+
+
+```js
+// Importing a specific API:
+import { renderToPipeableStream } from 'react-dom/server';
+
+// Importing all APIs together:
+import * as ReactDOMServer from 'react-dom/server';
+```
+
+
+
+You'll also need to install the same version of [React](/apis/react).
+
+## Exports {/*exports*/}
+
+
+
+Render a React element to a pipeable stream.
+
+```js
+renderToPipeableStream(element, options)
+```
+
+
+
+
+
+Render a React element to a Readable stream.
+
+```js
+renderToReadableStream(element, options)
+```
+
+
+
+
+
+Render a React element to a Node stream.
+
+```js
+renderToNodeStream(element)
+```
+
+
+
+
+
+Render a React element to a static Node stream.
+
+```js
+renderToStaticNodeStream(element)
+```
+
+
+
+
+
+Render a React element to a string.
+
+```js
+renderToString(element)
+```
+
+
+
+
+
+Render a React element to static markup.
+
+```js
+renderToStaticMarkup(element)
+```
+
+
diff --git a/beta/src/content/apis/react/index.md b/beta/src/content/apis/react/index.md
index 3a985a2b..ba6b2be2 100644
--- a/beta/src/content/apis/react/index.md
+++ b/beta/src/content/apis/react/index.md
@@ -426,6 +426,3 @@ useDebugValue('Custom Label');
-
-This section is incomplete and is still being written!
-
diff --git a/beta/src/sidebarReference.json b/beta/src/sidebarReference.json
index c33b190b..07397190 100644
--- a/beta/src/sidebarReference.json
+++ b/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
}
]
}