Complete Intro to React, v5 Introduction

[00:00:00]
>> Brian Holt: Welcome to the Complete Intro to React V5, I am stoked to be back here teaching this again. This is my favorite course. I'll probably repeat that like 17 times today, it's prophetic.
>> Brian Holt: So the complete Intro to React, this is gonna go over the entirety of like how to write React.

[00:00:19] And we go over all the latest features, which is gonna be things like hooks. And it's gonna be all the new fun that comes with that such as context and portals and all sorts of really cool stuff. And updating some of those things from the version four of this course.

[00:00:33] As well it's gonna be going over some of the other APIs like classes and life cycles and things like that. So you get a handle on all that kind of stuff. The first thing I want you to do is, I want you to head to this bit.ly so B I T L Y /react-v5 and should land on this page here.

[00:00:53] Just so you know, these are my course notes, this is what we're gonna be going over. So I have another Surface right here, that's all I have up here. So if you fall behind or you need to come up to date or anything like that, you can just read this as well.

[00:01:09] Okay?
>> Brian Holt: So
>> Brian Holt: You do not have to have taken the previous versions of this course to watch V5, right this is actually it's V5 in the sense that it's the fifth iteration. So you start from zero, you don't have to watch any of the other ones to get here.

[00:01:28] That being said, V3 actually is still useful if you need to talk about web pack. If you need to talk about react router, or any of those things, everything in V3 is still very much up to date. So that's out there if you need some of those things as well.

[00:01:46]
>> Brian Holt: This is meant to be mostly modular, right? So that you can kinda skip from lesson to lesson, but the way that you have to do that is moving between git commits. So if I go to github.com/BTholt/complete-intro-to-react-V5, there's a link to it as well in the course notes.

[00:02:14]
>> Brian Holt: Repo.
>> Brian Holt: The repo is here, right there. So if you go to this page and you scroll down to where it says the repo is here and you click on that it will take you to here, which is the repo for the course. And inside of here, you can click on the commits.

[00:02:34] And you can see all of the commits for this project, right. So each section of this course moves forward in one commit. So you can see if you click on one of these, you can see what's been added right? Or if you click on one of these, you can see that this got deleted or this got updated or something like that.

[00:02:50] So this will actually be really helpful to show you the divs between each part of the course if you need to walk through that as well.
>> Brian Holt: If you want to start in the middle of one of these, you can actually just say I want to start with useState and custom hooks and things like that.

[00:03:08] There's actually a program out here called Sourcetree, that I'm going to suggest that you get. You can get the Sourcetreeapp.com. I already have it installed. And if you clone the repo and point Sourcetree to it, no, why would I update this. Skip version. [LAUGH] Just kidding. Update all of your things.

[00:03:28] But, so you can see here I have this open here in Sourcetree. So if I wanna go back to this commit in time, I can actually just say right-click on here and say Checkout. It's gonna say, are you sure you want to do this? Right, so first of all, this will blow away any changes that you have made.

[00:03:44] So be be careful of that, right? But I'm gonna say okay. And this will actually move me back to that commit, right? So now my repo will be in that state, and I can keep going forward, right? But if wanna move forward again, I can just say I wanna go to where we add React router.

[00:04:00] We can see all the divs down here as well.
>> Brian Holt: I can just right-click on this and say checkout.
>> Brian Holt: And now I will be up here. And then ultimately the last commit in here that's you're interested in is that theme context that's the end of this course.

[00:04:20] So that's like the what the state of the master branch is in right now. All of these other branches are for intermediate React which you can also watch that later after you're done with this course. So that's really helpful as well.
>> Brian Holt: Let's see. Going back to the page here.

[00:04:42] You'll also see these, branches things with that. Those will tell you where there are commit points right. But I'll be very forthcoming and calling out this is the commit that you need to go forward. I'll tell you which commit message you wanna go forward to.
>> Brian Holt: So Sourcetree is really great.

[00:04:59] If you know how to use git on the commandline, you can also use that. You can also use GitHub Desktop. I just showed you Source Tree, because I think that's the easiest one to start using. I'd also suggest Git In-depth, which is a course from Nino Zacharenko on Frontend Masters.

[00:05:13] It's a fantastic course that you should take that'll teach you everything you need to know about Git.
>> Brian Holt: Where to file issues, this course is obviously gonna have some mistakes and it's gonna have spelling errors and things like that. I would, if you could open a pull request or file an issue that would be super helpful as well.

[00:05:32] This lovely forehead is mine. Who am I? So my name is Brian Holt. I am a Senior Program Manager at Microsoft. I work on JavaScript on Azure and Visual Studio Code, but for the most part my job is to make Azure a place that you want to deploy your node.js code.

[00:05:56] I'm frequently here in Frontend Masters, I love it here. I'll never teach on probably any other platform again. And I'm really grateful for them to keep inviting me back and for everything they do for that. I'm also sometimes on Frontend Happy Hour, which is a podcast where it's descriptive, we get drunk and we talk about JavaScript.

[00:06:17] Previously I was a staff engineer at LinkedIn, I've been a senior engineer at Netflix and Reddit. I also worked at these smaller Salt Lake City based companies Needle and KSL and New Skin. I'm also on the board of Vets Who Code, which I think is a fantastic organization worth your time and donations.

[00:06:35] And I also co-founded with another friend and master Sarah Dresner a conference called Concatenate, which is the biggest JavaScript conference that we know of in Africa.
>> Brian Holt: Just some more about me. I live in Seattle with my wife and my dog. As you'll see throughout this course I absolutely love dogs.

[00:06:57] I have a little Havanese and she's adorable. And I love to travel. I've been to 40 or 50 countries at this point. I took 97 flights last year. That's an interesting fact. Took the flu almost 300,000 miles. I will never do that again. And please catch up with me on Twitter, Instagram, GitHub, LinkedIn.

[00:07:18] If you add me to LinkedIn I'll definitely add you back. So no worries there. Why was this course created? I just want to give a huge shout to the crew here at Frontend Masters. They've been amazing to work with, and one of my favorite things about that is that this course is actually open source.

[00:07:37] So this website that you're looking at here, please share it with everyone. I love that they allow me to come in and do these courses and have these trainings and pay me to do it. And at the same time, allow me to open source these so that they're available to everyone.

[00:07:51] I think the videos are great. That's why I put a lot of time into these and that's why I think we can charge for them. But I think that that knowledge should be freely shared. And I'm really grateful that Frontend Masters encourages me to do these kind of things.

[00:08:03] And last thing here, if you wanna start the repo on GitHub that would be great. It strokes my ego and that's the important part, [LAUGH] just kidding. It does help it get farther reach which is always a good thing as well.
>> Brian Holt: And with that, yeah, we'll start getting into learning some React.