dan
2 years ago
committed by
GitHub
GitHub
5 changed files with 207 additions and 103 deletions
@ -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> |
|||
|
|||
@ -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> |
|||
Loading…
Reference in new issue