Fix multiple typos

lessons/code-splitting.md

@@ -34,7 +34,7 @@ const SearchParams = lazy(() => import("./SearchParams"));
 </Suspense>;
 ```
 
-That's it! Now Parcel will handle the rest of the glueing together for you!! Your initial bundle will load, then after that it will resolve that you want to load another piece, show the loading component (we show a lame amount of text but this could be fancy loading screen.) This Details page isn't too big but imagine if it had libraries like Moment or Lodash on it! It could be a big savings.
+That's it! Now Parcel will handle the rest of the gluing together for you!! Your initial bundle will load, then after that it will resolve that you want to load another piece, show the loading component (we show a lame amount of text but this could be fancy loading screen.) This Details page isn't too big but imagine if it had libraries like Moment or Lodash on it! It could be a big savings.
 
 Now our whole app loads async. What's great is that we can show the user _something_ (in this case just the header and the loading h1 but you should do better UX than that) and then load the rest of the content. You get to make your page fast.
 

lessons/context.md

@@ -14,7 +14,7 @@ Context (mostly) replaces Redux. Well, typically. It fills the same need as Redu
 
 Again, this is a contrived example. What we're doing here is overkill and should be accomplished via React's normal patterns. A better example would be something like a user's logged-in information. But let's check out what this looks like with theme.
 
-Imagine if we wanted to let the user choose a simple theme for the site. And we want to make that theme stick as the user navigates across different pages. This means the state has to live outside of the route where it's selected. We could use Redux for this, we could use React itself, or we're going to use context, to teach you what that looks like.
+Imagine if we wanted to let the user choose a simple theme for the site. And we want to make that theme stick as the user navigates across different pages. This means the state has to live outside of the route where it's selected. We could use Redux for this, or we could use React itself, but we're going to use context, to teach you what that looks like.
 
 Make a new file called ThemeContext.js:
 

lessons/custom-hooks.md

@@ -8,7 +8,7 @@ description: "You can even make your own hooks! Brian shows how to extract logic
 
 For now, we're going to make a custom hook of our own. Just like `useState` is a hook, there are a few others like `useEffect` (which we'll use in this lesson), `useReducer` (for doing Redux-like reducers), `useRefs` (for when you need to have programmatic access to a DOM node), and `useContext` (for using React's context which we'll do shortly as well.) But like React hooks, we can use these hooks to make our re-usable hooks.
 
-We need a list of breeds based on which animal is selected. In general this would be nice to request _once_ and if a user returns later to the same animal, that we would have some cache of that. We could implement in the component (and in general I probably would, this is overengineering it for just one use) but let's make a custom hook for it.
+We need a list of breeds based on which animal is selected. In general this would be nice to request _once_ and if a user returns later to the same animal, that we would have some cache of that. We could implement it in the component (and in general I probably would, this is overengineering it for just one use) but let's make a custom hook for it.
 
 Make a new file called `useBreedList.js` in src and put this in it.
 

lessons/error-boundaries.md

@@ -92,7 +92,7 @@ if (this.state.redirect) {
 ```
 
 - `componentDidUpdate` is how you react to state and prop changes with class components. In this case we're reacting to the state changing. You're also passed the previous state and props in the paremeters (which we didn't need) in case you want to detect what changed.
-- Rendering Redirect components is how you do redirects with React Router. You can also do it progamatically but I find this approach elegant.
+- Rendering Redirect components is how you do redirects with React Router. You can also do it programatically but I find this approach elegant.
 
 > 🏁 [Click here to see the state of the project up until now: 10-error-boundaries][step]
 

lessons/react-router.md

@@ -10,7 +10,7 @@ description: "One component should do one thing. Brian shows you how to break do
 
 React Router is by far the most popular client side router in the React community. It is mature, being used by big companies, and battle tested at large scales. It also has a lot of really cool capabilities, some of which we'll examine here.
 
-What we want to do now is to add a second page to our application: a Details page where you can out more about each animal.
+What we want to do now is to add a second page to our application: a Details page where you can find out more about each animal.
 
 Let's quickly make a second page so we can switch between the two. Make file called Details.js.
 

lessons/ts-modal.md

@@ -12,7 +12,7 @@ TypeScript is a thin layer on top of JavaScript that adds the power of a static
 
 This is going to be a brief intro: how to set it up and get going with it. If you want more TypeScript goodness, check out [Mike North's course][mike].
 
-First thing, `npm install -D typescript@4.2.2`. Then run `npx tsc --init`. `npx` will run the TypeScript tool directly from your node_modules and init your project for you. You'll see now a tsconfig.json. We don't need to set up anything else since Parcel already knows how to handle TypeScript files. Open your new `tsconfig.json` file and uncomment the `jsx` field. This lets TypeScript that you're writing React. Then update the target to be `ES2020` so that you can use async / await and promises.
+First thing, `npm install -D typescript@4.2.2`. Then run `npx tsc --init`. `npx` will run the TypeScript tool directly from your node_modules and init your project for you. You'll see now a tsconfig.json. We don't need to set up anything else since Parcel already knows how to handle TypeScript files. Open your new `tsconfig.json` file and uncomment the `jsx` field. This lets TypeScript know that you're writing React. Then update the target to be `ES2020` so that you can use async / await and promises.
 
 Next we need to install the types for our project. Not all projects are written in TypeScript so another project, DefinitelyTyped, provides third party types for your library. In order to install these types, run `npm install -D @types/react@17.0.2 @types/react-dom@17.0.1 @types/react-router-dom@5.1.7`. This will grab all these type definitions.
 

lessons/useeffect.md

@@ -44,10 +44,10 @@ async function requestPets() {
 
 - We're taking advantage of closures here that if we define the requestPets function _inside_ of the render that it will have access to that scope and can use all the hooks there.
 - We could have actually put requestPets inside of the effect but we're going to use it again here in a sec with the submit button.
-- the `[]` at the end of the useEffect is where you declare your data dependencies. React wants to know _when_ to run that effect again. You don't give it data dependencies, it assumes any time any hook changes that you should run the effect again. This is bad because that would mean any time setPets gets called it'd re-run render and all the hooks again. See a problem there? It'd run infinitely since requestPets calls setPets.
+- the `[]` at the end of the useEffect is where you declare your data dependencies. React wants to know _when_ to run that effect again. If you don't give it data dependencies, it assumes any time any hook changes that you should run the effect again. This is bad because that would mean any time setPets gets called it'd re-run render and all the hooks again. See a problem there? It'd run infinitely since requestPets calls setPets.
 - You can instead provide which hooks to watch for changes for. In our case, we actually only want it to run once, on creation of the component, and then to not run that effect again. (we'll do searching later via clicking the submit button) You can accomplish this only-run-on-creation by providing an empty array.
 - The `// eslint-disable-line react-hooks/exhaustive-deps` tells eslint to shut up about this one run on this one line. Why? Because eslint tries to help you with you the data dependencies rule by watching for anything that _could_ change. In this case, in theory the function could change but we know it's not important. You'll end up silencing this rule a fair bit.
-- At the end, we gather take the pets we got back from the API and create Pet components out of each of them.
+- At the end, we take the pets we got back from the API and create Pet components out of each of them.
 
 > 🏁 [Click here to see the state of the project up until now: 05-useeffect][step]