Merge pull request #2 from btholt/dtauer-patch-1

Updating directory
btholt · Oct 30, 2024 · eb67cc1 · eb67cc1
2 parents c3c4367 + b1aff93
commit eb67cc1
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 13 deletions.
diff --git a/lessons/02-no-frills-react/A-react-without-a-build-step.md b/lessons/02-no-frills-react/A-react-without-a-build-step.md
@@ -17,7 +17,7 @@ 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 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:
+Let's start your project. Create your project directory inside the repo. I'm going to call mine `padre-ginos` 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:
 
 ```html
 <!DOCTYPE html>

diff --git a/lessons/03-tools/D-git.md b/lessons/03-tools/D-git.md
@@ -28,7 +28,8 @@ coverage/
 .vscode/
 ```
 
-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].
+This will make it so these things won't get added to our repo. If you want more Git instruction, please check out the courses from [ThePrimeagen][prime] and [Nina Zakharenko][nina] on Frontend Masters.
 
 [prime]: https://frontendmasters.com/courses/everything-git/
 [git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
+[nina]: https://frontendmasters.com/courses/git-in-depth/
diff --git a/lessons/04-core-react-concepts/A-jsx.md b/lessons/04-core-react-concepts/A-jsx.md
@@ -136,8 +136,9 @@ You can test your app by running `npm run dev` and opening the URL shown in the
 
 ## The API / Image Server
 
-For this course we will use a little Fastify server I built for you. It's in the [api][api]
-directory. We are going to use Vite.js to proxy to this API server. This is a useful trick to do for local development if you have a separate frontend in a backend. Normally you'd have something like NGINX routing traffic to separate frontend and backend servers. For now we'll just use Vite.
+For this course we will use a little Fastify server I built for you. It's in the [api][api] directory. We are going to use Vite.js to proxy to this API server. This is a useful trick to do for local development if you have a separate frontend in a backend. Normally you'd have something like NGINX routing traffic to separate frontend and backend servers. For now we'll just use Vite.
+
+> Note: This means you'll need to have TWO terminal windows running. One terminal for the API server (which you won't have to touch once it's running). The other terminal is is our Vite server for our web app. 
 
 Add this to you vite.config.js
 
@@ -162,7 +163,7 @@ export default defineConfig({
 
 ## Run the API Server
 
-Open a new terminal and navigate to the `api` directory. Note that this server is _outside_ your project directory. You'll need to install the dependencies with `npm install`. After that, you can start the server by running `node api/server.js`. You need both servers running at the same time. Your Vite server will intercept `api` and `public` calls and reroute them to your API server!
+Open a new terminal and navigate to the `api` directory. Note that this server is _outside_ your project directory. You'll need to install the dependencies with `npm install`. After that, you can start the server by running `npm run dev`. You need both servers running at the same time. Your Vite server will intercept `api` and `public` calls and reroute them to your API server!
 
 Now let's add images to our Pizza.
 

diff --git a/lessons/05-ecosystem/A-tanstack-router.md b/lessons/05-ecosystem/A-tanstack-router.md
@@ -178,9 +178,9 @@ This should all work now. Open your app and see if it loads.
 
 You did it! That's how easy routing has become. It's come so far from the early days of React.
 
-> 🏁 [Click here to see the state of the project up until now: 09-router][step]
+> 🏁 [Click here to see the state of the project up until now: 09-routing][step]
 
-[step]: https://github.com/btholt/citr-v9-project/tree/master/09-router
+[step]: https://github.com/btholt/citr-v9-project/tree/master/09-routing
 [rr]: https://reactrouter.com/
 [v8]: https://react-v8.holt.courses/lessons/react-capabilities/react-router
 [tsr]: https://tanstack.com/router/latest
diff --git a/lessons/07-testing/A-vitest.md b/lessons/07-testing/A-vitest.md
@@ -16,7 +16,7 @@ keywords:
   - Brian Holt
 ---
 
-This is meant to be a very brief treatise on how to do testing on React applications. This will be a brief intro on how to set up Vitest tests for the application we just created.
+This is meant to be a very brief treatise on how to do testing on React applications. This will be a brief intro on how to set up Vitest tests for the application we just created. For more information about Vite, Vitest, and testing in general, check out the [Build Tools & Testing Learning Path][lp].
 
 ## Testing with Vitest
 
@@ -67,3 +67,4 @@ Now that we've got that going, let's go write a test.
 [hd]: https://github.com/capricorn86/happy-dom
 [vitest]: https://vitest.dev/
 [v4]: https://frontendmasters.com/courses/intermediate-react-v4/setup-jest-testing-library/
+[lp]: https://frontendmasters.com/learn/build-tools/
diff --git a/lessons/07-testing/F-coverage.md b/lessons/07-testing/F-coverage.md
@@ -46,3 +46,4 @@ v8 use Chrome's built-in code coverage capabilities to run your tests which make
 
 [istanbul]: https://istanbul.js.org/
 [c8]: https://github.com/bcoe/c8
+[v8]: https://vitest.dev/guide/coverage.html
diff --git a/lessons/07-testing/G-vitest-ui.md b/lessons/07-testing/G-vitest-ui.md
@@ -30,3 +30,5 @@ And in your package.json
 ```
 
 Now from the command line run `npm run test:ui` and it should pop up your browser with the Vitest UI open. Super convenient, particularly in places you need to run individual tests repeatedly and you don't have the VS Code extension. The module graph is a cool visualization as well.
+
+[ui]: https://vitest.dev/guide/ui.html
diff --git a/lessons/08-whats-next/B-form-actions.md b/lessons/08-whats-next/B-form-actions.md
@@ -103,3 +103,4 @@ And that's form actions!
 > 🏁 [Click here to see the state of the project up until now: 15-form-actions][step]
 
 [step]: https://github.com/btholt/citr-v9-project/tree/master/15-form-actions
+[npm]: https://www.npmjs.com/package/react?activeTab=versions
diff --git a/lessons/09-wrap-up/A-congrats.md b/lessons/09-wrap-up/A-congrats.md
@@ -12,25 +12,28 @@ keywords:
   - Intermediate React
   - React development
 ---
-Congratulations!! You did it!
+## Congratulations!! You did it!
 
 This is a lot material to take in, so congrats on sticking with it. Hopefully it was fun and maybe made you support your local pizzeria along the way!
 
-You are now fully equipped to write React professionally. Everything you learned here is 95%+ of what you would need to write React at any tech company. The last 5% is what I'll teach you in Intermediate React v6 which will have more to do with server-side React and advance performance techniques. But for now, this is almost all you need to know!
+You are now fully equipped to write React professionally. Everything you learned here is 95%+ of what you would need to write React at any tech company. The last 5% is what I'll teach you in [Intermediate React v6][v6] which has more to do with server-side React and advance performance techniques. But for now, this is almost all you need to know!
 
 So what should you do from here?
 
 - [Intermediate React v5][v5] is still very relevant! Take this course and learn more about Tailwind, server-side rendering, more hooks, Redux, and a bunch of there cool things. I'll update this when the new Intermediate React v6 comes out.
-- [The rest of the Frontend Masters React learning path][path].
+- Follow the rest of the [Frontend Masters React Learning Path][path].
 - Build your own app!! I cannot stress how important it is with concepts like this to just build. Take the dumbest idea in your head and make it. Nothing can replace experience!
   - An e-commerce website to sell single socks so you can match unmatched socks
   - An AI prompt text editor
   - A music app that lets you add Spotify, Apple Music, and Tidal songs to it.
   - A client to let you read Thread, X, and Bluesky in the same app.
-- Learn Next.js, Remix/React-Router (soon those will be the same thing) or some other way of doing React on the server
-- Learn React + Tailwind
+- Learn [Next.js][next], Remix/React-Router (soon those will be the same thing) or some other way of doing React on the server
+- Learn React + [Tailwind][tailwind]
 
 There are lots of way to go with this and they're all fun! I hope you enjoyed the course and I look forward to hopefully getting to teach with you again soon!
 
+[v6]: https://frontendmasters.com/workshops/intermediate-react-v6/
 [v5]: https://frontendmasters.com/courses/intermediate-react-v5/
 [path]: https://frontendmasters.com/learn/react/
+[next]: https://frontendmasters.com/topics/next-js/
+[tailwind]: https://frontendmasters.com/courses/tailwind-css/
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,3 +46,4 @@ v8 use Chrome's built-in code coverage capabilities to run your tests which make

		[istanbul]: https://istanbul.js.org/
		[c8]: https://github.com/bcoe/c8
		[v8]: https://vitest.dev/guide/coverage.html
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,3 +30,5 @@ And in your package.json
		```

		Now from the command line run `npm run test:ui` and it should pop up your browser with the Vitest UI open. Super convenient, particularly in places you need to run individual tests repeatedly and you don't have the VS Code extension. The module graph is a cool visualization as well.

		[ui]: https://vitest.dev/guide/ui.html
Original file line number	Diff line number	Diff line change
Expand Up		@@ -103,3 +103,4 @@ And that's form actions!
		> 🏁 [Click here to see the state of the project up until now: 15-form-actions][step]

		[step]: https://github.com/btholt/citr-v9-project/tree/master/15-form-actions
		[npm]: https://www.npmjs.com/package/react?activeTab=versions