This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Introduction" Lesson
[00:00:00]
>> Hello, welcome to the complete intro to React Version 6. My name is Brian Holt, and I'm very happy that you're joining me for this. What you see in front of you on the screen right now, the Complete Intro to React website, it's for you, right? So this is actually my course.
[00:00:14] So you notice I have two laptops here. One of them is just literally this website up. So I'm teaching directly from this website. And I open sources and put it out there for all of you to use, so that you can actually follow along here. If you fall behind, or if you wanna copy and paste the same things that I'm doing, it's all here for you.
[00:00:33] So this is just on my GitHub, it's open source. You can also share it for free to other people, that's totally fine. Just a little short link to get you here. If you just do bit.ly/react-6 like this, this will take you directly there. Or you can just type this long thing or you can go to my GitHub, which is BT Holton, you can pull it off of there.
[00:01:01] So, I'm gonna click into these little lessons here. You can see this is all the lessons for both the Complete Intro to React to V6, as well as Intermediate React V3. But let's see, if you click here on Welcome- Introduction, notice here in the top, right it says Welcome- Introduction.
[00:01:14] So if you're jumping in different parts of the video that you can actually see where I am, the first part being the name of the lesson, the second part being the whole section. So you can kinda reorient yourself based on that. There's some great art in here, that's from Alice Brereton.
[00:01:32] So she did great work for this. And one thing I do wanna highlight right here that people ask me constantly, so I just wanna address it upfront. You don't have to take the previous versions of this course to get this, this is a revision. So this is the sixth revision of this Complete Intro to React course where we're always trying to keep it fresh and better.
[00:01:47] So you should just watch this one unless you have a specific reason to watch an older one. So, let's talk about why I made this course. I've been writing React for a pretty long time. I guess we're going on seven years now, which it's hard for me to believe that seven years has gone by since I wrote my first React course, or first React code.
[00:02:10] I launched Reddit's first React code in July of 2014, which was before it's cool. I like to tell people, you know how people say I liked Radiohead before they were cool, I liked React before it was cool. Or maybe a better way of putting that is, I launched React in production before it was a good idea, which is probably the more accurate way of putting that.
[00:02:35] So the way this course is structured is, I'm gonna teach you React bare bones, no tools whatsoever upfront, and then we're gonna slowly piece by piece write more code until we hit a problem. And then we're going to introduce a tool that solves that problem. And the reason why I like doing this is I like for you to see the reason of why we're using the tools before we actually start using the tools.
[00:02:59] And the reason being for that is just, if you add tools before you understand the complexity that they're solving, then you don't understand why you have the tool and you start to resent your tools, right? But if you understand why you're adding a tool, you start to embrace your tools because you understand the complexity that it's removing from you.
[00:03:19] So who's this course for? This course is for anyone that wants to learn React better. That's probably intuitively obvious, but I expect zero React experience, I don't expect you to have ever opened the docs before. The only thing I'm gonna expect from you is a little bit of JavaScript experience.
[00:03:33] I'm not gonna teach you JavaScript along the way, there's other great Frontend Masters courses for that. As well as basic how to open a browser kinda stuff. I mean, I'll try and allude to it as we're going along. But that's kind of the base of experience that I'm gonna expect from you.
[00:03:51] This course has been tested both on MacOS and Windows. I can see here I have a Mac and my Windows laptops, I test everything on both it should work, no problem, and just by extension, it'll work fine on Linux. Some things that you do need to set up here, you do need to set up Node.js.
[00:04:09] I'm gonna ask you to be on at least version 12. I'll be honest, I think it would work on 10, maybe not, maybe parcel wouldn't work on 10, be on 12 or over. I'll be on 14.9 or something like that. I'll be on version 14, but you could probably be on 15 as well if you want to be.
[00:04:26] If you don't have it installed, there's some set of instructions that I dropped that in the course notes there. You don't have to use Visual Studio Code. I work on the Visual Studio Code team, so I obviously have a reason to tell you to use it, but I just want you to recognize that's my bias.
[00:04:44] I quite like it, but if you do use Visual Studio Code during the course of this workshop, I will teach you a bunch of cool tricks. So that's kind of your trade off here. And just to get this out of the way, people always ask me what's my font or what's my color scheme.
[00:05:01] So the font that I'm using is Dank Mono, it's great name for a font. That one's not free. But the one that is free that works just as well is Microsoft's Cascadia Code. I quite like that one as well. I actually use that one in my terminal. And then I enable ligatures, and I'll show you one once we're into Visual Studio Code, but the idea is if you have a equal signs and an angle bracket next to each other combines them into like a fat looking arrow, it just makes your code look a little bit cooler.
[00:05:29] I just use dark plus, that's the theme that I use. It's the default one for VS Code, I haven't found one that I like better though I do switch from that to Sarah Drasner's Night Owl time to time. I use Mac's built in terminal, on Windows terminal is great, and the icons in my VS Code come from VS Code Icons, which is an extension.
[00:05:52] Okay, where to file issues there's a repo here just click that filed issues open PRS against that repo. That's always great, cuz I definitely made a bunch of spelling mistakes in the course notes. Yeah, I guess who I am a little bit more. This is my 20th course on Frontend Masters.
[00:06:09] I cannot remember how many times I've been here. Somehow they keep letting me in the door. I work at Microsoft, I work on Azure, I work on Visual Studio Code, I'm the PM for JavaScript developer experience for all of Azure. I've worked at a bunch of other places, I've worked at LinkedIn, Netflix, Reddit, usually writing React in some capacity.
[00:06:33] Other than Seattle, I like to play games, that kinda stuff. You can catch up with me on social media here. Twitter, LinkedIn, GitHub, Peloton, I put all my social links in there, feel free to add me on all those social networks. I am the worst at responding to DMs though, just letting you know that upfront.
[00:06:52] [LAUGH] And one last plea to soothe my ego, if you can star this repo, I left you a link there that you can just go and click the GitHub star. Okay, so there's two repos for this course that you need to know about. There's this website, the website you're currently on, and then there's another website here called the example projects, if you go here, you can see here.
[00:07:15] These are all the steps that we're gonna take, right? So this is gonna be step 1, step 2, step 3, so that if you get lost, you can go in and kinda see the state of the repo. So if I click on this hooks one, right, it's just a complete copy of the repo at that point in time.
[00:07:32] So that's for you if you need to copy and paste code or if you get lost or if you just wanna restart in a different area, that's all for you. And keep in mind as well, there's also all the intermediate React stuff here. So 0 or 1 through 12, that's all for just the intro part.
[00:07:48] Everything else here is for the intermedia part.