typos

Author: dtauer

lessons/01-welcome/A-intro.md

@@ -14,9 +14,10 @@ keywords:
   - React Server Components
   - JavaScript
 ---
+
 > 🚨 You do not need to watch/read previous versions of this course, Intermediate React. This is just the sixth revision of the course. You **do** need to have taken [the Complete Intro to React v9][v9]
 
-Hello! And welcome to the sixth revision of Intermediate React as taught for Frontend Masters! This is a total rewrite of the Intermdiate curriculum and I am so excited for you to take it. Previous versions of this course focused on the ecosystem around React and [v5][v5] of this course is still valid for that: Tailwind, TypeScript, Redux, and other things. Beyond that, Frontend Masters has individual courses on all of those things as taught by other instructions. [Check out the learning path][path] to find all of those.
+Hello! And welcome to the sixth revision of Intermediate React as taught for Frontend Masters! This is a total rewrite of the Intermediate curriculum and I am so excited for you to take it. Previous versions of this course focused on the ecosystem around React and [v5][v5] of this course is still valid for that: Tailwind, TypeScript, Redux, and other things. Beyond that, Frontend Masters has individual courses on all of those things as taught by other instructions. [Check out the learning path][path] to find all of those.
 
 This course logically be divided into two halves: server-side React and performance with React. Both halves are going to focus on the capabilities of React itself rather than tools around it. At the end of the course, you are going to understand all of the tools available to you to write React apps. There are some more APIs that we don't cover but they're so niche that they're not even worth coverings - mostly for library authors.
 

lessons/01-welcome/B-my-setup.md

@@ -12,6 +12,7 @@ keywords:
   - AI in coding
   - Brian Holt
 ---
+
 ## Node.js
 
 You'll need to have a Node.js version installed, and preferably something after v20.16. I wrote this course with 22.14 but it should be fairly future-proof.
@@ -39,13 +40,13 @@ I _think_ this course would work with recent versions of [bun][bun] but it's unt
   - zsh – It comes with macOS now and I'm _way_ too lazy to switch back to bash.
   - [Dracula theme][dracula] – I like the pastels. I would use it in VS Code too if Dark+ wasn't ingrained in my blood.
   - [Starship Prompt][starship] – Very cool prompt that's just pretty. Also shows you what sort of project you're in which is occasionally useful
-  - [CaskaydiaCove Nerd Font][nerd] – This works with Starship prompt to give you the JS logos and all those extra glyphs. It's based on Cascadia Code.
+  - [Caskaydia Cove Nerd Font][nerd] – This works with Starship prompt to give you the JS logos and all those extra glyphs. It's based on Cascadia Code.
 
 ## A note on the use of AI in this course
 
 This course was written by me. I used AI in a few places for assistance, but every piece of code and every line of text on this site was written by me. The only places that it's actually AI written directly are the example rows of the database and the sample markdown - just filler content that I prompted Claude for. I do let OpenAI write all the SEO for these webpages (like all the OpenGraph keywords and descriptions.)
 
-My stance on AI is two-fold. In the hands of an experieced wielder AI is incredibly powerful. When I say experienced, I mean it in two ways: 1. experienced in writing the sort of code they're prompting for and 2. experienced in the usage of how to prompt and use AI well. In our case, AI will allow you to amplify the rate you can write React code, but that's only possible if you understand React. Sure, you can "vibe" code React with a very shallow understanding, but you're going to build tall houses of cards. You'll be better served by turning off the AI and handwriting code, understanding each precept, and then using that knowledge to co-write solid React with your AI toolkit.
+My stance on AI is two-fold. In the hands of an experienced wielder AI is incredibly powerful. When I say experienced, I mean it in two ways: 1. experienced in writing the sort of code they're prompting for and 2. experienced in the usage of how to prompt and use AI well. In our case, AI will allow you to amplify the rate you can write React code, but that's only possible if you understand React. Sure, you can "vibe" code React with a very shallow understanding, but you're going to build tall houses of cards. You'll be better served by turning off the AI and handwriting code, understanding each precept, and then using that knowledge to co-write solid React with your AI toolkit.
 
 Do I use AI? Yes, it helps me work faster. But like a manager reviewing their interns' code, I am responsible for what I decide to ship, and so I keep a tight rein on it.
 

lessons/02-react-render-modes/A-client-side-react.md

@@ -17,7 +17,7 @@ keywords:
 
 > 💡 This course assumes you have taken or at least understand the concepts in [The Complete Intro to React v9][v9]. If you don't, please go back and take that one first, this will make a lot more sense.
 
-React Server Components (which I will now abbreviate as RSC) are a concept that have been teased for a few years before landing in stable React in early 2025 when React 19 was officially realeased. No doubt they are a very interesting piece of technology and offer a lot of upside. They have some interesting trade-offs and we'll talk about them, but don't be quick to paint them as bad as some have, and definitely don't use them _everywhere_ either, they have a time and place.
+React Server Components (which I will now abbreviate as RSC) are a concept that have been teased for a few years before landing in stable React in early 2025 when React 19 was officially released. No doubt they are a very interesting piece of technology and offer a lot of upside. They have some interesting trade-offs and we'll talk about them, but don't be quick to paint them as bad as some have, and definitely don't use them _everywhere_ either, they have a time and place.
 
 Before we dive right into what an RSC is, it's helpful to understand _three_ other ways React renders your app.
 

lessons/03-rscs-without-a-framework/A-intro-to-react-server-components.md

@@ -15,6 +15,7 @@ keywords:
   - web development
   - RSC
 ---
+
 We've talked about client-side React apps (no server), static site generation apps (server runs only at compile time), and server-side rendered app (server renders initial page but then client does the rest). Now we're going to talk about react server components which involves the server even more.
 
 ## What are RSCs?
@@ -53,7 +54,7 @@ We'll end up writing a whole app in Next.js by the end of the course, but we're
 
 ## NotePasser
 
-Remember in school when you would pass notes by hand? No? Well, back in my day (_shakes fist at passing cloud_) we didn't have cell phones and had to rely on penmanship and steathily trying to pass a paper note to our friend in class.
+Remember in school when you would pass notes by hand? No? Well, back in my day (_shakes fist at passing cloud_) we didn't have cell phones and had to rely on penmanship and stealthily trying to pass a paper note to our friend in class.
 
 We're going to build an app inspired by that today, where we can pass notes from one user to another.
 

lessons/03-rscs-without-a-framework/B-rsc-dependencies.md

@@ -16,7 +16,7 @@ keywords:
   - web development
 ---
 
-There's a lot to getting this set up by hand, but bear with me, and I promsie at the end of this you're going to understand RSCs at a depth that allows you to make trade-offs of when to use them and when to avoid them.
+There's a lot to getting this set up by hand, but bear with me, and I promise at the end of this you're going to understand RSCs at a depth that allows you to make trade-offs of when to use them and when to avoid them.
 
 So, first, we're going to use Webpack and Babel directly (despite normally I'd suggest Vite.) Why? Because this allows us to use the React team's code directly without a layer indirection between Vite and Webpack. In general I suggest Vite for React devs.
 

lessons/03-rscs-without-a-framework/C-server-and-client-components.md

@@ -12,6 +12,7 @@ keywords:
   - Frontend Masters
   - JavaScript
 ---
+
 Let's put together the most simple React app so that we can render it using our newly-created framework.
 
 Let's make a directory, `src` and put a file in there a file called App.jsx
@@ -112,7 +113,7 @@ export default async function MyNotes() {
 }
 ```
 
-- We're doing SQL in React!? Well, yes, but also no. This all happening server-side before it's beening sent down to the browser. So it's basically the same as doing an API request but it's doing the full React lifecycle here on the server. That's one of the nicest aspects of RSC - you get to write all of this as if it was being done server side but instead of having a server portion and a client portion, it's all the same file!
+- We're doing SQL in React!? Well, yes, but also no. This all happening server-side before it's being sent down to the browser. So it's basically the same as doing an API request but it's doing the full React lifecycle here on the server. That's one of the nicest aspects of RSC - you get to write all of this as if it was being done server side but instead of having a server portion and a client portion, it's all the same file!
 - Notice that it's an `async` function - this is a fun ability that only server components have. Since it's all rendering once and on the server, you can do async functions for react server components.
 
 This is deliberately a pared-down feature set as we're going to only do the bare minimum to implement a by-hand RSC-server implementation. Once we get into Next.js I'll show you more advance React server component features.

lessons/03-rscs-without-a-framework/D-the-rsc-server.md

@@ -15,6 +15,7 @@ keywords:
   - web development
   - React Flight Protocol
 ---
+
 So now we have a React app ready to be served to clients. Let's write a quick Fastify server to do this. I just chose Fastify because I like it; there's no reason you couldn't do Express, Restify, or any other API framework for Node.js.
 
 Let's create a `server` directory in the root directory of our project. Put in there a main.js file and put in there
@@ -164,4 +165,4 @@ fastify.get("/react-flight", function reactFlightHandler(request, reply) {
 - Check out the react-flight request in your network tab to see how it gets rendered out.
 - I also like it shows you `Server` logs directly in the browser, makes it easy to see client and server console.logs in the same place.
 
-So there you go! Now your app is rendering partially on the server, partially on the client, and you've handcoded it all! This is a pain to do but once you involve a framework like Next.js this gets so much easier. Still, amazing job! Hopefully you peeked a little bit behind the curtain to see what React is doing for you.
+So there you go! Now your app is rendering partially on the server, partially on the client, and you've hand-coded it all! This is a pain to do but once you involve a framework like Next.js this gets so much easier. Still, amazing job! Hopefully you peeked a little bit behind the curtain to see what React is doing for you.

lessons/04-rscs-with-nextjs/A-abbreviated-intro-to-nextjs.md

@@ -32,7 +32,7 @@ npx [email protected] --js --app --src-dir --turbopack
 
 You can call the app whatever you want. I'd omit ESLint and Tailwind (no big deal if you want to include them, we're just not going to use them today.)
 
-Okay, let's shape this app to be what we need. We're going to continue on our path to building Note Passer, so let's install a few more depenencies
+Okay, let's shape this app to be what we need. We're going to continue on our path to building Note Passer, so let's install a few more dependencies:
 
 ```javascript
 npm i doodle.css@0.0.2 promised-sqlite3@2.1.0 sqlite3@5.1.7

lessons/04-rscs-with-nextjs/B-server-components.md

@@ -14,6 +14,7 @@ keywords:
   - web development
   - async functions
 ---
+
 So let's now do a server component where a user can read their own individual notes. This will look a lot like what we did with the no framework version!
 
 Make a folder inside the app directory called `my`. Inside that directory, put page.js. This will make the route /my where this page will show up.
@@ -95,7 +96,7 @@ export default async function MyNotes() {
 - We've built this to essentially the user is always logged in as user 1, brian. Feel free afterwards to add your own auth and make it a full-fledged app. [Neon Auth][neon] (which I helped build!) and [Clerk][clerk] are two great options here.
 - It's an async function
 - We're able to use the SQLite driver which is server-only normally
-- Again, we don't have to say `"use server";` because it's assumed that any componet without "use client" is a server component
+- Again, we don't have to say `"use server";` because it's assumed that any component without "use client" is a server component
 - Make sure to check out the network traffic! It's cool to see all the React Flight protocol stuff in action!
 
 [neon]: https://neon.tech/blog/neon-auth-is-here-get-authentication-in-a-couple-of-clicks

lessons/04-rscs-with-nextjs/D-server-and-client-components-together.md

@@ -11,6 +11,7 @@ keywords:
   - Frontend Masters
   - Brian Holt
 ---
+
 One question you should probably have by this point is "how do I mix server and client component?" Super valid - we're obviously going to need both in order to ship complete apps. So how do we do that? Just by being a little judicious of how nest things and using React's innate ability to nest components.
 
 Let's say we have a secret teacher view that allows the teacher to see all the notes passed between everyone in their class. And we want that data to be consistently updated so a teacher can always see the latest notes. How would we do that? Let's do it with polling - we'll query the database for rows in the database and then we'll continually update it.
@@ -56,7 +57,7 @@ export default async function fetchNotes(since) {
 }
 ```
 
-Another server function to fetch our latest update of rows. It'll only grab whatever is newer than what the client had. What's nice is we can share this function between the inital payload and the update function in the client. Let's go make clientPage.js then.
+Another server function to fetch our latest update of rows. It'll only grab whatever is newer than what the client had. What's nice is we can share this function between the initial payload and the update function in the client. Let's go make clientPage.js then.
 
 ```javascript
 "use client";