From 15a06b32b92f58fec107d62d98b975634d37a574 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 7 Apr 2022 02:25:42 +0100 Subject: [PATCH 1/2] Update some READMEs --- packages/react-dom/README.md | 36 ++++++++++++++-------- packages/react/README.md | 28 +++++++++++++++-- packages/use-sync-external-store/README.md | 4 +-- 3 files changed, 51 insertions(+), 17 deletions(-) diff --git a/packages/react-dom/README.md b/packages/react-dom/README.md index f31dc407837..44787a5093f 100644 --- a/packages/react-dom/README.md +++ b/packages/react-dom/README.md @@ -13,38 +13,48 @@ npm install react react-dom ### In the browser ```js -var React = require('react'); -var ReactDOM = require('react-dom'); +import { createRoot } from 'react-dom'; -function MyComponent() { +function App() { return
Hello World
; } -ReactDOM.render(, node); +const root = createRoot(document.getElementById('root')); +root.render(); ``` ### On the server ```js -var React = require('react'); -var ReactDOMServer = require('react-dom/server'); +import { renderToPipeableStream } from 'react-dom/server'; -function MyComponent() { +function App() { return
Hello World
; } -ReactDOMServer.renderToString(); +function handleRequest(res) { + // ... in your server handler ... + const stream = renderToPipeableStream(, { + onShellReady() { + res.statusCode = 200; + res.setHeader('Content-type', 'text/html'); + stream.pipe(res); + }, + // ... + }); +} ``` ## API ### `react-dom` -- `findDOMNode` -- `render` -- `unmountComponentAtNode` +See https://reactjs.org/docs/react-dom.html + +### `react-dom/client` + +See https://reactjs.org/docs/react-dom-client.html ### `react-dom/server` -- `renderToString` -- `renderToStaticMarkup` +See https://reactjs.org/docs/react-dom-server.html diff --git a/packages/react/README.md b/packages/react/README.md index 0033e23bd88..493f9c83395 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -6,8 +6,32 @@ The `react` package contains only the functionality necessary to define React co **Note:** by default, React will be in development mode. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages. Don't forget to use the [production build](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build) when deploying your application. -## Example Usage +## Usage ```js -var React = require('react'); +import { useState } from 'react'; +import { createRoot } from 'react-dom'; + +function Counter() { + const [count, setCount] = useState(0); + return ( + <> +

{count}

+ + + ); +} + +const root = createRoot(document.getElementById('root')); +root.render(); ``` + +## Documentation + +See https://reactjs.org/ + +## API + +See https://reactjs.org/docs/react-api.html diff --git a/packages/use-sync-external-store/README.md b/packages/use-sync-external-store/README.md index c799272a93e..9eaf71695b6 100644 --- a/packages/use-sync-external-store/README.md +++ b/packages/use-sync-external-store/README.md @@ -1,5 +1,5 @@ # use-sync-external-store -Backwards compatible shim for React's `useSyncExternalStore`. Works with any React that supports hooks. +Backwards-compatible shim for [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). Works with any React that supports hooks. -Until `useSyncExternalStore` is documented, refer to https://github.com/reactwg/react-18/discussions/86 +See also https://github.com/reactwg/react-18/discussions/86. From 149ca881e08fcd3964b574efe0e91f710f9f9470 Mon Sep 17 00:00:00 2001 From: dan Date: Thu, 7 Apr 2022 02:34:22 +0100 Subject: [PATCH 2/2] Update README.md --- packages/use-sync-external-store/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/use-sync-external-store/README.md b/packages/use-sync-external-store/README.md index 9eaf71695b6..e9987a399b6 100644 --- a/packages/use-sync-external-store/README.md +++ b/packages/use-sync-external-store/README.md @@ -1,5 +1,5 @@ # use-sync-external-store -Backwards-compatible shim for [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). Works with any React that supports hooks. +Backwards-compatible shim for [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). Works with any React that supports Hooks. See also https://github.com/reactwg/react-18/discussions/86.