Complete Intro to React, v3 (feat. Redux, Router & Flow) Introduction

[00:00:00]
>> Brian Holt: So, yeah, I just wanted to emphasize, especially for future video watchers that this is version three, so make sure that you're on the correct course website because there are three versions of it. Just wanted to show you right here, that there are versions 1, 2, and 3.

[00:00:17] With the v3, there's not really a good reason to watch v 2 anymore, but there is still good reason to watch v1. v1 is gonna to use createClass, which we are not gonna to use createClass at all today. And if this doesn't make sense to you, that's okay, cuz it's deprecated.

[00:00:35] It uses Mocha, Chai, and Sinon for testing, so if you wanna see how React testing looks with those particular frameworks, that's a good reason to look at it. v1 and v2 use what's called Standard ESLint, and today we're gonna be using AirBnB. And then there's just a bunch of other stuff down here, you can look at that at your leisure.

[00:00:55] So there are links to v1 and v2 on here. But, again, today, we're gonna be on v3. You can always be assured that the one that's at this particular URL, which is also easy to get to at nho.lt/react, will always be the most up-to-date one. And then I'll move the other ones to different links.

[00:01:19]
>> Brian Holt: Really excited that Frontend Masters gives me the time and [COUGH] resources to be able to go and develop this course. All of this material will live online, free, forever, and yeah, you can watch the videos on Frontend Masters, which is pretty sweet. So a little introduction about me.

[00:01:37] My name's Brian Holt. Currently living in San Francisco but originally from Salt Lake City. Just really, really happy to be here. Previously worked at Netflix and Reddit. And yeah, this is the complete intro to React. So let's talk about the structure of how this particular workshop is gonna work.

[00:02:00] A lot of times when you get into React tutorials, they're just gonna throw you to straight into the deep end, right? It's like out of the box you have to setup a Webpack, and then Babel, and then testing frameworks, and just all these different tools right out of the box.

[00:02:14] And a common refrain amongst new developers with React is it's too complicated. There's too much going on. There's too much magic and I don't really get it, which is really frustrating to me because it doesn't have to be that way, right? React itself, at least the way that you interact with React, is actually really simple.

[00:02:32] And then we build all this complexity on top of it to make it easier, right? So I'm gonna use two terms here, simple and easy, which I'm borrowing from a talk called Simple Made Easy, which I definitely suggest you go watch, but to kind of define those terms for you.

[00:02:47] Something can be easy and complex, and something can be simple and hard, right? So easy just means that it's really easy to get done, but it can be very complicated. And simple means that the thing itself is actually fairly simple, or in other words, not complex, but it could be really hard to wrap your mind around, right?

[00:03:05] So my best example of that is Redux, right? A lot of people find Redux to be very simple, cuz there's not much to it. But it's pretty hard, it's a pretty hard library to get your mind around. So anyway, what I wanna say is that we're gonna start with barebones React, with literally nothing else.

[00:03:22] We're gonna not even like include a separately script file, we're going to put it straight to the HTML to show you that it really is a pretty simple library. And then, as we are gonna keep going, we're gonna keep introducing new tools to make our lives easier. But in the process of introducing tools, we make our application more complex, right?

[00:03:43] So, basically, what I'm trying to say is I'm gonna try and justify the complexity of the tooling to you. And along the way, hopefully you'll be able to understand the tools that we're using as well. So, yeah, with React, typically, you're not using just React, right? You can, React by itself can build complicated apps and there's no reason to even introduce a build step.

[00:04:07] So it can be done. However, it's gonna make your life easier if you do have these tools. So, by showing you these tools and justifying the complexity, I'm hoping that you'll see why they're there and embrace the complexity for the sake of ease. Furthermore, you don't have to use any of these tools that we're using today.

[00:04:28] For example, we're gonna be using Flow later in the day, maybe tomorrow, probably tomorrow, but you can use TypeScript, that's totally okay. These are all just choices. I've made a bunch of choices for you, and hopefully you can see where to pull out these tools and your own in.

[00:04:45] React is kind of a choose your own adventure, right? It's not necessarily this is the one way to do everything, right? It's not so prescriptive like Meteor, right? Meteor is amazing but you don't get many choices with Meteor. You get some, but not very many. With React, it's kind of an open field for you to kind of put the different pieces together.

[00:05:02] Bu that means you get stuck putting all the pieces together as well, so,
>> Brian Holt: Cool, so, yes, you're gonna be able to plugin own pieces in. And I'll be sure along the way to highlight different alternatives that you can definitely use. So today we'll be using things like Node, Webpack, Jest, Enzyme, Yarn, Prettier, ESLint, React Router, Flow, we're gonna use the AirBnB config for ESLint.

[00:05:31] These are all the different kind of technologies we're gonna use. If you don't already have Node installed at this point, please make sure that you get that done, sooner rather than later. As long as you're above four, I don't think we're gonna be using anything that's more complicated than that.

[00:05:46] You really could get by on .0.12, I do not recommend it though. [LAUGH] I will be on 7.10, and actually I saw that today, 8, is getting released. We will not be using eight. [LAUGH] Cool. There's a ton of spelling errors and stuff like this on the repo, so if you see them feel free to file an issue, open a pull request, angry tweets, all these things work at getting at me.

[00:06:17] So, cool. So lets go ahead and get started. So the first thing is I'm gonna need you to go clone the start branch, which I have a nice little link there for you, which I'm going to do with you as well. Along the way I am going to be pushing up branches to this repo.

[00:06:40] In fact, you can see here, there's a lot of branches. I'll be prefixing everything with v3, but today we're gonna go ahead and start with start. So I'm not gonna be talking too much about how to use Git today. There's plenty of tutorials for that online, but I will show you how to go ahead and clone this Git branch.

[00:07:01] So I'm just gonna come here, I'm going to grab this URL, I'm going to go to my command line, and I'm gonna say git clone, that.
>> Brian Holt: And I need to get the start branch, too, so I'm gonna say, git fetch origin start. I have to go into the repo first.

[00:07:28]
>> Brian Holt: Okay, and then I'm gonna, git checkout start.
>> Brian Holt: So just to make sure. Yep, and I am now on the v3 start branch. Okay, so it should look a little something like this.
>> Brian Holt: [COUGH] Just to kinda give you a little bit of a tour around, you're gonna have an .editorconfig file.

[00:07:51] This is only if you use EditorConfig, which is a nice plug-in for almost every different editor. It's just going to set all of your editor preferences automatically for you for that particular project. So in this particular case, it's gonna make sure that you have two spaces for indents, it's gonna be using spaces not tabs, all these different things.

[00:08:10] .gitignore, just a bunch of stuffs that we should ignore.
>> Brian Holt: Let's actually just open this in Sublime. I'm gonna be using Sublime today because that's what I know how [LAUGH] too use. I have no horse in this particular battle of, which ever to use, I just don't care.

[00:08:28] [LAUGH] I actually had an amusing talk today. I was arguing, well, arguing, yeah, arguing with someone about semicolons this morning. And have I spent more characters typing out arguing about semicolons than I have saved from not writing semicolons, which I found quite ironic. So, okay, let's look at what we have here.

[00:08:51] So we have a data.json file, which is going to be a bunch of TV shows kind of data. This is what we're gonna be building today as kind of a video viewing sort of app. So this just has a bunch of titles, descriptions, that sort of thing. It's in data.json.

[00:09:10] You have a package.json file. I have locked out these dependencies for you. The reason being is that typically you don't wanna lock down dependencies like I have here, but when someone tries this workshop in a year, right, if they don't get the same dependencies, everything's gonna break. I cannot tell you how many times I get tweeted about, hey, this is broken and it's because they're trying a newer version of one of these particular libraries.

[00:09:36] So, anyways, suffice to say, these are all our dependencies, which is crazy, right, when you look at how many dependencies we're bringing in here. But hopefully, it'll make sense throughout the day. Then we had this ratings API.js. So previously, this used the Open Movie Database to pull different metadata for these movie or TV shows down.

[00:09:59] Unfortunately, that API went private [LAUGH], so I kind of wrote here just a quick and dirty little API server that you can run for yourself, so this will always work. So that's all this does, it's just a tiny little Express server, which I'll show you how to run it later.

[00:10:20] And lastly, there's a lock file, this is a lock file to lock down all of the dependencies. So, cool. So that's everything that should be included. And there's some CSS and images and whatnot. So we'll be using those as well. Okay, so going back here, this is literally the notes that I have that I'm going to be reading from while I teach you this workshop.

[00:10:47] So if you fall behind, or if you wanna see something a different way, or see what I'm reading here, it's all available here. And that's actually what I have on this laptop here.