Merge pull request #1 from btholt/dustin/edits

spelling, links, etc

lessons/01-welcome/A-intro.md

@@ -13,6 +13,7 @@ keywords:
   - Vite
   - JSX
 ---
+
 > 🚨 You do not need to watch/read previous versions of this course. This is just the ninth revision of the course.
 
 Hello! And welcome to the Complete Intro to React, version 9. In this course you will go from not knowing anything about React to being job ready. This course teaches all the core concepts of React aiming to be the most useful. You will learn React from a first-principles methodology – we will start with no build tools or anything like that, just vanilla JavaScript and React. Over time we add tools like Vite, JSX, ESLint, Prettier, etc. so you can learn how to construct your own stack from scratch. I will teach a few ecosystem tools as well, testing, and what's coming soon for React.
@@ -48,11 +49,17 @@ I write these courses and take care to not make mistakes. However when teaching
 
 ## How the repo works
 
-There are two repos for this class: [the website you're currently on][site] and [the example projects][projects].
+There are two repos for this class: [the website you're currently on][site] and [the example projects][projects]. To get set up, clone or [download][zip] the projects repo:
+
+```bash
+git clone https://github.com/btholt/citr-v9-project.git
+```
 
 Every step of this project will have a folder that will be a snapshot of where the project is at that step. If you get stuck, want to copy/paste some long bit of code you don't feel like writing, or just want to walk through the code at that point, please do! The primary goal of this is for you to learn so as long as you're learning there's no cheating!
 
-The naming format will be `XX-<name of the lesson>` so you can get a rough idea of order and which lesson the step is coming from. In each snapshot you'll have to run `npm install` again since it'll literally just be another whole copy of the project.
+The naming format will be `XX-<name of the lesson>` so you can get a rough idea of order and which lesson the step is coming from. In each snapshot you'll have to run `npm install` again since they are another whole copy of the project.
+
+We're going to be starting from scratch, but you'll need the repo downloaded because there's an `api` directory that will be used later in the course.
 
 > And one last request! [Please star this repo][site]. It helps the course be more discoverable and with my fragile ego.
 
@@ -63,3 +70,5 @@ The naming format will be `XX-<name of the lesson>` so you can get a rough idea
 [site]: https://github.com/btholt/complete-intro-to-react-v9
 [projects]: https://github.com/btholt/citr-v9-project
 [issues]: https://github.com/btholt/complete-intro-to-react-v9/issues
+[neon]: https://neon.tech/
+[zip]: https://github.com/btholt/citr-v9-project/archive/refs/heads/main.zip

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

@@ -13,9 +13,10 @@ keywords:
   - Visual Studio Code
   - Starship Prompt
 ---
+
 ## Node.js
 
-You'll need to have a Node.js version installed, and preferably something after v20.6. I wrote this course with 20.16 but it should be fairly future-proof.
+You'll need to have a Node.js version installed, and preferably something after v20.16. I wrote this course with 20.16 but it should be fairly future-proof.
 
 I use [fnm][fnm] to manage my Node.js versions (similar to nvm).
 

lessons/02-no-frills-react/A-react-without-a-build-step.md

@@ -17,31 +17,29 @@ keywords:
 
 Let's start by writing pure React. No compile step. No JSX. No Babel. No Webpack or Vite. Just some JavaScript on a page.
 
-Let's start your project. Create your project directory. I'm going to call mine `pizza` since we're going to be building a pizza ordering system throughout this course. Create an index.html and put it into a `src/` directory inside of your project folder. In index.html put:
+Let's start your project. Create your project directory inside the repo. I'm going to call mine `pizza` since we're going to be building a pizza ordering system throughout this course. Open that directory in VS Code or your editor of choice. Create an index.html and add this markup:
 
-```javascript
+```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" href="./style.css">
-  <title>Adopt Me</title>
-</head>
-
-<body>
-  <div id="root">not rendered</div>
-  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
-  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
-  <script src="./src/App.js"></script>
-</body>
-
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Padre Gino's</title>
+  </head>
+
+  <body>
+    <div id="root">not rendered</div>
+    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
+    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
+    <script src="./src/App.js"></script>
+  </body>
 </html>
 ```
 
-Let's run this. We could open it directly in our browser but I like using [serve][serve]. Run `npx serve` and open localhost:3000 in your browser.
+Let's run this. We could open it directly in our browser but I like using [serve][serve]. Run `npx serve` and open [http://localhost:3000/]() in your browser.
 
 - Pretty standard HTML5 document. If this is confusing, I teach another course called [Intro to Web Dev][webdev] that can help you out.
 - We're adding a root div. We'll render our React app here in a sec. It doesn't _have_ to be called root, just a common practice.
@@ -52,7 +50,7 @@ Let's run this. We could open it directly in our browser but I like using [serve
 
 > Let's add some style! [Click here][style] to get the stylesheet for this course. Make a file called style.css in src/ and paste the previous file there. If you follow along with the course and use the same class names, the styles will be applied for you automatically. This isn't a course on CSS so I make no assertion it's any good!
 
-Make a new directory calle src and a new file called App.js in that directory and put this in there.
+Make a new directory called `src` and a new file called `App.js` in that directory and put this in there.
 
 ```javascript
 const App = () => {
@@ -83,5 +81,5 @@ This is about the simplest React app you can build.
 > ReactDOM.createRoot is a new API as of React v18. The old `ReactDOM.render` is still available (and deprecated) but it'll render your app in "legacy" mode which won't use all the fun new features packed into React v18
 
 [webdev]: https://frontendmasters.com/courses/web-development-v3/
-[style]: https://raw.githubusercontent.com/btholt/citr-v9-project/master/01-no-frills-react/src/style.css
+[style]: https://github.com/btholt/citr-v9-project/blob/main/api/public/style.css
 [serve]: https://github.com/vercel/serve

lessons/02-no-frills-react/B-components.md

@@ -13,9 +13,10 @@ keywords:
   - reusable components
   - dynamic apps
 ---
-Now that we've done that, let's separate this out from a script tag on the DOM to its own script file (best practice.) Make a new file in your `src` directory called `App.js` and cut and paste your code into it.
 
-Modify your code so it looks like:
+Now that we've done that, let's separate this out from a script tag on the DOM to its own script file (best practice.)
+
+Modify your code in `App.js` so it looks like:
 
 ```javascript
 const Pizza = () => {
@@ -42,7 +43,7 @@ root.render(React.createElement(App));
 > 🚨 You will be seeing a console warning `Warning: Each child in a list should have a unique "key" prop.` in your browser console. React's dev warnings are trying to help your code run faster. Basically, React tries to keep track of components that are swapped in order. In a list, it does that by you giving it a unique key it can track. If it sees two things have swapped, it'll just move the components instead of re-rendering.
 
 - To make an element have multiple children, just pass it an array of elements.
-- We created a second new component, the `Pizza` component. This component represents one pet. When you have distinct ideas represented as markup, that's a good idea to separate that it into a component like we did here.
+- We created a second new component, the `Pizza` component. This component represents one pizza. When you have distinct ideas represented as markup, that's a good idea to separate that it into a component like we did here.
 - Since we have a new `Pizza` component, we can use it multiple times! We just use multiple calls to `React.createElement`.
 - In `createElement`, the last two parameters are optional. Since Pizza has no props or children (it could, we just didn't make it use them yet) we can just leave them off.
 

lessons/03-tools/A-npm.md

@@ -14,12 +14,15 @@ keywords:
   - JavaScript tools
 ---
 
-npm does not stand for Node.js Package Manager. It is, however, the package manager for Node.js. (They don't say what it stands for.) It also has all the packages in the front end scene. npm makes a command line tool, called `npm` as well. `npm` allows you to bring in code from the npm registry which is a bunch of open source modules that people have written so you can use them in your project. Whenever you run `npm install react` (don't do this yet), it will install the latest version of React from the registry.
+## npm
 
-In order to start an npm project, run `npm init -y` at the root of your project. If you don't have Node.js installed, please go install that too. When you run `npm init` it'll ask you a bunch of questions. If you don't know the answer or don't care, just hit enter. You can always modify package.json later. This will allow us to get started installing and saving packages.
+npm does not stand for Node.js Package Manager. It is, however, the package manager for Node.js (they don't say what it stands for). It also has all the packages in the front end scene. npm makes a command line tool, called `npm` as well. `npm` allows you to bring in code from the npm registry which is a bunch of open source modules that people have written so you can use them in your project. Whenever you run `npm install react` (don't do this yet), it will install the latest version of React from the registry.
+
+In order to start an npm project, run `npm init -y` at the root of your project. If you don't have Node.js installed, [please go install that too][node]. When you run `npm init` it'll ask you a bunch of questions. If you don't know the answer or don't care, just hit enter. You can always modify package.json later. This will allow us to get started installing and saving packages.
 
 ## pnpm
 
 Another option here is to use [pnpm][pnpm]. pnpm is a newer package manager that makes different tradeoffs than npm, notably how it chooses to organize the node_modules directory. npm maintains a flat file structure and installs everything flat whereas pnpm does more symlinking. Both are fine, feel free to choose what works for you. I'll be using npm because it's easier for students to use.
 
 [pnpm]: https://pnpm.io/motivation
+[node]: https://nodejs.org/en

lessons/03-tools/B-code-formatting.md

@@ -14,6 +14,9 @@ keywords:
   - Visual Studio Code
   - npm scripts
 ---
+
+## Prettier
+
 It's important to keep quality high when writing code. Or at least that's how I sell ESLint and Prettier to my co-workers. In reality I'm super lazy and want the machine to do as much work as possible so I can focus more on architecture and problem-solving and less on syntax and style. While there are many tools that can help you keep code quality high, these two I consider core to my workflow.
 
 [Prettier][prettier] is an amazing tool from the brain of [James Long][jlongster]. James, like many of us, was sick of having to constantly worry about the style of his code: where to stick indents, how many, when to break lines, etc etc. Coming from languages like Go, Reason, or Elm where all that is just taken care of by the tooling for the language, this quickly wears. James did something about it and made a tool to take care of it: Prettier.

lessons/03-tools/C-linting.md

@@ -13,15 +13,17 @@ keywords:
   - Brian Holt
 ---
 
+## ESLint
+
 On top of Prettier which takes of all the formatting, you may want to enforce some code styles which pertain more to usage: for example you may want to force people to never use `with` which is valid JS but ill advised to use. [ESLint][eslint] comes into play here. It will lint for this problems.
 
-First of all, run `npm install -D [email protected] [email protected] [email protected]` to install eslint in your project development dependencies. Then you may configure its functionalities.
+First of all, run `npm install -D [email protected] [email protected] [email protected]` to install ESLint in your project development dependencies. Then you may configure it.
 
 There are dozens of preset configs for ESLint and you're welcome to use any one of them. The [Airbnb config][airbnb] is very popular, as is the standard config (both of which I taught in previous versions of this class). I'm going to use a looser one for this class: the recommended JS config from ESLint. Let's create an `eslint.config.mjs` file to start linting our project.
 
-> We're using .mjs (module JS) because we want to use import/export for modules instead of require/
+> We're using .mjs (module JS) because we want to use import/export for modules instead of require
 
-Create this file called `eslint.config.mjs`.
+Add this to the `eslint.config.mjs` file:
 
 ```js
 import js from "@eslint/js";
@@ -46,9 +48,9 @@ export default [
 ];
 ```
 
-- ESLint changed a lot with version 9. In previous versions of this course we did used the JSON version of configuration and that's no longer supported; you _have_ to do their newer "flat" version of config (honestly it is better.)
-- The `/** @type {import('eslint').Linter.Config[]} */` is a VS Code / TypeScript trick to be able to do autocompletions on the config object. Super helpful to have the types available right in VS Code. It's not required.
-- [globals][globals] is a package that is just a big JSON file of what's available in each environment. We're going to be in Node.js and Browser environments so we grabbed those two. If I was being a bit more discerning I'd carefully only apply browser configs to browser files and node configs to Node.js files.
+- ESLint changed a lot with version 9. In previous versions of this course we used the JSON version of configuration which is no longer supported. You _have_ to do their newer "flat" version of config (honestly it is better.)
+- The `/** @type {import('eslint').Linter.Config[]} */` is a VS Code / TypeScript trick to be able to do auto-completions on the config object. Super helpful to have the types available right in VS Code. It's not required.
+- [globals][globals] is a package that is just a big JSON file of what's available in each environment. We're going to be in Node.js and Browser environments so we grabbed those two. If I was being a bit more discerning I'd carefully only apply browser configs to browser files and Node configs to Node.js files.
 - The config objects are applied in order. We did ESLint's JS config first, and then our custom one so we can overwrite it where we want to, and then the Prettier one should always come last as all it does is turn off rules that Prettier itself does; it doesn't add anything.
 
 This is a combination of the recommended configs of ESLint and Prettier. This will lint for both normal JS stuff as well as JSX stuff. Run `npx eslint` now and you should see we have a few errors. Run it again with the `--fix` flag and see it will fix some of it for us! Go fix the rest of your errors and come back. Let's go add this to our npm scripts.
@@ -77,3 +79,4 @@ Two projects to watch going forward here: [Biome][biome] (formerly called Rome)
 [vscode]: https://code.visualstudio.com/
 [biome]: https://biomejs.dev/
 [oxlint]: https://oxc.rs/docs/guide/usage/linter.html
+[globals]: https://www.npmjs.com/package/globals

lessons/03-tools/D-git.md

@@ -13,7 +13,9 @@ keywords:
   - frontend development
 ---
 
-Git is a critical part of any project and probably something many of you are already familiar with. If you haven't, be sure to initialize your project as a git repo with `git init` in the root of your project (VSCode and any other number of tools can do this as well.)
+## Git
+
+Git is a critical part of any project and probably something many of you are already familiar with. [Install Git][git] if you don't already have it installed. Then initialize your project as a git repo with `git init` in the root of your project (VSCode and any other number of tools can do this as well.)
 
 If you haven't already, create a .gitignore at the root of your project to ignore the stuff we don't want to commit. Go ahead and put this in there:
 
@@ -29,3 +31,4 @@ coverage/
 This will make it so these things won't get added to our repo. If you want more Git instruction, please check out [ThePrimeagen's course on Frontend Masters][prime].
 
 [prime]: https://frontendmasters.com/courses/everything-git/
+[git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

lessons/03-tools/E-vite.md

@@ -11,6 +11,9 @@ keywords:
   - JavaScript
   - frontend development
 ---
+
+## Vite
+
 The build tool we are going to be using today is called [Vite][vite]. Vite (pronounced "veet", meaning quick in French) is a tool put out by the Vue team that ultimately ends up wrapping [Rollup][rollup] which does the actual bundling. The end result is a tool that is both easy to use and produces a great end result.
 
 > Fun fact: there's a new project being developed called [Rolldown][rolldown] which is written in Rust and aims to replace Rollup.
@@ -49,7 +52,7 @@ export default defineConfig({
 });
 ```
 
-By default, Vite will find the index.html file in where-ever the root is and treat it as the head of a source graph. It'll crawl all your HTML, CSS, and JavaScript you link to from there and create your project for you. We don't have to do any more configuration than that. Vite will take care of the rest.
+By default, Vite will look for the index.html file in the root directory and treat it as the head of a source graph. It'll crawl all your HTML, CSS, and JavaScript you link to from there and create your project for you. We don't have to do any more configuration than that. Vite will take care of the rest.
 
 Okay, let's _actually_ install React to our project.
 
@@ -87,7 +90,7 @@ Instead of /public/style.css, use /style.css.` – ignore this, we'll fix it in
 
 `dev` will start the development server, typically on [http://localhost:5173/](). `build` will prepare static files to be deployed (to somewhere like GitHub Pages, Vercel, Netlify, AWS S3, etc.) `preview` lets you preview your production build locally.
 
-> Do note that we've changed domains here. By default Vite uses localhost:5173. Fun fact, 5173 sort of spells VITE if you make the 5 its Roman Numeral version, V.
+> Note that we've changed domains here. By default Vite uses localhost:5173. Fun fact, 5173 sort of spells VITE if you make the 5 its Roman Numeral version, V.
 
 ## Alternatives