docs: fix typos

beta/plugins/markdownToHtml.js

@@ -2,7 +2,7 @@ const remark = require('remark');
 const externalLinks = require('remark-external-links'); // Add _target and rel to external links
 const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n
 const images = require('remark-images'); // Improved image syntax
-const unrwapImages = require('remark-unwrap-images'); // Removes <p> wrapper around images
+const unwrapImages = require('remark-unwrap-images'); // Removes <p> wrapper around images
 const smartyPants = require('./remark-smartypants'); // Cleans up typography
 const html = require('remark-html');
 
@@ -11,7 +11,7 @@ module.exports = {
     externalLinks,
     customHeaders,
     images,
-    unrwapImages,
+    unwrapImages,
     smartyPants,
   ],
   markdownToHtml,
@@ -22,7 +22,7 @@ async function markdownToHtml(markdown) {
     .use(externalLinks)
     .use(customHeaders)
     .use(images)
-    .use(unrwapImages)
+    .use(unwrapImages)
     .use(smartyPants)
     .use(html)
     .process(markdown);

beta/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;
@@ -300,7 +300,7 @@ function getInlineDecorators(
   }
   const inlineHighlightLines = getInlineHighlights(meta, code);
   const inlineHighlightConfig = inlineHighlightLines.map(
-    (line: InlineHiglight) => ({
+    (line: InlineHighlight) => ({
       ...line,
       elementAttributes: {'data-step': `${line.step}`},
       className: cn(
@@ -360,8 +360,8 @@ function getInlineHighlights(meta: string, code: string) {
   }
 
   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);

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

@@ -1183,7 +1183,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.
 
@@ -1755,7 +1755,7 @@ async function fetchPlaces(planetId) {
           id: 'vishniac',
           name: 'Vishniac'
         }]);
-      } else throw Error('Uknown planet ID: ' + planetId);
+      } else throw Error('Unknown planet ID: ' + planetId);
     }, 1000);
   });
 }
@@ -1923,7 +1923,7 @@ async function fetchPlaces(planetId) {
           id: 'vishniac',
           name: 'Vishniac'
         }]);
-      } else throw Error('Uknown planet ID: ' + planetId);
+      } else throw Error('Unknown planet ID: ' + planetId);
     }, 1000);
   });
 }
@@ -2086,7 +2086,7 @@ async function fetchPlaces(planetId) {
           id: 'vishniac',
           name: 'Vishniac'
         }]);
-      } else throw Error('Uknown planet ID: ' + planetId);
+      } else throw Error('Unknown planet ID: ' + planetId);
     }, 1000);
   });
 }

beta/src/content/learn/passing-data-deeply-with-context.md

@@ -981,7 +981,7 @@ export const places = [{
 }, {
   id: 5, 
   name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
   imageId: 'rTqKo46'
 }, {
   id: 6,
@@ -1120,7 +1120,7 @@ export const places = [{
 }, {
   id: 5, 
   name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
   imageId: 'rTqKo46'
 }, {
   id: 6,

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

@@ -1609,7 +1609,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>
 
@@ -2045,7 +2045,7 @@ export default function ChatRoom({ roomId, createConnection, onMessage }) {
 
 Unlike the `onMessage` prop, the `onReceiveMessage` Effect Event is not reactive. This is why it doesn't need to be a dependency of your Effect. As a result, changes to `onMessage` won't cause the chat to re-connect.
 
-You can't do the same with `createConnection` because it *should* be reactive. You *want* the Effect to re-trigger if the user switches between an encrypted and an unencryption connection, or if the user switches the current room. However, because `createConnection` is a function, you can't check whether the information it reads has *actually* changed or not. To solve this, instead of passing `createConnection` down from the `App` component, pass the raw `roomId` and `isEncrypted` values:
+You can't do the same with `createConnection` because it *should* be reactive. You *want* the Effect to re-trigger if the user switches between an encrypted and an unencrypted connection, or if the user switches the current room. However, because `createConnection` is a function, you can't check whether the information it reads has *actually* changed or not. To solve this, instead of passing `createConnection` down from the `App` component, pass the raw `roomId` and `isEncrypted` values:
 
 ```js {2-3}
       <ChatRoom

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

@@ -35,7 +35,7 @@ To display a progress indicator, render the [built-in browser `<progress>`](http
 Additionally, `<progress>` supports these props:
 
 * [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max): A number. Specifies the maximum `value`. Defaults to `1`.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-value): A number between `0` and `max`, or `null` for intermedinate progress. Specifies how much was done.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-value): A number between `0` and `max`, or `null` for intermediate progress. Specifies how much was done.
 
 ---
 

beta/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.

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

@@ -106,7 +106,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 can confirm 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 can confirm that the second `<p>` got placed directly into the `<body>`:
 
 ```html {4-6,9}
 <body>

beta/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.** For example, it might look like this:
+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:
 
 ```js [[1, 1, "App"]]
 export default function App() {

beta/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.** For example, it might look like this:
+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:
 
 ```js [[1, 1, "App"]]
 export default function App() {

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

@@ -139,7 +139,7 @@ Keep in mind that by exposing a ref to the DOM node inside your component, you'r
 
 #### Focusing a text input {/*focusing-a-text-input*/}
 
-Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component fowards that ref to the browser `<input>`. This lets the `Form` component focus the `<input>`.
+Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component forwards that ref to the browser `<input>`. This lets the `Form` component focus the `<input>`.
 
 <Sandpack>
 

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

@@ -1364,7 +1364,7 @@ You might have a provider without a `value` in the tree:
 
 If you forget to specify `value`, it's like passing `value={undefined}`.
 
-You may have also mistakingly used a different prop name by mistake:
+You may have also mistakenly used a different prop name by mistake:
 
 ```js {1,2}
 // 🚩 Doesn't work: prop should be called "value"

content/blog/2013-10-3-community-roundup-9.md

@@ -69,7 +69,7 @@ The video will be available soon on the [JSConf EU website](http://2013.jsconf.e
 
 [Ross Allen](https://twitter.com/ssorallen) working at [Mesosphere](http://mesosphere.io/) combined [Turbolinks](https://github.com/rails/turbolinks/), a library used by Ruby on Rails to speed up page transition, and React.
 
-> "Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.
+> "Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetches the full page via XHR.
 >
 > The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.
 >

content/blog/2013-12-23-community-roundup-12.md

@@ -69,7 +69,7 @@ React declarative approach is well suited to write games. [Cheng Lou](https://gi
 
 [William Högman Rudenmalm](http://blog.whn.se/) wrote an article on how to write good React components. This is full of good advice.
 
-> The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.
+> The idea of dividing software into smaller parts or components is hardly new - It is the essence of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.
 >
 > The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.
 >

content/blog/2016-04-07-react-v15.md

@@ -211,7 +211,7 @@ Each of these changes will continue to work as before with a new warning until t
 - React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.  
 <small>[@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510)</small>
 
-- React DOM does not mistakingly coerce `children` to strings for Web Components.  
+- React DOM does not mistakenly coerce `children` to strings for Web Components.  
 <small>[@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093)</small>
 
 - React DOM now correctly normalizes SVG `<use>` events.  

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

@@ -269,7 +269,7 @@ const ParagraphView = Backbone.View.extend({
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/gWgOYL?editors=0010)
 
-It is important that we also call `root.unmount()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
+It is important that we also call `root.unmount()` in the `remove` method so that React deregisters event handlers and other resources associated with the component tree when it is detached.
 
 When a component is removed *from within* a React tree, the cleanup is performed automatically, but because we are removing the entire tree by hand, we must call this method.
 

examples/16-3-release-blog-post/forward-ref-example.js

@@ -28,7 +28,7 @@ function withTheme(Component) {
 // Here we assume that FancyButton has been imported into the current scope
 const FancyThemedButton = withTheme(FancyButton);
 
-// Create a ref using the new Referenace API, as above
+// Create a ref using the new Reference API, as above
 // highlight-next-line
 const fancyButtonRef = React.createRef();
 

gatsby/onCreateNode.js

@@ -73,7 +73,7 @@ module.exports = exports.onCreateNode = ({node, actions, getNode}) => {
       });
 
       // Used to generate a GitHub edit link.
-      // this presumes that the name in gastby-config.js refers to parent folder
+      // this presumes that the name in gatsby-config.js refers to parent folder
       createNodeField({
         node,
         name: 'path',

src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -144,7 +144,7 @@ class StickyResponsiveSidebar extends Component<Props, State> {
             backgroundColor: colors.darker,
             bottom: 44, // iOS Safari's inert "bottom 44px"
             color: colors.brand,
-            display: 'none', // gets overriden at small screen sizes
+            display: 'none', // gets overridden at small screen sizes
             cursor: 'pointer',
             position: 'fixed',
             right: 20,

src/pages/acknowledgements.html.js

@@ -14,7 +14,7 @@ import {sharedStyles} from 'theme';
 
 import names from '../../content/acknowledgements.yml';
 
-const Acknowlegements = ({data, location}) => (
+const Acknowledgements = ({data, location}) => (
   <Layout location={location}>
     <Container>
       <div css={sharedStyles.articleLayout.container}>
@@ -85,4 +85,4 @@ const Acknowlegements = ({data, location}) => (
   </Layout>
 );
 
-export default Acknowlegements;
+export default Acknowledgements;

src/utils/patchDOMForGoogleTranslate.js

@@ -15,9 +15,9 @@ export default function patchDOMForGoogleTranslate() {
     return;
   }
 
-  // $FlowFixMe Intentionally monkepatching.
+  // $FlowFixMe Intentionally monkeypatching.
   const originalRemoveChild = Node.prototype.removeChild;
-  // $FlowFixMe Intentionally monkepatching.
+  // $FlowFixMe Intentionally monkeypatching.
   Node.prototype.removeChild = function(child) {
     if (child.parentNode !== this) {
       if (typeof console !== 'undefined') {
@@ -32,9 +32,9 @@ export default function patchDOMForGoogleTranslate() {
     return originalRemoveChild.apply(this, arguments);
   };
 
-  // $FlowFixMe Intentionally monkepatching.
+  // $FlowFixMe Intentionally monkeypatching.
   const originalInsertBefore = Node.prototype.insertBefore;
-  // $FlowFixMe Intentionally monkepatching.
+  // $FlowFixMe Intentionally monkeypatching.
   Node.prototype.insertBefore = function(newNode, referenceNode) {
     if (referenceNode && referenceNode.parentNode !== this) {
       if (typeof console !== 'undefined') {