Introduction

[00:00:00]
>> Brian Holt: Intermediate React v6 as taught for Frontend Masters. So I am very exited to be here today we're gonna talk, it's kind of a continuation on the complete intro to React v9. That kind of taught you all like the core fundamental clientside React kind of components. And then this is kinda going into the more frontier, these are useful sometimes, but not all the time kinda things, right?

[00:00:26]
So first of all, if you're gonna follow along with me today, I invite you to. You can just go to i6.holt.courses like that. And that'll take you to intermediate-react-v.holt.courses. You should see this, kinda black and green website, looks like this.
>> Brian Holt: So, just to kinda give you a little lay of the land of how this website works, if I click into one of these lessons, you'll see that it says RSCs without a framework and intro to react server components.

[00:01:01]
The first part is the name of the section, and the second part the name of the lesson. So if you pop into the middle of a course, you can kind of see where I am, okay. But beyond that, let's just hop in, go through the introduction, and then I'll kinda talk a little bit more about what we're gonna learn in the course I'm excited.

[00:01:21]
So I'm just gonna click into intro here. Just to be super clear, you do not have to take v5 of this course to take v6 this is the sixth revision of it, not the sixth in a series, right? I just say that because I get asked it frequently, so I just want to clear that up.

[00:01:40]
However, you do need to take Intro to React v9, these are kind of companion courses, this is a continuation of what you learned. You can also come here just having known React, it's not like anything in there is anything outside of just learning React itself. But I did my best to make that kind of a continuum that there's no overlap between the two courses, you can kinda take them individually from each other.

[00:02:04]
This is a complete rewrite of my intermediate course, if you have taken the previous versions of Intermediate React, this is totally different from those courses. Intermediate React used to focus more on ecosystem kinda stuff, and I just was looking through the Frontend Masters catalog. And a lot of that ecosystem stuff is covered well by other teachers.

[00:02:24]
There's one on Tailwind, there's one on Typescript and React, and those are all awesome courses. So I saw is kind of being redundant. And then I also saw that kind of not covering some of these more newer features like React server components and some of the transition and stuff like that as well.

[00:02:42]
So all that to say, v5 still works, it actually is going through all of the curriculum there and it all still applies, none of it's out of date. So v5 of this actually still works really well. If you wanna learn about Redux or Typescript from me, it's all in v5 of that.

[00:02:57]
So feel free, I left a little link there if you wanna check it out. Also, just the learning path here on Frontend Masters. You can see here they've done a really good job curating, do this, then this, then this, then this, also a special note on Scott. He and I coordinated so that intro to next and intermediate react didn't have a lot of overlap, right?

[00:03:21]
So he's focused more on the next concepts, I'm more focused on the React concepts. Despite the fact that you will write a little bit of next in this course by necessity that certain features of react now require next to work. So this course can kinda logically be divided into two halves.

[00:03:37]
The first part basically through this part with next.js, it's all server side react, right, and various flavors of it. We'll go over through the client side react, static site generation, server side rendering, which are like, let's call them the not new. I'm not gonna call them old, cuz I don't feel like they're old.

[00:03:58]
I can't call them old without calling myself old, I'll put it that way. So I'm not gonna do that. These are the, I was gonna say legacy, no, I don't like that word either. So there's just the ways that have existed of writing React previously. And then RSCs, which is React Server Components is kinda the new ways of doing it.

[00:04:15]
We're gonna write RSCs without a framework and then we're gonna write the RSCs with next.js. You gonna see basically what an RSC is, how it is created, what it does for you and what a pain in the back is to write it without a frame work. And then am gonna show you the easy mode of writing it, right?

[00:04:32]
So that's the first half the course, the second half the course is percieved an actual perfomance of React. So basically how to make your app both be performant and also how to make it feel performant, which can be kind of different things. And that'll be the second half of this course and then I will let you go to go create really cool stuff.

[00:04:56]
Until then, you are stuck here. Okay, so who is this course for? I put this in here, but hopefully it's for you, I try and make this generally accessible to people. Is anyone looking to get some more experience into React? Even beyond just the things I'm working here, this is just good practice of writing a lot of React.

[00:05:17]
Probably shouldn't be referred React course, probably shouldn't be your first Javascript course and definitely shouldn't be your first programming course. So if you are here and that applies to you, there are other courses on Frontend Masters that will work really well for you. We are gonna do some note in here and even more note than I previously put in my React courses just by necessity that this is working with server components.

[00:05:35]
I do try and focus on the React portion of it, not the node portion of it. So you're probably okay here, if you're this is your first exposure to Node, but that might be hard. Also, you should just take a Node course, because that would be helpful. I've been writing react for a long time, it is now been over ten years, which is wild to say out loud that I have been writing react.

[00:05:56]
It's kind of been career defining for me and I still use it. Ten years later, who knew that someone was still using a Javascript framework and not have migrated on to a different one? But here we are. I've written React a large variety of companies. I've shipped it at basically every company I've worked at in some capacity except probably Linkedin, and that wasn't for lack of trying, did try to ship it there, they just wouldn't let me.

[00:06:20]
So it's just been my go-to tool it's, I like the model of how it encapsulates components and then the composability of components it's just, it's always worked for me. And they taken care over the years to not break it too, too much. With React 19, the latest version being the one that adds a lot of kind of New tools.

[00:06:39]
Let's go with new complexity and we'll get into Brian's rants as we go on as I want to do. They pay me for it, and they keep paying me to do it, so I will keep doing it. A little bit more about me, I work at NEON, it's pretty cool Postgres company.

[00:06:52]
[INAUDIBLE] serverless Postgres, I'm in charge of all sorts of developer services, developer tools just kind of like trying to make working with Postgres fun. So I've been doing that for a while. Previous to that, I worked as a JavaScript and a Node js engineer for over ten years at snowflake, Microsoft, LinkedIn, Netflix, Reddit.

[00:07:13]
I'm sure I'm forgetting some but some of those things in there, I've been everything from a VP of product to Dev Rel to staff engineer, tech lead to junior engineer. I've been all those job titles. And I currently, I just moved to Sacramento, I lived in Seattle for the past six years, but I moved about a month ago.

[00:07:31]
Yeah, I enjoy snowboarding, beers, scotch, cycling and most recently, playing Marvel rivals poorly, quite poorly. If we're being truly honest with ourselves, feel free to catch up with me on the socials, I left my links here. I just yeah, I say this every single time, but I am awful at responding to DMS, so just be aware of that I don't check them very often.

[00:07:59]
If you have an issue with this course or you find something like that, usually people go to DMs to try and get that to me. I'm gonna invite you to file an issue on the repo for this, just because if you have an issue, somebody else is gonna have an issue.

[00:08:13]
And then the Frontend Master staff does a really good job of helping me keep this up-to-date as well, so that helps a lot ups as well. So how this works? The first portion of this, we're gonna write everything from scratch, 100% just coded from zero. The second half of this course, didn't sound like fun to reset up vite continually.

[00:08:33]
So I just kind of basically made you like little starter projects that basically have all the Node APIs that this isn't a Node course. And the vite build process all set up for you. Again, if you wanna know more about how to set up those processes, it's in the intro.

[00:08:48]
So I have that up in here, you'll see that I have these starter repos and these should be empty, right? So if you go to the perf one, it should like start, but the initial component is gonna be something super simple like blah, right? It doesn't have anything more than just enough to get the app running itself.

[00:09:06]
So that is the starter ones, the completed ones. You can see here there's more in here because I have the full Next.js project finished, the full no framework project finished. The entire point of this class learning. So if you are struggling with something, or if you wanna see how I did it versus you did it, by all means that that is why this is here.

[00:09:25]
I am not your mother, [LAUGH] this is not homework, right? We're just joining together to kinda learn this stuff, so please do the thing that helps you learn the most. If you need to deprive yourself of looking at the completed thing, then do that. If you need to look at it to compare notes, please do that, right?

[00:09:40]
That is the repo for the projects, I would say go ahead at this point, go ahead and clone it locally, that's what I would invite you to do. You're gonna have to do it eventually. So yeah, there was a couple other things in here. So I have a little database for some of the Node js samples.

[00:09:58]
That's here in nodes.db, and then the globals.css, I think, is for the next project, and I think the style.css is for all of the performance projects.