react/packages/react-dom
Sebastian Markbåge 05fbd1aab0
[Fizz] Postponing in the shell (#27569)
When we postpone a prerender in the shell, we should just leave an empty
prelude and resume from the root. While preserving any options passed
in.

Since we haven't flushed anything we can't assume we've already emitted
html/body tags or any resources tracked in the resumable state. This
introduces a resetResumableState function to reset anything we didn't
flush.

This is a bit hacky. Ideally, we probably shouldn't have tracked it as
already happened until it flushed or something like that.

Basically, it's like restarting the prerender with the same options and
then immediately aborting. When we add the preload headers, we'd track
those as preload() being emitted after the reset and so they get readded
to the resumable state in that case.
2023-10-23 15:53:59 -04:00
..
npm Restrict React DOM imports from Server Components (#27382) 2023-09-15 14:53:19 -04:00
src [Fizz] Postponing in the shell (#27569) 2023-10-23 15:53:59 -04:00
client.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
index.classic.fb.js Upgrade Server Actions to canary (#27459) 2023-10-04 14:51:36 -04:00
index.experimental.js Add back temporary experimental_ aliases for Server Actions APIs (#27461) 2023-10-04 15:58:08 -04:00
index.js Upgrade Server Actions to canary (#27459) 2023-10-04 14:51:36 -04:00
index.modern.fb.js Upgrade Server Actions to canary (#27459) 2023-10-04 14:51:36 -04:00
index.stable.js Upgrade Server Actions to canary (#27459) 2023-10-04 14:51:36 -04:00
package.json Enforce that the "react-server" build of "react" is used (#27436) 2023-09-29 18:24:05 -04:00
README.md chore: update new docs links for react-dom (#26456) 2023-03-22 12:55:06 +01:00
server-rendering-stub.js pull implementations from the right react-dom (#27471) 2023-10-05 09:14:57 -07:00
server.browser.js [Fizz] Split ResponseState/Resources into RenderState/ResumableState (#27268) 2023-08-22 15:21:36 -04:00
server.bun.js [Fizz] Split ResponseState/Resources into RenderState/ResumableState (#27268) 2023-08-22 15:21:36 -04:00
server.edge.js [Fizz] Split ResponseState/Resources into RenderState/ResumableState (#27268) 2023-08-22 15:21:36 -04:00
server.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
server.node.js [Fizz] Track postponed holes in the prerender pass (#27317) 2023-08-31 12:23:26 -04:00
static.browser.js [Fizz] Move /static build into /server builds (#27327) 2023-09-05 15:55:20 -04:00
static.edge.js [Fizz] Move /static build into /server builds (#27327) 2023-09-05 15:55:20 -04:00
static.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
static.node.js [Fizz] Move /static build into /server builds (#27327) 2023-09-05 15:55:20 -04:00
test-utils.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
unstable_server-external-runtime.js [ServerRenderer] Move fizz external runtime implementation to react-dom-bindings (#25617) 2022-11-03 11:15:29 -04:00
unstable_testing.classic.fb.js Remove Reconciler fork (2/2) (#25775) 2022-12-01 23:19:13 -05:00
unstable_testing.experimental.js Remove Reconciler fork (2/2) (#25775) 2022-12-01 23:19:13 -05:00
unstable_testing.js Remove Reconciler fork (2/2) (#25775) 2022-12-01 23:19:13 -05:00
unstable_testing.modern.fb.js Remove Reconciler fork (2/2) (#25775) 2022-12-01 23:19:13 -05:00
unstable_testing.stable.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00

react-dom

This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.

Installation

npm install react react-dom

Usage

In the browser

import { createRoot } from 'react-dom/client';

function App() {
  return <div>Hello World</div>;
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);

On the server

import { renderToPipeableStream } from 'react-dom/server';

function App() {
  return <div>Hello World</div>;
}

function handleRequest(res) {
  // ... in your server handler ...
  const stream = renderToPipeableStream(<App />, {
    onShellReady() {
      res.statusCode = 200;
      res.setHeader('Content-type', 'text/html');
      stream.pipe(res);
    },
    // ...
  });
}

API

react-dom

See https://react.dev/reference/react-dom

react-dom/client

See https://react.dev/reference/react-dom/client

react-dom/server

See https://react.dev/reference/react-dom/server