Introduction

[00:00:00]
>> Brian Holt: Welcome to the complete intro to React. I'm Brian Holt, and I'm very stoked to be here. And we are gonna learn how to do some React today. This is totally rebuilt from the ground up from v8, so this is gonna be a lot of fun. So today, you and I are gonna be building a pizza delivery app, Padre Gino's.

[00:00:24]
I recognize that Padre is indeed Spanish and not Italian, but it entertained me when the designer sent it to me, so I kept it. So it's gonna have a pizza of the day, it's gonna have a cart, past orders, a bunch of really cool stuff that we're gonna do today.

[00:00:42]
So let's hop into it. First of all, I want you to head to react-v9.holt.courses. That should take you here. And do you see here I have two computers? Literally, this is my notes that I have up here, but I shared them with everybody. These are open source. These are free, feel free to share these with your team or with your friends.

[00:01:10]
That's totally okay, it's intended that it makes it shareable. So just to tell you a little bit how the class is structured, you'll see here that we have this section here called Welcome. And we have the lesson called Intro, and you'll see that's up here in the top right as well.

[00:01:29]
So if you ever get lost and you're following along here, you can always just look at the breadcrumb there to figure out where I am. Okay, so again, you do not need to have read or watched v8 this is just the the ninth iteration of this course. So just keep that in mind.

[00:01:49]
You can start here. If you're learning React for the first time, you are in the correct place. If you're also kinda sharpening your React skills, you're also in the right place. So let's just talk about how I wanna teach this course to you. I'm a first principles teacher, the style that resonates with me, and therefore, it's the way that I try and teach other people.

[00:02:08]
The idea there being we're gonna start by writing React with no tools. It's just gonna be like a script tag on an HTML page. And then we're gonna slowly add tools as we go along, as we hit barriers of complexity. I do this because if you just jump straight into the full tool set, you don't understand what's going underneath the hood.

[00:02:28]
It makes it harder to debug and you learn to resent your tools, because tools are complex, but they also add ease, right? And if you just get the ease and you don't understand the complexity that it's solving, you resent the tool for the complexity that it adds, right?

[00:02:44]
So that's my methodology. If you don't like it, you're still stuck on this ride with me. So bear with me. Who is this course for? I'm hoping it's for you, but it's for people looking to get started in React or deep in the React skills. This should probably not be the first time you're writing JavaScript.

[00:03:05]
If it is, there's some other great courses on Frontend Masters. There's ones from Will Sentence. There's a one from me. There's a couple really good ones that will get you up to that kinda speed. But again, if you're coming from, I don't know, Ruby or something like that, and you're really good at that, and this is your first JavaScript, you'll probably stick on, okay?

[00:03:23]
So YOLO and good luck, is what I would say to that. Node, there's no Node.js experience necessary. We are gonna use node a little bit as part of the build process, but we will not be writing any Node.js directly in this course. Okay, who am I? I'm this handsome gentleman you see up there.

[00:03:48]
So my name is Brian. I've been teaching React and writing React for a very long time. My claim to fame is that I launched Reddit's first React code. You can see this tweet is dated to 2014. I mean, very long story short, one of the developers was like, hey, this React thing looks interesting.

[00:04:06]
I was like, no, I don't really want to write HTML in my JavaScript. That seems like a bad idea. And then I wrote it and it ended up being awesome. So then we ended up shipping it at Reddit. That code base eventually turned into the modern React front end, which is kind of a fun story.

[00:04:22]
I wrote React at a variety of large companies. I shipped it at Netflix, at LinkedIn, certainly Reddit, and then various other companies since then as well. I'm now presently at this company called Neon, pretty cool company, worth checking out if you like Postgres. I'm a staff product manager, and I've worked, yeah, also at Snowflake, Microsoft, the other companies I mentioned some other fun stuff as well.

[00:04:53]
I've done everything from be VP of product to DevRel to staff engineer to tech lead. I've kind of been all over the stack here. When I'm not working or teaching, you'll find me hanging out with my wife, and my son, and my soon to arrive daughter. Lived in Seattle for the past six years, but I'm presently moving to Sacramento mostly so that I can go snowboarding in Tahoe.

[00:05:14]
That's 90% of the reason why. Feel free to catch up with me. These are my socials here. I think they're also on the footer. I will tell you that I am awful at responding to DMs, but please do connect with me. So I put a little note on here of where to file issues.

[00:05:33]
If you have an issue with this course, please file an issue on the repo as opposed to DM me. That way everyone can come and see it and we can answer the question, and I can know and fix it. If it goes into the DMs and it dies in the DMs and no one can find it later.

[00:05:47]
So that's why I kinda push people to file issues or pull requests. So that's something that you should do. So how this repo works, so there's a repo for the class you're currently on. If you need to fix the notes here, everything here is in lessons, right? So it's all organized in kind of the way that you see there.

[00:06:08]
And then the project that you're on is this repo, which I have up here open as well. This complete intro to React v9 project. Please go clone this if you haven't already. We'll be using it quite a bit, and most importantly, the API is in here. And I'll make mention of this again, but please, already, if you haven't cloned this, please do.

[00:06:32]
But you can see this goes in order from 0, 1, to what, 17? Yeah, I went to 17 here. These are snapshots at various points in the course that are of complete steps, right? So if you go into 06, right? This is a snapshot of what the code base should look like at that point.

[00:06:50]
So if something's broken or you wanna compare what you got versus what I got, or you just wanna hop into the middle of the course. You can just pop in there, run npm install, npm run dev and everything should just work. And of course, to stroke my fragile ego, please start this repo.

[00:07:07]
Click there, It'll start up there. Makes me feel good.
>> Student: How much will this course lean into the React 19 specific features like RSCs and hooks and etc.?
>> Brian Holt: Good question. How much are we gonna go over React 19? So today, throughout the course we're going to be using 18.2.

[00:07:28]
But you do see at the end here I have what's next. And I do have a whole section on cool stuff coming in 19 that I'm pretty sure is gonna be mostly stable. And then when we do intermediate React v6, it's gonna be all React 19 stuff. Specifically, this course, complete intro to React is all about client-side React.

[00:07:52]
So we're not doing any Node stuff today, we're not doing any React server components. That's all being saved for intermediate React.
>> Student 2: What's your opinion on the React team not recommending Plane React anymore using Next.js?
>> Brian Holt: That's a good question. There was some controversy about this, and we'll probably go over this more kind of throughout the day, but there's some controversy around that.

[00:08:15]
The React docs just go straight, just like just use Remix, or Next, or something like that, and they kind of shied people away from using client-side React. I think it's personally extremely misguided. I've been writing client-side React for a decade and I've done okay for myself. And the sites that I've worked on have been plenty fast and plenty responsive without any concept of React server-side components.

[00:08:38]
My thought is that the React team is solving for massive enterprise problems like Facebook-sized problems, Netflix-sized problems, and most of us don't have those problems, right? Client-side React does plenty well by itself, and so I think it's 100% viable to ship vlient-side React without even having a concept of Next.js.

[00:09:03]
I'm not at all disparaging Next.js, or Remix, or any of those. I also think they're extremely valuable for what they do. But if you don't have those shape of problems, then you shouldn't use that shape at all. I always get a lot of questions about, hey, Brian, what theme is this, or how did you set this up?

[00:09:17]
And so I just have a little section to get that all out of the way. Believe me, this isn't for me, so not for you. [LAUGH] Cuz otherwise I'll get endless questions like, hey, Brian, what theme are you using this? It's I just use the default dark plus, it's not really that interesting.

[00:09:31]
Anyway, so please, I wrote the course, I think it's actually 2015, it might be 2016, I can't remember it. But anyway, 20.6 as long as you are Node 20.6 or above, you should be good. I did try to run this with a Bun, and it did work. I'm not gonna say anything after that.

[00:09:53]
I didn't try it with Deno. So if you've tried it with Deno, good luck. But it did work with Bun the one time I tried it. So you might try that if you are very set that you want to use Bun, but please probably just use Node.js, cuz you'll probably have a better time.

[00:10:11]
My tools, Visual Studio Code, I used to work on it so I'm now obligated by blood oath to use VSCode. Firefox, I just like that there's more than one competitor in the browser field, so I've used Firefox for a very long time. And then I use Terminal.app, just the one that ships with MacOS.

[00:10:33]
This course does work on Linux. It does work on Windows. I'm not gonna speak too much to those workflows. If you're in Linux, I assume you know what you're doing more than I do. And if you're in Windows, probably just use WSL2, that will simplify a lot of stuff.

[00:10:50]
Dark plus theme, I use the MonoLisa font with ligatures installed. I left a bunch of notes there if you wanna follow along with that. MonoLisa is not free, but I look at a font all day, so I figured I was okay paying for it. If you want a free one, I like the Cascadia Code one from Microsoft that also has ligatures involved.

[00:11:12]
I use the VS Code icons extension. For the terminal, I use zhs. I use the Dracula theme, starship prompt, and the CaskaydiaCove if you wanna see what I'm talking about here. This prompt here comes from starship, and the fact that can say NodeJS and stuff like that, that all comes from the CaskaydiaCove nerd font.

[00:11:38]
So I left you all of the links if you're interested in following along with the way that I did it. But again, it's such a common question that I just feel the need to go through it first.