react/packages/react-dom
Andrew Clark 500bea532d
Add option to load Fizz runtime from external file (#25499)
* Add feature flag for external Fizz runtime

Only enabled for www for now

* Add option to load Fizz runtime from external file

When unstable_externalRuntimeSrc is provided, React will inject a script
tag that points to the provided URL.

Then, instead of emitting inline scripts, the Fizz stream will emit
HTML nodes with data attributes that encode the instructions. The
external runtime will detect these with a mutation observer and
translate them into runtime commands. This part isn't implemented in 
this PR, though — all this does is set up the option to use 
an external runtime, and inject the script tag.

The external runtime is injected at the same time as bootstrap scripts.
2022-10-17 17:57:59 -04:00
..
npm Server render fork for react-dom (#25436) 2022-10-10 11:06:22 -07:00
src Add option to load Fizz runtime from external file (#25499) 2022-10-17 17:57:59 -04:00
README.md Fix import in README 2022-04-07 13:46:36 +01:00
client.js Support document rendering (#24523) 2022-05-10 10:17:36 -07:00
index.classic.fb.js Move react-dom implementation files to react-dom-bindings (#25345) 2022-09-28 19:05:50 -04:00
index.experimental.js [Fizz/Float] Float for stylesheet resources (#25243) 2022-09-30 16:14:04 -07:00
index.js [react-dom] Reorganize react-dom internals to match react (#25277) 2022-09-15 15:31:31 -07:00
index.modern.fb.js [react-dom] Reorganize react-dom internals to match react (#25277) 2022-09-15 15:31:31 -07:00
index.stable.js [react-dom] Reorganize react-dom internals to match react (#25277) 2022-09-15 15:31:31 -07:00
package.json Scaffolding for react-dom/unstable_external-server-runtime (#25482) 2022-10-14 23:29:17 -04:00
server-rendering-stub.experimental.js Server render fork for react-dom (#25436) 2022-10-10 11:06:22 -07:00
server-rendering-stub.js Server render fork for react-dom (#25436) 2022-10-10 11:06:22 -07:00
server.browser.js Merge /unstable-fizz entry point into /server (#21684) 2021-06-14 18:37:44 -07:00
server.js Convert the rest of react-dom and react-test-renderer to Named Exports (#18145) 2020-02-26 18:04:32 -08:00
server.node.js [Fizz/Flight] pipeToNodeWritable(..., writable).startWriting() -> renderToPipeableStream(...).pipe(writable) (#22450) 2021-10-06 00:31:06 -04:00
static.browser.js Add entry points for "static" server rendering passes (#24752) 2022-06-18 22:34:31 -04:00
static.js Add entry points for "static" server rendering passes (#24752) 2022-06-18 22:34:31 -04:00
static.node.js Add entry points for "static" server rendering passes (#24752) 2022-06-18 22:34:31 -04:00
test-utils.js Convert the rest of react-dom and react-test-renderer to Named Exports (#18145) 2020-02-26 18:04:32 -08:00
unstable_server-external-runtime.js Add Jest entry file for external-server-runtime (#25484) 2022-10-15 15:33:33 -04:00
unstable_testing.classic.fb.js Exclude react-dom/unstable_testing entry point from stable releases (#23258) 2022-02-08 23:12:31 -05:00
unstable_testing.experimental.js Exclude react-dom/unstable_testing entry point from stable releases (#23258) 2022-02-08 23:12:31 -05:00
unstable_testing.js Exclude react-dom/unstable_testing entry point from stable releases (#23258) 2022-02-08 23:12:31 -05:00
unstable_testing.modern.fb.js Exclude react-dom/unstable_testing entry point from stable releases (#23258) 2022-02-08 23:12:31 -05:00
unstable_testing.stable.js Exclude react-dom/unstable_testing entry point from stable releases (#23258) 2022-02-08 23:12:31 -05:00

README.md

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://reactjs.org/docs/react-dom.html

react-dom/client

See https://reactjs.org/docs/react-dom-client.html

react-dom/server

See https://reactjs.org/docs/react-dom-server.html