Merge branch 'btholt:main' into main

Author: cdmain

components/layout.js

@@ -17,6 +17,14 @@ function Layout({ children }) {
           <div className="content-container">
             <div className="main">{children}</div>
           </div>
+          <script async defer src="https://a.holt.courses/latest.js"></script>
+          <noscript>
+            <img
+              src="https://a.holt.courses/noscript.gif"
+              alt=""
+              referrerPolicy="no-referrer-when-downgrade"
+            />
+          </noscript>
           <Footer
             twitter={courseInfo.social.twitter}
             github={courseInfo.social.github}

lessons/01-the-first-section/A-intro.md

@@ -0,0 +1,77 @@
+---
+description: >-
+  Join Brian Holt in 'Intermediate React v6' for Frontend Masters to gain
+  expertise in server-side and performance capabilities of React. This
+  comprehensive course requires prior knowledge from 'The Complete Intro to
+  React v9' and focuses on leveraging React's inherent tools for web
+  development, making it ideal for anyone with a foundational understanding of
+  React. Brian Holt, an experienced React developer, provides hands-on projects
+  and detailed instructions, enhancing your React skills and knowledge.
+keywords:
+  - Intermediate React
+  - Frontend Masters
+  - Brian Holt
+  - 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.
+
+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.
+
+## Who is this course for?
+
+You! This course is for anyone looking to get more experience in React or deepen their expertise in it. No experience is necessary beyond the intro course. However, I guarantee anyone who is interested in React will learn something in here. This probably shouldn't be your first programming or JavaScript course, but beyond that, it should be comfortable for anyone. We do use some Node.js to run our API and for the build tools but extensive Node.js experience is not necessary, I'll give you the commands necessary to run it and cover the Node.js we do use.
+
+## Who am I?
+
+![Brian teaching](/images/social-share-cover.jpg)
+
+My name is Brian Holt and I've been writing React for a long time. I shipped Reddit's first React code in 2014.
+
+<blockquote class="twitter-tweet" data-dnt="true" data-theme="light"><p lang="en" dir="ltr">We shipped reddit&#39;s first production <a href="https://twitter.com/reactjs?ref_src=twsrc%5Etfw">@reactjs</a> code last week, our checkout process.<a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>&mdash; Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/status/493852312604254208?ref_src=twsrc%5Etfw">July 28, 2014</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+I went on to write React at a variety of large companies and it's been my goto tool for over a decade at this point. It's safe to say it's been a defining feature in my career.
+
+I currently work as a staff product manager at [Neon][neon] working on developer tools and developer experience. I loved working on dev tools and dev experiences so much that I ended up working in tools and strategy. Previous to Neon, I've worked at Snowflake, Microsoft, LinkedIn, Netflix, Reddit, and some other startups. I've done everything from VP of product to dev rel to staff engineering tech lead.
+
+When I'm not working or teaching, you'll find me hanging out with my wife, son, and my soon-to-arrive daughter! I've lived the past six years in Seattle but I've just moved to Sacramento to get a bit more sun and to live close to amazing snowboarding in Tahoe! 🏂 I also enjoy hazy IPAs, Islay Scotches, road cycling, and playing Marvel Rivals poorly.
+
+Please catch up with me on social media! Be aware that I'm awful at responding to DMs!!
+
+- [𝕏][x]
+- [Bluesky][bs]
+- [LinkedIn][li]
+- [GitHub][gh]
+
+## Where to File Issues
+
+I write these courses and take care to not make mistakes. However when teaching over ten hours of material, mistakes are inevitable, both here in the grammar and in the course with the material. However I (and the wonderful team at Frontend Masters) are constantly correcting the mistakes so that those of you that come later get the best product possible. If you find a mistake we'd love to fix it. The best way to do this is to [open a pull request or file an issue on the GitHub repo][issues]. While I'm always happy to chat and give advice on social media, I can't be tech support for everyone. And if you file it on GitHub, those who come later can Google the same answer you got.
+
+## How the repo works
+
+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/irv6-project.git
+```
+
+We are going to work on a few separate projects. The first few are going to be written from scratch (except a little SQLite database and a CSS file, we'll talk about those when we get there.) So those don't have incomplete projects to start with, we'll just start from nothing.
+
+For the following ones, they have empty starter projects because I don't want to set up Vite a million times. We'll have you just open the repo to the right folder and start from there. Again, we'll have instructions on each lesson as we go.
+
+> And one last request! [Please star this repo][site]. It helps the course be more discoverable and with my fragile ego.
+
+[x]: https://twitter.com/holtbt
+[bs]: https://bsky.app/profile/brianholt.me
+[li]: https://www.linkedin.com/in/btholt/
+[gh]: https://github.com/btholt
+[site]: https://github.com/btholt/intermediate-react-v6
+[projects]: https://github.com/btholt/irv6-project
+[issues]: https://github.com/btholt/irv6-project/issues
+[neon]: https://neon.tech/
+[zip]: https://github.com/btholt/irv6-project/archive/refs/heads/main.zip
+[v9]: https://frontendmasters.com/courses/complete-react-v9/
+[v5]: https://frontendmasters.com/courses/intermediate-react-v5/
+[path]: https://frontendmasters.com/learn/react/

lessons/01-the-first-section/B-react-19.md

@@ -0,0 +1,59 @@
+---
+description: >-
+  Explore Brian Holt's 'Intermediate React v6' course, providing insights on the
+  use of Node.js, preferred development tools like Visual Studio Code, and a
+  balanced perspective on AI integration in coding. Learn how these tools and
+  technologies enhance the process of writing efficient React Server Components,
+  as taught for Frontend Masters.
+keywords:
+  - React
+  - Node.js
+  - Visual Studio Code
+  - 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.
+
+I use [fnm][fnm] to manage my Node.js versions (similar to nvm).
+
+I _think_ this course would work with recent versions of [bun][bun] but it's untested. Beware if you decide go down this path.
+
+## Tools FAQ
+
+### What tools are your using?
+
+- Visual Studio Code – I used to work at Microsoft on VS Code so it's no surprise that I'll be using it in this course. We'll also be using a few extensions that I'll call out as we get there.
+  - I frequently use Copilot and Cursor too, but I'll be disabling it for this so we can go through together, keystroke by keystroke.
+- Firefox – I want more than Chromium to exist so I support Firefox where I can. Feel free to use any browser; it won't matter in this course.
+- Terminal.app – I used to use iTerm2 and Hyper but in the end I appreciate how fast the default terminal is.
+
+### What <font/theme/extension> are you using?
+
+- Visual Studio Code
+  - Dark+ Theme – It comes installed by default but it's not the default theme anymore. I'm so used to it that I can't switch.
+  - [MonoLisa][monolisa] font – I like fonts and I look at it all day so I was okay paying for it. I have [ligatures][ligatures] enabled which is why you might see strange glyphs. If you want ligatures but don't want to pay, the linked ligature article has a few. I like Cascadia Code from Microsoft.
+  - [vscode-icons][vscode-icons] – Lots of neat icons for VS Code and it's free.
+- Terminal
+  - 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.
+
+## 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.
+
+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.
+
+[ligatures]: https://worldofzero.com/posts/enable-font-ligatures-vscode/
+[monolisa]: https://www.monolisa.dev/
+[vscode-icons]: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
+[dracula]: https://draculatheme.com/terminal
+[starship]: https://starship.rs/
+[nerd]: https://www.nerdfonts.com/font-downloads
+[fnm]: https://github.com/Schniz/fnm
+[bun]: https://bun.sh/

lessons/01-welcome/A-intro.md

@@ -0,0 +1,29 @@
+---
+description: >-
+  Explore the new features of React 19, focusing on React Server Components,
+  which enable partial server-side rendering of React components, a feature that
+  facilitates safe database querying directly within React. Discover insights
+  into this cutting-edge technology, stable since 2023 and actively developed
+  since 2022, with guidance from expert Brian Holt. Ideal for developers aiming
+  to leverage the latest advancements in React functionality.
+keywords:
+  - React 19
+  - React Server Components
+  - Brian Holt
+  - web development
+  - JavaScript
+  - server-side rendering
+---
+Let's talk about [React 19][19].
+
+It came out at the tail end of 2024 officially but really had publicly been worked on [since late 2022][rfc]. So it's been worked nearly 3 years and been stable and in production (via Next.js as well as internally at Facebook) since [late 2023][next].
+
+All of this to say: it's fairly new to _stable_ React but it's been worked on and shipped via "unstable" channels for nearly 2+ years. We've had a lot of time to learn some good and bad patterns, and it's going to be fun to learn them together with you.
+
+Primarily we are going to concern ourselves with React Server Components. This is a new way of writing React components that allows your React components to render partially on the server and then to be served in a client side app in React. It's very cool; it allows you to do things like safely directly query your database from within React, something we couldn't (or at least shouldn't) do previously.
+
+The Complete Intro course does some minor cover of version 19 features and the good news is nothing changed in what I taught - everything I taught stayed stable so no corrections since version was released after v9 of my intro course!
+
+[19]: https://react.dev/blog/2024/12/05/react-19
+[rfc]: https://github.com/reactjs/rfcs/pull/188
+[next]: https://nextjs.org/blog/next-14

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

@@ -1,5 +1,18 @@
 ---
-title: "Client-Side React"
+title: Client-Side React
+description: >-
+  Learn about React Server Components in the 'Intermediate React v6' course by
+  Brian Holt on Frontend Masters. Understand the trade-offs of React Server
+  Components and different React rendering methods, including client-side,
+  server-side, and static site generation. Explore the benefits and limitations
+  of these approaches and optimize your web development skills using advanced
+  React techniques.
+keywords:
+  - React
+  - Server Components
+  - Brian Holt
+  - Frontend Masters
+  - web development
 ---
 
 > 💡 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.

lessons/01-welcome/C-react-19.md

@@ -1,3 +1,19 @@
+---
+description: >-
+  Learn how to implement Static Site Generation (SSG) using React and Next.js,
+  with expert guidance from Brian Holt in the Intermediate React v6 course at
+  Frontend Masters. Discover the simplicity of generating static web pages for
+  content-heavy sites and explore how this streamlined approach can expedite
+  course creation without sacrificing quality. Enhance your knowledge on using
+  modern frameworks like Astro and Next.js for optimized static content
+  delivery.
+keywords:
+  - Static Site Generation
+  - Next.js
+  - React
+  - Brian Holt
+  - Frontend Masters
+---
 > Fun fact: this very website is rendered via SSG with Next.js! [See the code here][code]
 
 Static Site generation allows you to use React to generate a fully static site. This is perfect for sites like blogs or course materials (like this site) where it's just a bunch of static pages that don't need the interactivity of React. It's enough to render this out once - it doesn't need the interactivity. The result is the end user is just shipped fully rendered flat HTML files - it doesn't need a server or client to do it. The developer can still add some interactivity via React, but minimally so.
@@ -119,7 +135,7 @@ Using this toolkit, I'm able to use React to write the wrappers of the pages of
 [code]: https://github.com/btholt/intermediate-react-v6/
 [export]: https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
 [astro]: https://astro.build/
-[md]: https://github.com/btholt/intermediate-react-v6/blob/main/lessons/02-react-server-components/B-static-site-generation.md
+[md]: https://github.com/btholt/intermediate-react-v6/blob/main/lessons/02-react-render-modes/B-static-site-generation.md
 [config]: https://github.com/btholt/intermediate-react-v6/blob/main/next.config.js#L9
-[html]: https://github.com/btholt/intermediate-react-v6/blob/gh-pages/lessons/react-server-components/static-site-generation.html
+[html]: https://github.com/btholt/intermediate-react-v6/blob/gh-pages/lessons/react-render-modes/static-site-generation.html
 [site-html]: https://github.com/btholt/intermediate-react-v6/tree/gh-pages

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

@@ -1,3 +1,19 @@
+---
+description: >-
+  Discover how to enhance your React app's performance with server-side
+  rendering (SSR) as demonstrated by Brian Holt in the Intermediate React v6
+  course for Frontend Masters. Learn how to implement SSR by hand to optimize
+  time to interactive and first meaningful paint, along with considerations for
+  complexity and device performance. Explore practical examples of SSR app setup
+  with Fastify, Vite, and React, including handling browser-only scripts and
+  overcoming hydration errors.
+keywords:
+  - React
+  - server-side rendering
+  - SSR
+  - Brian Holt
+  - Frontend Masters
+---
 > 💡 The previous version of this course does a pretty in-depth dive on migrating a client-side React app to being server-side render. [Check it out here][v5]. Nothing has changed so if you want more SSR magic ✨ this still 100% applies.
 
 When you have a client-side React request, the general flow looks like this:

lessons/02-react-render-modes/B-static-site-generation.md

@@ -1,3 +1,3 @@
 {
-    "icon": "dumpster-fire"
-}
+  "icon": "paint-roller"
+}