amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-26 18:58:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Beta] Split ReactDOM APIs (#5052)

Browse Source
This commit is contained in:
dan
2022-09-13 01:49:50 +01:00
committed by GitHub
parent f99a7fd181
commit 5b8f219a3a
5 changed files with 214 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
beta/src/content/apis/react-dom/client/index.md Normal file
View File

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

119
beta/src/content/apis/react-dom/index.md
View File

@@ -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,91 +67,6 @@ 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">
@@ -178,4 +89,24 @@ hydrate(<App />, document.getElementById('root'));
</YouWillLearnCard>
This section is incomplete and is still being written!
## Entry points {/*entry-points*/}
<YouWillLearnCard title="ReactDOMClient APIs" path="/apis/react-dom/client">
The ReactDOMClient APIs let you render React components in the browser.
```js
import * as ReactDOMClient from 'react-dom/client';
```
</YouWillLearnCard>
<YouWillLearnCard title="ReactDOMServer APIs" path="/apis/react-dom/server">
The ReactDOMServer APIs let you render React components to HTML.
```js
import * as ReactDOMServer from 'react-dom/server';
```
</YouWillLearnCard>

102
beta/src/content/apis/react-dom/server/index.md Normal file
View File

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

3
beta/src/content/apis/react/index.md
View File

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

38
beta/src/sidebarReference.json
View File

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