From f3d4520be15381ea5038cb5479635528f6f9c356 Mon Sep 17 00:00:00 2001 From: Dustin Tauer Date: Tue, 29 Oct 2024 09:57:43 -0500 Subject: [PATCH 1/4] Update A-react-without-a-build-step.md Matching what brian did in workshop --- lessons/02-no-frills-react/A-react-without-a-build-step.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index ec4eeed..992ec54 100644 --- 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 From addcac2261b99f3171a1b21dc2110e6c51cd5bf0 Mon Sep 17 00:00:00 2001 From: dtauer Date: Tue, 29 Oct 2024 11:29:25 -0500 Subject: [PATCH 2/4] added ninas course --- lessons/03-tools/D-git.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lessons/03-tools/D-git.md b/lessons/03-tools/D-git.md index 87ca549..cbd18ec 100644 --- 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/ \ No newline at end of file From d79675f78c29bfa7d6338cf411da518ec1bde2b8 Mon Sep 17 00:00:00 2001 From: dtauer Date: Tue, 29 Oct 2024 20:53:14 -0500 Subject: [PATCH 3/4] note about two terminals --- lessons/04-core-react-concepts/A-jsx.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lessons/04-core-react-concepts/A-jsx.md b/lessons/04-core-react-concepts/A-jsx.md index 74ad54a..ca3361c 100644 --- 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. From b1aff93efcf2906dca31fafa671e6adce7fa258e Mon Sep 17 00:00:00 2001 From: dtauer Date: Tue, 29 Oct 2024 21:19:13 -0500 Subject: [PATCH 4/4] more edits --- lessons/05-ecosystem/A-tanstack-router.md | 4 ++-- lessons/07-testing/A-vitest.md | 3 ++- lessons/07-testing/F-coverage.md | 1 + lessons/07-testing/G-vitest-ui.md | 2 ++ lessons/08-whats-next/B-form-actions.md | 1 + lessons/09-wrap-up/A-congrats.md | 13 ++++++++----- 6 files changed, 16 insertions(+), 8 deletions(-) diff --git a/lessons/05-ecosystem/A-tanstack-router.md b/lessons/05-ecosystem/A-tanstack-router.md index d9dbf4d..f07504f 100644 --- 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 index 45eb61b..f05e182 100644 --- 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/ \ No newline at end of file diff --git a/lessons/07-testing/F-coverage.md b/lessons/07-testing/F-coverage.md index 4050458..bed4759 100644 --- 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 index e30b122..77ee017 100644 --- 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 index 558dce5..3011873 100644 --- 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 \ No newline at end of file diff --git a/lessons/09-wrap-up/A-congrats.md b/lessons/09-wrap-up/A-congrats.md index f5bcf28..3d9d622 100644 --- 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/ \ No newline at end of file