From a7d2254e0dd6697127691d20926dd19a423d07c5 Mon Sep 17 00:00:00 2001 From: dan Date: Wed, 27 Apr 2022 20:12:07 +0100 Subject: [PATCH] Update more examples for 18 (#4607) * Update more examples for 18 * blargh --- content/docs/add-react-to-a-website.md | 8 ++++---- content/docs/components-and-props.md | 4 ++-- content/docs/error-boundaries.md | 2 +- content/docs/integrating-with-other-libraries.md | 10 ++++++---- content/versions.yml | 4 +++- examples/context/theme-detailed-app.js | 5 ++++- examples/context/updating-nested-context-app.js | 5 ++++- examples/hello-world.js | 4 ++-- examples/introducing-jsx.js | 5 ++++- examples/rendering-elements/render-an-element.js | 2 +- examples/uncontrolled-components/input-type-file.js | 4 ++-- 11 files changed, 33 insertions(+), 20 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 7b73c25a..07c49475 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -25,7 +25,7 @@ In this section, we will show how to add a React component to an existing HTML p There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip) ### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} @@ -75,7 +75,7 @@ Open **[this starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4 > >This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! -After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add three lines to the bottom of `like_button.js`: ```js{3,4,5} // ... the starter code you pasted ... @@ -95,7 +95,7 @@ Check out the next sections for more tips on integrating React. **[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)** ### Tip: Reuse a Component {#tip-reuse-a-component} @@ -103,7 +103,7 @@ Commonly, you might want to display React components in multiple places on the H [View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/279839cb9891bd41802ebebc5365e9dec08eeb9f.zip) >Note > diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md index 3f6b1f2f..92661b9d 100644 --- a/content/docs/components-and-props.md +++ b/content/docs/components-and-props.md @@ -64,13 +64,13 @@ When React sees an element representing a user-defined component, it passes JSX For example, this code renders "Hello, Sara" on the page: -```js{1,5} +```js{1,6} function Welcome(props) { return

Hello, {props.name}

; } -const element = ; const root = ReactDOM.createRoot(document.getElementById('root')); +const element = ; root.render(element); ``` diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md index 1cba18f3..a3f4b61f 100644 --- a/content/docs/error-boundaries.md +++ b/content/docs/error-boundaries.md @@ -66,7 +66,7 @@ Note that **error boundaries only catch errors in the components below them in t ## Live Demo {#live-demo} -Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16](/blog/2017/09/26/react-v16.0.html). +Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010). ## Where to Place Error Boundaries {#where-to-place-error-boundaries} diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5ce58a4d..78a49b46 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -246,20 +246,22 @@ You can have as many such isolated components as you like, and use `ReactDOM.cre Below, we will create a Backbone view called `ParagraphView`. It will override Backbone's `render()` function to render a React `` component into the DOM element provided by Backbone (`this.el`). Here, too, we are using [`ReactDOM.createRoot()`](/docs/react-dom-client.html#createroot): -```js{1,5,8-9,13} +```js{7,11,15} function Paragraph(props) { return

{props.text}

; } const ParagraphView = Backbone.View.extend({ + initialize(options) { + this.reactRoot = ReactDOM.createRoot(this.el); + }, render() { const text = this.model.get('text'); - this.root = ReactDOM.createRoot(this.el); - this.root.render(); + this.reactRoot.render(); return this; }, remove() { - this.root.unmount(); + this.reactRoot.unmount(); Backbone.View.prototype.remove.call(this); } }); diff --git a/content/versions.yml b/content/versions.yml index b9658f6d..dc5c5d3d 100644 --- a/content/versions.yml +++ b/content/versions.yml @@ -1,5 +1,7 @@ +- title: '18.1.0' + changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1810-april-26-2022 - title: '18.0.0' - changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md + changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022 - title: '17.0.2' changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1702-march-22-2021 url: https://17.reactjs.org diff --git a/examples/context/theme-detailed-app.js b/examples/context/theme-detailed-app.js index 7edfe4db..2e092d0d 100644 --- a/examples/context/theme-detailed-app.js +++ b/examples/context/theme-detailed-app.js @@ -46,4 +46,7 @@ class App extends React.Component { } } -ReactDOM.render(, document.root); +const root = ReactDOM.createRoot( + document.getElementById('root') +); +root.render(); diff --git a/examples/context/updating-nested-context-app.js b/examples/context/updating-nested-context-app.js index 3644e89a..883d3580 100644 --- a/examples/context/updating-nested-context-app.js +++ b/examples/context/updating-nested-context-app.js @@ -42,4 +42,7 @@ function Content() { ); } -ReactDOM.render(, document.root); +const root = ReactDOM.createRoot( + document.getElementById('root') +); +root.render(); diff --git a/examples/hello-world.js b/examples/hello-world.js index d0f87a59..ea2dcf16 100644 --- a/examples/hello-world.js +++ b/examples/hello-world.js @@ -1,4 +1,4 @@ -ReactDOM.render( -

Hello, world!

, +const root = ReactDOM.createRoot( document.getElementById('root') ); +root.render(

Hello, world!

); diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js index 3f1a07f3..54d58b12 100644 --- a/examples/introducing-jsx.js +++ b/examples/introducing-jsx.js @@ -9,4 +9,7 @@ const user = { const element =

Hello, {formatName(user)}!

; -ReactDOM.render(element, document.getElementById('root')); +const root = ReactDOM.createRoot( + document.getElementById('root') +); +root.render(element); diff --git a/examples/rendering-elements/render-an-element.js b/examples/rendering-elements/render-an-element.js index 2a274840..315b33cb 100644 --- a/examples/rendering-elements/render-an-element.js +++ b/examples/rendering-elements/render-an-element.js @@ -1,5 +1,5 @@ -const element =

Hello, world

; const root = ReactDOM.createRoot( document.getElementById('root') ); +const element =

Hello, world

; root.render(element); diff --git a/examples/uncontrolled-components/input-type-file.js b/examples/uncontrolled-components/input-type-file.js index 742d6dcd..023f8a8b 100644 --- a/examples/uncontrolled-components/input-type-file.js +++ b/examples/uncontrolled-components/input-type-file.js @@ -28,7 +28,7 @@ class FileInput extends React.Component { } } -ReactDOM.render( - , +const root = ReactDOM.createRoot( document.getElementById('root') ); +root.render();