Complete Intro to React v4 Prelude & Git Setup

[00:00:00]
>> Brian Holt: Welcome, buckle up, I guess is my best advice to you. This is version four of this course. I can't believe this is the fourth time I've come back here to teach this course. Like Mark was alluding to, this course is quite different from the other three. The other three were kind of reintroductions of the same material, modified and modernized.

[00:00:20] And actually, v3 is still pretty good, in the sense that it's not very outdated. That's actually one thing I appreciate about Frontend Masters is that they always come back here to make sure everything's super, super fresh. With that being said, if you want to learn about Webpack and some of those other tools that I'm using in v3, definitely, it's still valid.

[00:00:42] But for this one, we kind of restructured the course a little bit so the first half of this course is just React, or at least it's the barely amount of tools that you need to know React. So we do Parcel and some of these other things so that you can build a real project, but they're pretty minimal tools.

[00:01:01] Then the second half of this course, as you can see after step 12 there, is individual modules, and so they're all self-contained. So if you wanna skip Emotion and go down to Redux, they're all self-contained, which is gonna be really great in case you don't wanna learn all of those different things.

[00:01:21] There's a link here to v3. The other thing is if you want to get to that website, it's bit.ly/react-v4. And that should just take you directly there. Cool, so there's a link to v3 here. In fact, I'll just show you right here. If you go here, you can see all the various things that v1 and v2 and v3 cover.

[00:01:46] So if I'm not covering something here today that you wanna cover, definitely try v3. I'm not going over styled components today. That only happens in v3, for example. Okay, the next thing I wanted to, just kind some more housekeeping kind of things. You'll see these kinda trees throughout the entire thing here.

[00:02:11] This course I developed has a series of commits on a repo. So if you get lost, you can actually go back to that commit in the repo and it'll take you to that point. And I'm gonna show you how to do that really quick because not everyone necessarily knows how to do that with Git.

[00:02:26] So if you know how do you do with Git already, great, you can just tune out for like the next three minutes. If you don't know how to use this with Git, I'm going to invite you to go use sourcetreeapp.com. This is from Atlassian. They make BitBucket, Jira, all your favorite or not favorite tools, depending on who you're asking.

[00:02:47] Go ahead and download this. This works well on both Windows and on Mac OSx. I have it open here. What you're gonna wanna do then is go to github.com/btholt/complete-intro-to-react-v4.
>> Brian Holt: Should take you to this repo. You're gonna want to clone this repo. So I'm gonna copy that and open it in source tree here.

[00:03:19]
>> Brian Holt: Sorry, this is still kind of a new one for me. I don't really ever use GUIs, but I know it is helpful for some people. So in any case, you'll clone the repo, repository.
>> Brian Holt: I think that's what I want. Clone from URL, Source URL, put that in

[00:03:46]
>> Brian Holt: And it'll clone in that repo for you.
>> Brian Holt: So let's just clone that.
>> Brian Holt: Take a second, it'll clone it, and you can see here that it'll open it. So you can see here I have 1, 2, I recognize that I have two 3s, and I did not have time to fix that.

[00:04:06] So I am sorry, there's the first 3 and a second 3, cuz I count good. But you can see here, number 1 is the first commit in here, and let's actually go give you an example of what I'm talking about. So this is an example of one of these commits, right?

[00:04:23] So you can see here, just look at the first bit of it here. And then, if I go to Sourcetree, you can see here d6bf51f, right? So that matches the first part of it here. So you know that this is the commit that it matches up against, right?

[00:04:42] Does that make sense? So all you have to do if I wanna go back to this point in the repo, I just right-click and I say Checkout. It's gonna say, are you sure you wanna checkout? And you'll actually go back here and it'll move your repo back to that point, right?

[00:04:55] So if we get further down the course and you need to checkout here, you just right-click on that, say Checkout and it'll take you up there. Right, and now my repo is in this state, so I can see all the code in that state. It might ask you if you need to stash or something like that.

[00:05:11] That means you have changes that are conflicting, just say yes, please stash this for me. Which it 'll save all of your changes into your stash which is here in Stashes.
>> Brian Holt: Any questions about that? This will hopefully help. Yeah, go ahead.
>> Speaker 2: If we're not using Sourcetree, just using the terminal, is the branch name 1, 2?

[00:05:35]
>> Brian Holt: Mm-hm, that's the commit message. So if you wanted to do it in the terminal you'd say, git checkout, then the whole hash, yeah. So I love Git, it's actually one of my most favorite and least favorite tools. [LAUGH] It's definitely something that I personally, just as a personal level suggest that you as a developer learn to use really well.

[00:05:56] And there's an amazing course for my co-worker, Nina Zakharenko on Frontend Masters that will teach you how to use Git really, really well. And it is worth your time. It's less than four hours, right? So definitely, definitely check that out. So I do expect you to code along with me.

[00:06:13] There aren't any exercises in this. I found the best way to teach this course is to just write an app together. Cuz I feel like writing little exercises just doesn't really simulate what it's like to build an application, and that's what you wanna do with React. So that's why we'll just be live coding together all the time.

[00:06:30] And if you break something you fall behind or anything like that, no problem, this is a long course, so that's kind of expected. It'll happen to you at least a couple of times. Just feel free to just checkout the last branch and keep going from there. Yeah, definitely, definitely expected that you'll do that.

[00:06:50]
>> Brian Holt: Cool, any other questions about that?
>> Brian Holt: All right, hopefully that helps you a little bit. So coming back here, Introduction. So that's why you'll see these little tree emojis there. Repo link is there, Nina's course is there, Git in-depth, and the Sourcetree link is there.