intro

Author: btholt

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

@@ -1,49 +1,61 @@
-Class Outline
+> 🚨 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]
 
-# Welcome to Intermediate React
+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.
 
-- Hi I'm Brian
-- What was in Intro and what will be in Intermediate
-- How Intermediate has changed, why you might want to check out v5
-- You need this set up
-- Intro to our project
+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.
 
-# What changed with React 19
+## Who is this course for?
 
-- Why Intermidate React changed a lot
-- Servers and how they can be helpful with React
-- When Servers are not helpful to React
-- RSCs
-- Functions
-- Actions
+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.
 
-# Build your own Node.js + React framework
+## Who am I?
 
-- Basic Node.js server
-- Basic React app
-- SSR?
-- Make your own RSC / use client/server
-- Make your own function
-- Make your own action
+![Brian teaching](/images/social-share-cover.jpg)
 
-# Let's do it with Next.js
+My name is Brian Holt and I've been writing React for a long time. I shipped Reddit's first React code in 2014.
 
-- Rebuild the app in Next
+<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>
 
-# What else is there?
+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.
 
-- React Router / Remix
-- (Coming Soon) TanStack Start
-- Vite by itself!
+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.
 
-# Other options
+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.
 
-- Discuss other options
+Please catch up with me on social media! Be aware that I'm awful at responding to DMs!!
 
-# New patterns you can do with RSCs
+- [𝕏][x]
+- [Bluesky][bs]
+- [LinkedIn][li]
+- [GitHub][gh]
 
-- Stuff here
+## Where to File Issues
 
-# Other concepts?
+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.
 
-- Need to think if there's anything else I really want to cover here
+## 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-my-setup.md

@@ -0,0 +1,37 @@
+## 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.
+
+[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/

…ssons/01-the-first-section/B-react-19.md …ssons/01-the-first-section/C-react-19.mdlessons/01-the-first-section/B-react-19.md renamed to lessons/01-the-first-section/C-react-19.md lessons/01-the-first-section/B-react-19.md renamed to lessons/01-the-first-section/C-react-19.md

@@ -8,7 +8,7 @@
   --text-links: #00ca22;
   --text-footer: var(--highlight);
 
-  --bg-main: rgba(67, 56, 56, 0.9);
+  --bg-main: black;
   --bg-dots: var(--highlight);
   --bg-lesson: white;