[Beta] Add missing imports to ref pages (#5442)

* [Beta] Add missing imports to ref pages

* Fix spaces

beta/src/content/reference/react-dom/client/hydrateRoot.md

@@ -23,6 +23,8 @@ const root = hydrateRoot(domNode, reactNode, options?)
 Call `hydrateRoot` to “attach” React to existing HTML that was already rendered by React in a server environment.
 
 ```js
+import { hydrateRoot } from 'react-dom/client';
+
 const domNode = document.getElementById('root');
 const root = hydrateRoot(domNode, reactNode);
 ```

beta/src/content/reference/react-dom/components/common.md

@@ -16,6 +16,12 @@ All built-in browser components, such as [`<div>`](https://developer.mozilla.org
 
 ### Common components (e.g. `<div>`) {/*common*/}
 
+```js
+<div className="wrapper">Some content</div>
+```
+
+[See more examples below.](#usage)
+
 #### Props {/*common-props*/}
 
 These special React props are supported for all built-in components:

beta/src/content/reference/react-dom/components/option.md

@@ -32,6 +32,8 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/
 </select>
 ```
 
+[See more examples below.](#usage)
+
 #### Props {/*props*/}
 
 `<option>` supports all [common element props.](/reference/react-dom/components/common#props)

beta/src/content/reference/react-dom/components/progress.md

@@ -26,6 +26,8 @@ To display a progress indicator, render the [built-in browser `<progress>`](http
 <progress value={0.5} />
 ```
 
+[See more examples below.](#usage)
+
 #### Props {/*props*/}
 
 `<progress>` supports all [common element props.](/reference/react-dom/components/common#props)

beta/src/content/reference/react-dom/findDOMNode.md

@@ -12,7 +12,7 @@ This API will be removed in a future major version of React. [See the alternativ
 
 `findDOMNode` finds the browser DOM node for a React [class component](/reference/react/Component) instance.
 
-```
+```js
 const domNode = findDOMNode(componentInstance)
 ```
 
@@ -29,6 +29,8 @@ const domNode = findDOMNode(componentInstance)
 Call `findDOMNode` to find the browser DOM node for a given React [class component](/reference/react/Component) instance.
 
 ```js
+import { findDOMNode } from 'react-dom';
+
 const domNode = findDOMNode(componentInstance);
 ```
 

beta/src/content/reference/react-dom/flushSync.md

@@ -29,8 +29,10 @@ flushSync(callback)
 Call `flushSync` to force React to flush any pending work and update the DOM synchronously.
 
 ```js
+import { flushSync } from 'react-dom';
+
 flushSync(() => {
-  setState(true);
+  setSomething(123);
 });
 ```
 
@@ -62,9 +64,9 @@ Most of the time, `flushSync` can be avoided. Use `flushSync` as last resort.
 
 When integrating with third-party code such as browser APIs or UI libraries, it may be necessary to force React to flush updates. Use `flushSync` to force React to flush any <CodeStep step={1}>state updates</CodeStep> inside the callback synchronously:
 
-```js [[1, 2, "setState(true)"]]
+```js [[1, 2, "setSomething(123)"]]
 flushSync(() => {
-  setState(true);
+  setSomething(123);
 });
 // By this line, the DOM is updated.
 ```
@@ -85,7 +87,7 @@ In the example below, you use `flushSync` inside of the `onbeforeprint` callback
 
 ```js App.js active
 import { useState, useEffect } from 'react';
-import {flushSync} from 'react-dom';
+import { flushSync } from 'react-dom';
 
 export default function PrintApp() {
   const [isPrinting, setIsPrinting] = useState(false);

beta/src/content/reference/react-dom/hydrate.md

@@ -31,6 +31,8 @@ hydrate(reactNode, domNode, callback?)
 Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment.
 
 ```js
+import { hydrate } from 'react-dom';
+
 hydrate(reactNode, domNode);
 ```
 

beta/src/content/reference/react-dom/render.md

@@ -31,6 +31,8 @@ render(reactNode, domNode, callback?)
 Call `render` to display a React component inside a browser DOM element.
 
 ```js
+import { render } from 'react-dom';
+
 const domNode = document.getElementById('root');
 render(<App />, domNode);
 ```

beta/src/content/reference/react-dom/server/renderToNodeStream.md

@@ -29,12 +29,16 @@ const stream = renderToNodeStream(reactNode)
 On the server, call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe into the response.
 
 ```js
+import { renderToNodeStream } from 'react-dom/server';
+
 const stream = renderToNodeStream(<App />);
 stream.pipe(response);
 ```
 
 On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`.

beta/src/content/reference/react-dom/server/renderToPipeableStream.md

@@ -42,6 +42,8 @@ const { pipe } = renderToPipeableStream(<App />, {
 
 On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.

beta/src/content/reference/react-dom/server/renderToReadableStream.md

@@ -43,6 +43,8 @@ async function handler(request) {
 
 On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.

beta/src/content/reference/react-dom/server/renderToStaticMarkup.md

@@ -22,12 +22,16 @@ const html = renderToStaticMarkup(reactNode)
 
 On the server, call `renderToStaticMarkup` to render your app to HTML.
 
-```js {3-4}
+```js
+import { renderToStaticMarkup } from 'react-dom/server';
+
 const html = renderToStaticMarkup(<Page />);
 ```
 
 It will produce non-interactive HTML output of your React components.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<Page />`.

beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md

@@ -23,10 +23,14 @@ const stream = renderToStaticNodeStream(reactNode)
 On the server, call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams).
 
 ```js
+import { renderToStaticNodeStream } from 'react-dom/server';
+
 const stream = renderToStaticNodeStream(<Page />);
 stream.pipe(response);
 ```
 
+[See more examples below.](#usage)
+
 The stream will produce non-interactive HTML output of your React components.
 
 #### Parameters {/*parameters*/}

beta/src/content/reference/react-dom/server/renderToString.md

@@ -28,12 +28,16 @@ const html = renderToString(reactNode)
 
 On the server, call `renderToString` to render your app to HTML.
 
-```js {3-4}
+```js
+import { renderToString } from 'react-dom/server';
+
 const html = renderToString(<App />);
 ```
 
 On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`.

beta/src/content/reference/react-dom/unmountComponentAtNode.md

@@ -31,6 +31,8 @@ unmountComponentAtNode(domNode)
 Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
 
 ```js
+import { unmountComponentAtNode } from 'react-dom';
+
 const domNode = document.getElementById('root');
 render(<App />, domNode);
 

beta/src/content/reference/react/createContext.md

@@ -28,6 +28,8 @@ import { createContext } from 'react';
 const ThemeContext = createContext('light');
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time.

beta/src/content/reference/react/createFactory.md

@@ -46,6 +46,8 @@ export default function App() {
 }
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)).

beta/src/content/reference/react/createRef.md

@@ -40,6 +40,8 @@ class MyComponent extends Component {
   // ...
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 `createRef` takes no parameters.

beta/src/content/reference/react/forwardRef.md

@@ -28,9 +28,10 @@ import { forwardRef } from 'react';
 const MyInput = forwardRef(function MyInput(props, ref) {
   // ...
 });
-
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component.

beta/src/content/reference/react/lazy.md

@@ -23,9 +23,13 @@ const SomeComponent = lazy(load)
 Call `lazy` outside your components to declare a lazy-loaded React component:
 
 ```js
+import { lazy } from 'react';
+
 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason to let the closest Error Boundary above handle it.

beta/src/content/reference/react/memo.md

@@ -30,6 +30,8 @@ const SomeComponent = memo(function SomeComponent(props) {
 });
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `Component`: The component that you want to memoize. The `memo` does not modify this component, but returns a new, memoized component instead. Any valid React component, including functions and [`forwardRef`](/reference/react/forwardRef) components, is accepted.

beta/src/content/reference/react/startTransition.md

@@ -37,6 +37,8 @@ function TabContainer() {
 }
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no parameters and marks all state updates scheduled synchronously during the `scope` function call as transitions. They will be [non-blocking](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators)

beta/src/content/reference/react/useInsertionEffect.md

@@ -29,17 +29,17 @@ useInsertionEffect(setup, dependencies?)
 Call `useInsertionEffect` to insert the styles before any DOM mutations:
 
 ```js
+import { useInsertionEffect } from 'react';
+
+// Inside your CSS-in-JS library
 function useCSS(rule) {
   useInsertionEffect(() => {
-  	// As explained earlier, we don't recommend runtime injection of <style> tags.
-  	// But if you have to do it, then it's important to do in useInsertionEffect.
     // ... inject <style> tags here ...
   });
   return rule;
 }
 ```
 
-
 [See more examples below.](#usage)
 
 #### Parameters {/*parameters*/}

beta/src/content/reference/react/useRef.md

@@ -31,7 +31,7 @@ function MyComponent() {
   // ...
 ```
 
-See examples of [referencing values](#examples-value) and [DOM manipulation.](#examples-dom)
+[See more examples below.](#usage)
 
 #### Parameters {/*parameters*/}