Complete Intro to React, v2 (feat. Router v4 and Redux) Introduction

[00:00:00]
>> [MUSIC]

[00:00:39]
>> Brian Holt: So my name is Brian Holt, living in San Francisco, but I consider myself more of a Salt Lake citizen, from Utah. Yeah, this is day 7 and day 8 of the workshop Frontend Masters. My day job's at Netflix currently, but the first time I gave a workshop here I was working at Reddit, which was an adventure into itself.

[00:01:02] [LAUGH] That's a story for another day and like four more beers.
>> Brian Holt: And I also do a podcast right now called Front End Happy Hour, which people seem to like as well which is kind of fun. We just, have you ever seen the show Drunk History right? We had this idea is like we should do drunk JavaScript.

[00:01:20] And so that's kinda how this podcast came up. And it's really fun. We just get shithoused, and then talk about JavaScript.
>> Speaker 2: [LAUGH]
>> Brian Holt: So it's pretty fun. But yeah, now I'm super stoked to be here. Please ask all of your questions, this workshop gets a lot better if we have lots of direction from the audience.

[00:01:39] I try and remember what it's like learning these things but I learned React like three years ago at this point. Is that true? That feels like eternity in React terms, right? I launched Reddit's first React code. Like a responsible adult, I Just totally rewrote a core piece of out infrastructure, launched it, and went on vacation all in React.

[00:02:03] We used to be on Angular one two. And actually ended up doing okay, which is the funny part about that. That's kind of how I kind of stumbled into React. Yeah, no, it's really great and I think you're really gonna like it.
>> Brian Holt: So as you can see here, I'm on this page here, the Complete Intro to React page.

[00:02:26] There is a Version 1 of this workshop, so I'm just gonna go take a look at it. You don't have to necessarily follow me, which is an entirely separate repo. You can see up here it says B1. So this is an older recording of the same workshop. Using slightly different technology stack and older version of all these different libraries, but actually is still useful, there is still permanent information there.

[00:02:47] So if you need to refer this like, this is still out there. This is gonna use mocha child sign up for testing, it's going to use older version of React router which people are still using.
>> Brian Holt: Yeah and it's got some other good tidbits in there so just beware that, that exist but this is been totally updated for this new workshop that we're doing right here.

[00:03:18]
>> Brian Holt: So if, by the way there's a short link if you do nho.lt/react. This will take you to this page. That is just easier for me to remember.
>> Brian Holt: So yeah. We're gonna be talking about the complete intro to React. And when I say complete intro, I mean we're gonna talk about React.

[00:03:42] But React itself, a library is not really that big. In terms of the API for it, it's not very big. It only has 30 or so methods, or something like that. I probably should go count one of these days. I keep quoting my figure, and I'm just making it up.

[00:03:57] But suffice to say, it's pretty small as compared to Angular 1.2, that's the last time I worked in Angular, so forgive me if it's a little dated. But Angular 1.2 I think had over 200 methods available. And the only reason I bring up that comparison is, you can know the entire React library.

[00:04:16] Like it's a knowable quantity, right? Like after today, you will know almost well, today and tomorrow. But after this workshop, you'll know more or less the whole surface area of React. Whereas if you do an angular workshop, there's no chance you're gonna cover the whole library it just does too much.

[00:04:36] So, that would be just React, but we're gonna be talking about everything that goes around React. So, a lot of people's frustrations when they start with React cuz there's so much going on. There's so many different pieces, right? There's WebPack, there's Babel, there's like all these different pieces that have to fit together before your page even starts up, right?

[00:04:56] And that's a big part of the frustration. So that's what this workshop really aims to kind of help you with. It aims to basically, we're gonna start doing something in React, right. And then we're gonna replicate some sort of pain point, right. And you're gonna say that, I wish I didn't have to do this.

[00:05:12] And then I'm gonna show you the tool that helps you get around that pain point. Now tools introduce complexity like that's just the nature of the beast as soon as you add more tools to whatever you're doing it becomes more complex. But you have to kind of weigh the complexity, does it add ease right?

[00:05:29] I'm making my project more complex but I'm making it easier to work on. And I think that's a big problem with people's staring with reactors we just throw the entire kitchen sink at the site here is the easiest thing to do with React some people like this is great what the hell is actually going on with my app right.

[00:05:45] And so that's kind of the style of this workshop is like let's hit all the pin points let's understand why the tools exist and then they'll show how to use the tool. So that's kinda the idea, hopefully that's a good style for you.