* [18] ReactDOM reference to createRoot/hydrateRoot (#4340)

* [18] ReactDOM reference to createRoot/hydrateRoot

* Update note about render and hydrate

* Match the warning text

* s/Render/render

* [18] Update ReactDOMClient docs (#4468)

* [18] Update ReactDOMClient docs

* Remove ReactDOMClient where it's obvious

* Update browser message

* Update browser message note

* Update based on feedback

* Add react-dom/client docs

* [18] Upgrade homepage examples (#4469)

* [18] Switch code samples to createRoot (#4470)

* [18] Switch code samples to createRoot

* Feedback fixes

* Feedback updates

* [18] Use hydrateRoot and root.unmount. (#4473)

* [18] Add docs for flushSync (#4474)

* [18] Add flushSync to ReactDOM docs

* Seb feedback

* More Seb feedback

* [18] Bump version to 18 (#4478)

* [18] Update browser requirements (#4476)

* [18] Update browser requirements

* Update based on feedback

* [18] Add stubs for new API references (#4477)

* [18] Add stubs for new API references

* Change order/grouping

* [18] Redirect outdated Concurrent Mode docs (#4481)

* [18] Redirect outdated Concurrent Mode docs

* Use Vercel redirects instead

* [18] Update versions page (#4482)

* [18] Update version page

* Fix prettier

* [18] Update React.lazy docs (#4483)

* [18] Add docs for useSyncExternalStore (#4487)

* [18] Add docs for useSyncExternalStore

* rm "optional"

* [18] Add docs for useInsertionEffect (#4486)

* [18] Add docs for useId (#4488)

* [18] Add docs for useId

* Update based on feedback

* Add Strict Effects to Strict Mode (#4362)

* Add Strict Effects to Strict Mode

* Update with new thinking

* [18] Update docs for useEffect timing (#4498)

* [18] Add docs for useDeferredValue (#4497)

* [18] Update suspense docs for unexpected fallbacks (#4500)

* [18] Update suspense docs for unexpected fallbacks

* Add inline code block

* Feedback fixes

* [18] Updated Suspense doc with behavior during SSR and Hydration (#4484)

* update wording

* wording

* update events

* Update content/docs/reference-react.md

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

* add link to selective hydration

* remove some of the implementation details

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

* [18] renderToPipeableStream doc (#4485)

* new streaming ssr api

* add readable stream

* code snippets

* Rename strict effects / unsafe effects to use the reusable state terminology (#4505)

* Add draft of 18 release post

* Add links to speaker Twitter profiles

* [18] Update upgrade guide

* Fix typo in blog title

* [18] Blog - add note for react native

* [18] Add changelog info to blog posts

* Edit Suspense for data fetching section

* Update date

* [18] Add links

* Consistent title case

* Update link to merged RFC

* [18] Update APIs and links

* [18] Add start/useTransition docs (#4479)

* [18] Add start/useTransition docs

* Updates based on feedback

* [18] Generate heading IDs

* Add note about Strict Mode

* Just frameworks

* Reorder, fix content

* Typos

* Clarify Suspense frameworks section

* Revert lost changes that happened when I undo-ed in my editor

Co-authored-by: salazarm <salazarm@users.noreply.github.com>
Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Co-authored-by: Sebastian Markbåge <sebastian@calyptus.eu>
Co-authored-by: Andrew Clark <git@andrewclark.io>
Co-authored-by: dan <dan.abramov@gmail.com>
This commit is contained in:
Ricky
2022-03-29 12:03:23 -04:00
committed by GitHub
parent ac68ced36e
commit 74246c13b9
54 changed files with 1129 additions and 2449 deletions

View File

@@ -34,7 +34,7 @@ We call this a "root" DOM node because everything inside it will be managed by R
Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
To render a React element into a root DOM node, pass both to [`ReactDOM.render()`](/docs/react-dom.html#render):
To render a React element, first pass the DOM element to [`ReactDOM.createRoot()`](/docs/react-dom-client.html#createroot), then pass the React element to `root.render()`:
`embed:rendering-elements/render-an-element.js`
@@ -46,7 +46,7 @@ It displays "Hello, world" on the page.
React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
With our knowledge so far, the only way to update the UI is to create a new element, and pass it to [`ReactDOM.render()`](/docs/react-dom.html#render).
With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `root.render()`.
Consider this ticking clock example:
@@ -54,11 +54,11 @@ Consider this ticking clock example:
**[Try it on CodePen](https://codepen.io/gaearon/pen/gwoJZk?editors=1010)**
It calls [`ReactDOM.render()`](/docs/react-dom.html#render) every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
It calls [`root.render()`](/docs/react-dom.html#render) every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
>**Note:**
>
>In practice, most React apps only call [`ReactDOM.render()`](/docs/react-dom.html#render) once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
>In practice, most React apps only call `root.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
>
>We recommend that you don't skip topics because they build on each other.