FIX: Various typos across codebase :) (#5767)

Author: Pranav-yadav

src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -10,7 +10,7 @@ import {css} from '@codemirror/lang-css';
 import rangeParser from 'parse-numeric-range';
 import {CustomTheme} from '../Sandpack/Themes';
 
-interface InlineHiglight {
+interface InlineHighlight {
   step: number;
   line: number;
   startColumn: number;
@@ -318,7 +318,7 @@ function getInlineDecorators(
   }
   const inlineHighlightLines = getInlineHighlights(meta, code);
   const inlineHighlightConfig = inlineHighlightLines.map(
-    (line: InlineHiglight) => ({
+    (line: InlineHighlight) => ({
       ...line,
       elementAttributes: {'data-step': `${line.step}`},
       className: cn(
@@ -371,15 +371,15 @@ function getHighlightLines(meta: string): number[] {
  * -> The meta is `{1-3,7} [[1, 1, 'count', [2, 4, 'setCount']] App.js active`
  */
 function getInlineHighlights(meta: string, code: string) {
-  const INLINE_HIGHT_REGEX = /(\[\[.*\]\])/;
-  const parsedMeta = INLINE_HIGHT_REGEX.exec(meta);
+  const INLINE_HEIGHT_REGEX = /(\[\[.*\]\])/;
+  const parsedMeta = INLINE_HEIGHT_REGEX.exec(meta);
   if (!parsedMeta) {
     return [];
   }
 
   const lines = code.split('\n');
-  const encodedHiglights = JSON.parse(parsedMeta[1]);
-  return encodedHiglights.map(([step, lineNo, substr, fromIndex]: any[]) => {
+  const encodedHighlights = JSON.parse(parsedMeta[1]);
+  return encodedHighlights.map(([step, lineNo, substr, fromIndex]: any[]) => {
     const line = lines[lineNo - 1];
     let index = line.indexOf(substr);
     const lastIndex = line.lastIndexOf(substr);

src/content/learn/escape-hatches.md

@@ -314,7 +314,7 @@ Read **[Lifecycle of Reactive Events](/learn/lifecycle-of-reactive-effects)** to
 
 <Wip>
 
-This section describes an **experimental API that has not yet been released** in a stable vesion of React.
+This section describes an **experimental API that has not yet been released** in a stable version of React.
 
 </Wip>
 

src/content/learn/lifecycle-of-reactive-effects.md

@@ -1187,7 +1187,7 @@ body {
 
 <Solution>
 
-The problem with the original code was suppressing the dependency linter. If you remove the suppression, you'll see that this Effect depends on the `handleMove` function. This makes sense: `handleMove` is declared inside the component body, which makes it a reactive value. Every reactive value must be specified as a depedency, or it can potentially get stale over time!
+The problem with the original code was suppressing the dependency linter. If you remove the suppression, you'll see that this Effect depends on the `handleMove` function. This makes sense: `handleMove` is declared inside the component body, which makes it a reactive value. Every reactive value must be specified as a dependency, or it can potentially get stale over time!
 
 The author of the original code has "lied" to React by saying that the Effect does not depend (`[]`) on any reactive values. This is why React did not re-synchronize the Effect after `canMove` has changed (and `handleMove` with it). Because React did not re-synchronize the Effect, the `handleMove` attached as a listener is the `handleMove` function created during the initial render. During the initial render, `canMove` was `true`, which is why `handleMove` from the initial render will forever see that value.
 
@@ -1759,7 +1759,7 @@ async function fetchPlaces(planetId) {
           id: 'vishniac',
           name: 'Vishniac'
         }]);
-      } else throw Error('Uknown planet ID: ' + planetId);
+      } else throw Error('Unknown planet ID: ' + planetId);
     }, 1000);
   });
 }
@@ -1927,7 +1927,7 @@ async function fetchPlaces(planetId) {
           id: 'vishniac',
           name: 'Vishniac'
         }]);
-      } else throw Error('Uknown planet ID: ' + planetId);
+      } else throw Error('Unknown planet ID: ' + planetId);
     }, 1000);
   });
 }
@@ -2090,7 +2090,7 @@ async function fetchPlaces(planetId) {
           id: 'vishniac',
           name: 'Vishniac'
         }]);
-      } else throw Error('Uknown planet ID: ' + planetId);
+      } else throw Error('Unknown planet ID: ' + planetId);
     }, 1000);
   });
 }

src/content/learn/removing-effect-dependencies.md

@@ -611,7 +611,7 @@ function ChatRoom({ roomId }) {
 
 <Wip>
 
-This section describes an **experimental API that has not yet been released** in a stable vesion of React.
+This section describes an **experimental API that has not yet been released** in a stable version of React.
 
 </Wip>
 
@@ -1611,7 +1611,7 @@ label, button { display: block; margin-bottom: 5px; }
 
 Your Effect is re-running because it depends on the `options` object. Objects can be re-created unintentionally, you should try to avoid them as dependencies of your Effects whenever possible.
 
-The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and it pass to `createConnnection`:
+The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and it pass to `createConnection`:
 
 <Sandpack>
 

src/content/learn/reusing-logic-with-custom-hooks.md

@@ -839,7 +839,7 @@ Every time your `ChatRoom` component re-renders, it passes the latest `roomId` a
 
 <Wip>
 
-This section describes an **experimental API that has not yet been released** in a stable vesion of React.
+This section describes an **experimental API that has not yet been released** in a stable version of React.
 
 </Wip>
 

src/content/learn/separating-events-from-effects.md

@@ -402,7 +402,7 @@ You need a way to separate this non-reactive logic from the reactive Effect arou
 
 <Wip>
 
-This section describes an **experimental API that has not yet been released** in a stable vesion of React.
+This section describes an **experimental API that has not yet been released** in a stable version of React.
 
 </Wip>
 
@@ -580,7 +580,7 @@ You can think of Effect Events as being very similar to event handlers. The main
 
 <Wip>
 
-This section describes an **experimental API that has not yet been released** in a stable vesion of React.
+This section describes an **experimental API that has not yet been released** in a stable version of React.
 
 </Wip>
 
@@ -880,7 +880,7 @@ Read [Removing Effect Dependencies](/learn/removing-effect-dependencies) for oth
 
 <Wip>
 
-This section describes an **experimental API that has not yet been released** in a stable vesion of React.
+This section describes an **experimental API that has not yet been released** in a stable version of React.
 
 </Wip>
 

src/content/reference/react-dom/components/select.md

@@ -48,7 +48,7 @@ If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead
 
 * `defaultValue`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Specifies [the initially selected option.](#providing-an-initially-selected-option)
 
-These `<select>` props are relevant both for uncontrolled and controlled select boxs:
+These `<select>` props are relevant both for uncontrolled and controlled select boxes:
 
 * [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
 * [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autofocus): A boolean. If `true`, React will focus the element on mount.

src/content/reference/react-dom/createPortal.md

@@ -108,7 +108,7 @@ export default function MyComponent() {
 
 </Sandpack>
 
-Notice how the second paragraph visually appears outside the parent `<div>` with the border. If you inspect the DOM structure with developer tools, you'll see that the second `<p>` got placed direcly into the `<body>`:
+Notice how the second paragraph visually appears outside the parent `<div>` with the border. If you inspect the DOM structure with developer tools, you'll see that the second `<p>` got placed directly into the `<body>`:
 
 ```html {4-6,9}
 <body>

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

@@ -92,7 +92,7 @@ app.use('/', (request, response) => {
 });
 ```
 
-Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>boostrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.**
+Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>bootstrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.**
 
 For example, it might look like this:
 

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

@@ -93,7 +93,7 @@ async function handler(request) {
 }
 ```
 
-Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>boostrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.**
+Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>bootstrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.**
 
 For example, it might look like this: