Merge pull request #205 from reactjs/sync-5f3a9756

Sync with reactjs.org @ 5f3a975

Author: arshadkazmi42

beta/src/pages/learn/reacting-to-input-with-state.md

@@ -374,7 +374,7 @@ You want to avoid duplication in the state content so you're only tracking what
 Here are some questions you can ask about your state variables:
 
 * **Does this state cause a paradox?** For example, `isTyping` and `isSubmitting` can't both be `true`. A paradox usually means that the state is not constrained enough. There are four possible combinations of two booleans, but only three correspond to valid states. To remove the "impossible" state, you can combine these into a `status` that must be one of three values: `'typing'`, `'submitting'`, or `'success'`. 
-* **Is the same information available in another state variable already?** Another paradox: `isEmpty` and `isTyping` can't be `true` at the same time. By making them separate state variables, you risk them going out of sync and causing bugs. Fortunately, you can remove `isEmpty` and instead check `message.length === 0`.
+* **Is the same information available in another state variable already?** Another paradox: `isEmpty` and `isTyping` can't be `true` at the same time. By making them separate state variables, you risk them going out of sync and causing bugs. Fortunately, you can remove `isEmpty` and instead check `answer.length === 0`.
 * **Can you get the same information from the inverse of another state variable?** `isError` is not needed because you can check `error !== null` instead.
 
 After this clean-up, you're left with 3 (down from 7!) *essential* state variables:

beta/src/pages/learn/rendering-lists.md

@@ -390,7 +390,7 @@ Fragments disappear from the DOM, so this will produce a flat list of `<h1>`, `<
 Different sources of data provide different sources of keys:
 
 * **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
-* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
+* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
 
 ### Rules of keys {/*rules-of-keys*/}
 

content/blog/2022-03-08-react-18-upgrade-guide.md

@@ -40,9 +40,8 @@ render(<App tab="home" />, container);
 // After
 import { createRoot } from 'react-dom/client';
 const container = document.getElementById('app');
-const root = createRoot(container);
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
 root.render(<App tab="home" />);
-
 ```
 
 We’ve also changed `unmountComponentAtNode` to `root.unmount`:
@@ -60,7 +59,7 @@ We've also removed the callback from render, since it usually does not have the
 ```js
 // Before
 const container = document.getElementById('app');
-ReactDOM.render(<App tab="home" />, container, () => {
+render(<App tab="home" />, container, () => {
   console.log('rendered');
 });
 
@@ -74,7 +73,7 @@ function AppWithCallbackAfterRender() {
 }
 
 const container = document.getElementById('app');
-const root = ReactDOM.createRoot(container);
+const root = createRoot(container);
 root.render(<AppWithCallbackAfterRender />);
 ```
 
@@ -297,7 +296,7 @@ If you need to support Internet Explorer we recommend you stay with React 17.
 ### React DOM Server {#react-dom-server}
 
 * **`renderToString`:** Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest `<Suspense>` boundary and then retry rendering the same content on the client. It is still recommended that you switch to a streaming API like `renderToPipeableStream` or `renderToReadableStream` instead.
-* **`renderToStaticMarkup`:** Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest `<Suspense>` boundary and retry rendering on the client.
+* **`renderToStaticMarkup`:** Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest `<Suspense>` boundary.
 
 ## Changelog {#changelog}
 

content/community/conferences.md

@@ -12,14 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-### React Miami 2022 🌴 {#react-miami-2022}
-April 18 - 19, 2022. Miami, Florida
-[Website](https://www.reactmiami.com/)
-
-### < React Global > Online Summit 2022 by Geekle {#react-global-2022}
-April 20 - 21, 2022 - Online Summit
-
-[Website](https://events.geekle.us/react2/) - [LinkedIn](https://www.linkedin.com/events/reactglobalonlinesummit-226887417664541614081/) 
 
 ### Reactathon 2022 {#reactathon-2022} 
 May 3 - 5, 2022. Berkeley, CA
@@ -46,6 +38,16 @@ June 17 & 21, 2022. In-person in Amsterdam, Netherlands + remote first interacti
 
 [Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
 
+### React Norway 2022 {#react-norway-2022}
+June 24, 2022. In-person at Farris Bad Hotel in Larvik, Norway and online (hybrid event).
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway)
+
+### ReactNext 2022 {#react-next-2022}
+June 28, 2022. Tel-Aviv, Israel
+
+[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/c/ReactNext)
+
 ### React Native EU 2022: Powered by {callstack} {#react-native-eu-2022-powered-by-callstack}
 September 1-2, 2022 - Remote event
 
@@ -72,6 +74,16 @@ September 29 - October 1, 2022. In-person in Alicante, Spain + remote (hybrid ev
 
 ## Past Conferences {#past-conferences}
 
+
+### < React Global > Online Summit 2022 by Geekle {#react-global-2022}
+April 20 - 21, 2022 - Online Summit
+
+[Website](https://events.geekle.us/react2/) - [LinkedIn](https://www.linkedin.com/events/reactglobalonlinesummit-226887417664541614081/)
+
+### React Miami 2022 🌴 {#react-miami-2022}
+April 18 - 19, 2022. Miami, Florida
+[Website](https://www.reactmiami.com/)
+
 ### React Live 2022 {#react-live-2022}
 April 1, 2022. Amsterdam, The Netherlands
 

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,15 +95,15 @@ 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}
 
 Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it:
 
 [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
 >

content/docs/components-and-props.md

@@ -63,13 +63,13 @@ const element = <Welcome name="नेहा" />;
 
 उदाहरण के लिए, यह कोड पेज पर रेंडर करता है "नमस्ते, नेहा":
 
-```js{1,5}
+```js{1,6}
 function Welcome(props) {
   return <h1>नमस्ते, {props.name}</h1>;
 }
 
-const element = <Welcome name="नेहा" />;
 const root = ReactDOM.createRoot(document.getElementById('root'));
+const element = <Welcome name="Sara" />;
 root.render(element);
 ```
 

content/docs/conditional-rendering.md

@@ -35,11 +35,9 @@ function Greeting(props) {
   return <GuestGreeting />;
 }
 
-ReactDOM.render(
-  // Try changing to isLoggedIn={true}:
-  <Greeting isLoggedIn={false} />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+// Try changing to isLoggedIn={true}:
+root.render(<Greeting isLoggedIn={false} />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
@@ -110,10 +108,8 @@ class LoginControl extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <LoginControl />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+root.render(<LoginControl />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
@@ -140,10 +136,9 @@ function Mailbox(props) {
 }
 
 const messages = ['React', 'Re: React', 'Re:Re: React'];
-ReactDOM.render(
-  <Mailbox unreadMessages={messages} />,
-  document.getElementById('root')
-);
+
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+root.render(<Mailbox unreadMessages={messages} />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
@@ -244,10 +239,8 @@ class Page extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Page />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+root.render(<Page />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)

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}

content/docs/hello-world.md

@@ -9,9 +9,8 @@ next: introducing-jsx.html
 React का सबसे छोटा उदाहरण ऐसा दिखता है:
 
 ```jsx
-ReactDOM
-  .createRoot(document.getElementById('root'))
-  .render(<h1>नमस्ते, दुनिया!</h1>);
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<h1>Hello, world!</h1>);
 ```
 
 यह पृष्ठ के शीर्षक पर "नमस्ते, दुनिया! दिखाएगा।

content/docs/integrating-with-other-libraries.md

@@ -192,7 +192,7 @@ class Chosen extends React.Component {
 
 React can be embedded into other applications thanks to the flexibility of [`createRoot()`](/docs/react-dom-client.html#createRoot).
 
-Although React is commonly used at startup to load a single root React component into the DOM, `root.render()` can also be called multiple times for independent parts of the UI which can be as small as a button, or as large as an app.
+Although React is commonly used at startup to load a single root React component into the DOM, `createRoot()` can also be called multiple times for independent parts of the UI which can be as small as a button, or as large as an app.
 
 In fact, this is exactly how React is used at Facebook. This lets us write applications in React piece by piece, and combine them with our existing server-generated templates and other client-side code.
 
@@ -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 `<Paragraph>` 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 <p>{props.text}</p>;
 }
 
 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(<Paragraph text={text} />);
+    this.reactRoot.render(<Paragraph text={text} />);
     return this;
   },
   remove() {
-    this.root.unmount();
+    this.reactRoot.unmount();
     Backbone.View.prototype.remove.call(this);
   }
 });

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

examples/context/theme-detailed-app.js

@@ -46,4 +46,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.root);
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+root.render(<App />);

examples/context/updating-nested-context-app.js

@@ -42,4 +42,7 @@ function Content() {
   );
 }
 
-ReactDOM.render(<App />, document.root);
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+root.render(<App />);

examples/hello-world.js

@@ -1,4 +1,4 @@
-ReactDOM.render(
-  <h1>Hello, world!</h1>,
+const root = ReactDOM.createRoot(
   document.getElementById('root')
 );
+root.render(<h1>Hello, world!</h1>);

examples/introducing-jsx.js

@@ -9,4 +9,7 @@ const user = {
 
 const element = <h1>Hello, {formatName(user)}!</h1>;
 
-ReactDOM.render(element, document.getElementById('root'));
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+root.render(element);

examples/rendering-elements/render-an-element.js

@@ -1,5 +1,5 @@
-const element = <h1>Hello, world</h1>;
 const root = ReactDOM.createRoot(
   document.getElementById('root')
 );
+const element = <h1>Hello, world</h1>;
 root.render(element);

examples/uncontrolled-components/input-type-file.js

@@ -28,7 +28,7 @@ class FileInput extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <FileInput />,
+const root = ReactDOM.createRoot(
   document.getElementById('root')
 );
+root.render(<FileInput />);

src/site-constants.js

@@ -8,7 +8,7 @@
 // NOTE: We can't just use `location.toString()` because when we are rendering
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://reactjs.org';
-const version = '18.0.0';
+const version = '18.1.0';
 const babelURL = 'https://unpkg.com/[email protected]/babel.min.js';
 
 export {babelURL, urlRoot, version};