[Beta] Update links and add semicolons in API/react Doc (#5054)

* [Beta] Update some document content format in API Doc

* [Beta] Remove semicolon from intro

* [Beta] Add semicolon

beta/src/content/apis/react/Suspense.md

@@ -12,7 +12,7 @@ This section is incomplete, please see the old docs for [Suspense.](https://reac
 <Intro>
 
 ```js
-<React.Suspense fallback={<Spinner />}>
+<React.Suspense fallback={<Spinner />}>{...}</React.Suspense>
 ```
 
 </Intro>

beta/src/content/apis/react/index.md

@@ -111,7 +111,7 @@ Create a component that forward the ref attribute:
 
 ```js
 const Component = forwardRef((props, ref) => {
-    // ...
+  // ...
 });
 ```
 
@@ -134,7 +134,7 @@ useImperativeHandle(ref, () => {
 Create a ref (typically for class components):
 
 ```js
-this.ref = createRef(); 
+this.ref = createRef();
 ```
 
 </YouWillLearnCard>
@@ -159,7 +159,7 @@ Define a pure component as a class:
 
 ```js
 class MyComponent extends React.PureComponent {
-    // ...
+  // ...
 }
 ```
 
@@ -173,12 +173,12 @@ Return multiple elements:
 
 ```js
 function MyComponent() {
-    return (
+  return (
-        <>
+    <>
-            <h1>Title</h1>
+      <h1>Title</h1>
-            <h2>Subtitle</h2>
+      <h2>Subtitle</h2>
-        </>
+    </>
-    );
+  );
 }
 ```
 
@@ -237,7 +237,7 @@ React.cloneElement(element, props);
 Verifies the object is a React element:
 
 ```js
-React.isValidElement(object)
+React.isValidElement(object);
 ```
 
 </YouWillLearnCard>
@@ -313,7 +313,7 @@ useEffect(() => {
   return () => {
     unsubscribe();
   }
-}, [props.userId])
+}, [props.userId]);
 ```
 
 </YouWillLearnCard>
@@ -325,7 +325,7 @@ Read layout DOM state:
 ```js
 useLayoutEffect(() => {
   // Read DOM layout
-})
+});
 ```
 
 </YouWillLearnCard>
@@ -337,7 +337,7 @@ Insert styles into the DOM.
 ```js
 useInsertionEffect(() => {
   // Insert styles
-})
+});
 ```
 
 </YouWillLearnCard>
@@ -374,7 +374,7 @@ Return a memoized component.
 
 ```js
 const MyComponent = React.memo(function MyComponent(props) {
-    // ...
+  // ...
 });
 ```
 

beta/src/content/apis/react/useContext.md

@@ -917,7 +917,7 @@ ul, li { margin: 0; padding: 0; }
 
 ### Specifying a fallback default value {/*specifying-a-fallback-default-value*/}
 
-If React can't find any providers of that particular <CodeStep step={1}>context</CodeStep> in the parent tree, the context value returned by `useContext()` will be equal to the <CodeStep step={3}>default value</CodeStep> that you specified when you [created that context](/apis/react/useContext):
+If React can't find any providers of that particular <CodeStep step={1}>context</CodeStep> in the parent tree, the context value returned by `useContext()` will be equal to the <CodeStep step={3}>default value</CodeStep> that you specified when you [created that context](/apis/react/createContext):
 
 ```js [[1, 1, "ThemeContext"], [3, 1, "null"]]
 const ThemeContext = createContext(null);
@@ -1279,7 +1279,7 @@ function MyApp() {
 
 Here, the <CodeStep step={2}>context value</CodeStep> is a JavaScript object with two properties, one of which is a function. Whenever `MyApp` re-renders (for example, on a route update), this will be a *different* object pointing at a *different* function, so React will also have to re-render all components deep in the tree that call `useContext(AuthContext)`.
 
-In smaller apps, this is not a problem. However, there is no need to re-render them if the underlying data, like `currentUser`, has not changed. To help React take advantage of that fact, you may wrap the `login` function with [`useCallback`](/apis/react/usecallback) and wrap the object creation into [`useMemo`.](/apis/usememo) This is a performance optimization:
+In smaller apps, this is not a problem. However, there is no need to re-render them if the underlying data, like `currentUser`, has not changed. To help React take advantage of that fact, you may wrap the `login` function with [`useCallback`](/apis/react/useCallback) and wrap the object creation into [`useMemo`](/apis/react/useMemo). This is a performance optimization:
 
 ```js {1,6-9,11-14}
 import { useCallback, useMemo } from 'react';
@@ -1327,16 +1327,16 @@ function MyComponent() {
 
 #### Parameters {/*parameters*/}
 
-* `SomeContext`: The context that you've previously created with [`createContext`.](/apis/react/useContext) The context itself does not hold the information, it only represents the kind of information you can provide or read from components.
+* `SomeContext`: The context that you've previously created with [`createContext`](/apis/react/createContext). The context itself does not hold the information, it only represents the kind of information you can provide or read from components.
 
 #### Returns {/*returns*/}
 
-`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/apis/react/useContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes.
+`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/apis/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes.
 
 #### Caveats {/*caveats*/}
 
 * `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `<Context.Provider>` **needs to be *above*** the component doing the `useContext()` call.
-* React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/apis/memo) does not prevent the children receiving fresh context values from above.
+* React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/apis/react/memo) does not prevent the children receiving fresh context values from above.
 * If your build system produces duplicates modules in the output (which can happen if you use symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison.
 
 ---

beta/src/content/apis/react/useReducer.md

@@ -904,7 +904,7 @@ function MyComponent() {
 
 ---
 
-### `dispatch` functions {/*dispatch*/}
+### `dispatch` function {/*dispatch*/}
 
 The `dispatch` function returned by `useReducer` lets you update the state to a different value and trigger a re-render. You need to pass the action as the only argument to the `dispatch` function:
 
@@ -1081,7 +1081,7 @@ If you can't find the cause of this error, click on the arrow next to the error
 
 ### My reducer or initializer function runs twice {/*my-reducer-or-initializer-function-runs-twice*/}
 
-In [Strict Mode](/apis/react/strictmode), React will call your reducer and initializer functions twice. This shouldn't break your code.
+In [Strict Mode](/apis/react/StrictMode), React will call your reducer and initializer functions twice. This shouldn't break your code.
 
 This **development-only** behavior helps you [keep components pure.](/learn/keeping-components-pure) React uses the result of one of the calls, and ignores the result of the other call. As long as your component, initializer, and reducer functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice the mistakes and fix it.
 

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

@@ -545,7 +545,7 @@ If you try to pass a `ref` to your own component like this:
 ```js
 const inputRef = useRef(null);
 
-return <MyInput ref={inputRef} />
+return <MyInput ref={inputRef} />;
 ```
 
 You might get an error in the console: