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]
>> [MUSIC]
[00:00:39]
>> Brian Holt: Yeah like Mark said, my name is Brian Holt. Recently start working at that spot a year ago, recently to San Francisco and yeah it's been really fun. If you haven't already grew up here to the bit.ly/ReactIntro make sure it's capital R capital I, or else you gonna get someone else's slides.
[00:00:59] I don't know why but at least I guess sensitive like that. Or you can just go to the bit this GitHub page and that that's actually where it redirects. I just thought that was a little bit easier. This is intended to be interactive so please ask questions as you have them both in person and online, we've been talking about React today.
[00:01:20] I've been doing Reacts for what is essentially an eternity in terms of JavaScript frameworks. I was the first person to launch React code at Reddit. And I was discussing with one of the React core team members, and they said they felt like they really had arrived once Reddit had launched some react code.
[00:01:41] Because we had no crossover at that point we had just found the technology on our own and said this is really cool we want to write code in this and no one had convinced us to do it. Whereas, I think when it like Khan Academy launched it before us and Khan had had more cross-pollination with react.
[00:01:58] So I've been doing this for almost three years now which is crazy in terms of reactor. I feel like reactors just started to gain some steam now well has already gained a lot of steam recently. Yeah but it's enjoyable, I think you'll gonna like it, it made me really enjoy writing UI code.
[00:02:21] And enjoy maintaining UI code which is an entirely separate beast. So let's start diving in here. You can see here, I have this web page and literally this web page is what I have here on my surface. So if you want to follow step by step of what I'm doing here.
[00:02:40] It's you're literally looking at my notes if you're on this page. The way this workshop is going to work is we're going to write code and we're going to hit a pain point. So that you can feel certain pain points in the reactor community like development process. And then we're going to backtrack and refactor and that's kind of the whole workshop is that way, is factor refactor.
[00:03:05] And it's to kind of hopefully demonstrate to you, we're going to be introducing a build step and some transpolation, all these different things. Which add complications to app, like a lot of people said that they're fatigued of JavaScript adding all these different tools, all these different build steps, all these different things.
[00:03:24] And I can definitely see that if you don't understand why you're doing it, if you just instantly start writing JSX and transpiring with babble and using web pack like you. You don't really understand or feel that pain that made you like, I really want this. So hopefully the idea here is, you get to this point like, okay, this is really annoying, I wish we didn't have to do this.
[00:03:42] And then we'll introduce more complexity that gets rid of that pain point, but it does add complexity of the project. So that's kind of the idea here. Over the course of today we're going to be writing in and tomorrow for that matter. We're going to be writing, basically, a very stripped down version of the Netflix interface that we can be able to watch YouTube videos on essentially.
[00:04:06] And it should be pretty fun, I really enjoyed writing this. So this is not just about React. This is about the entire React ecosystem because React is just a piece of the puzzle, right? It does basically the views for you then it's up to you to kind of manage how everyone marshal the data around.
[00:04:27] How you want to interact with the server all that's up to you, React to just taking care of one part of it. Now you can choose to use React for everything and just kind of leave everything by the wayside. And that's actually a valid choice for a lot of projects, so I'm gonna show you how to do that as well but then we're gonna start introducing more things like Redux.
[00:04:45] Right to manage your state and that hopefully give you ideas of how you want to structure your own app. So ultimately, what I'm getting at here is, React is relatively unopinionated. But we're gonna start introducing opinions as we go on. Right because you introduce Webpack that's an opinion, you introduced Standard and that's an opinion, you introduce Mocha and that's an opinion right.
[00:05:08] But I'm just showing you all these different pieces but if you have a different piece that you want to plug in. Like that's what I want you to take away here is that these are modules, these are pieces of the puzzle and if you don't like Standard. And you prefer semi-Standard or another way of lending your code than rip out the Standard and put in your own favorite one.
[00:05:27] Or if you don't like Redux and you really like alter FloMax rip out Redux and put it in FloMax, right, like that. That's kind of the idea of what we're getting at here is we want you to understand the modules. We understand where the pieces go and then you can take out the pieces you don't like and put in the pieces that you do like.
[00:05:44] Or perhaps even more important liking or disliking something, what actually works for your project, that's ultimately what we want you to do here. So the opinions that I'm going to be introducing today are, and tomorrow. Node JS, Express, Redux, Webpack, Mocha, Enzyme and React router as well Standard.
[00:06:07] And if you don't familiar with any of these right now, it's okay we're gonna be going over this all. This basically assumes, this workshop assumes that JavaScript and beyond that we'll talk about everything else. I'm gonna use some ES6 here and there just because it's at this point is force to have it for me.
[00:06:25] But I don't expect you to know any of the ES6, so I will explain any ES6 that I'm using to you as we're doing it. But if I skip over something please feel free to stop me and we can pause for a second and talk about ES6 as well.
[00:06:41] Another thing keep in mind is that we're going to be exploring all these tools as they relate to React. But we're only scratching, like we're gonna be deep diving and React but we're not to be diving in anything else. So we're all just me talking about how these individual tools just relate to React.
[00:06:57] So this is definitely not a workshop on Webpack. You can be using some advanced features of Webpack, but certainly not all of them. So that's something to keep in mind if you get really interested in Redux right? You might wanna go deep dive later and find out more about Redux or something like that.
[00:07:17] And I'm sure that my document here is full stylistics just for warning. [LAUGH] Okay. So if you haven't already started, once you go ahead and do some of these Setup steps, you definitely gonna need the clone the git repo, [LAUGH] or else you cannot not have a good time.
[00:07:33] Clone the git repo and then check out the start branch. That's the first thing to do, if the master branch is the finished project, we're gonna start with the start branch which is basically a stripped down repo that we can start writing all these files into. I'm gonna to be using node, I actually think I'm still on node four to one, I haven't updated yet.
[00:08:02] But I think anything node four and above you should be, actually think anything like if you use io.js. I think you'd be fine or node 12.012 and if used the harmony you should be fine as well. But that is to say just go ahead make sure before you should be okay.
[00:08:25]
>> Brian Holt: Once you clone the repo, make sure you do npm install inside of the repo to get all the dependencies. That because we don't have to do it on fly which will be really good. And you can do these global installs on your npm right now. You can do them later as well, whatever works for you.
[00:08:48]
>> Brian Holt: I'm on webpack v1.12, Mocha v2.4 and standard v6.0, and I don't think any of that matters. Standard might matter if you have anything less than 6 but the other ones shouldn't matter. And then I believe we're teaching node or so React v0.14, if I remember correctly. Okay, intro over, I think, unless anyone has any questions.
[00:09:17]
>> Speaker 2: Which branch are we supposed to be on?
>> Brian Holt: Start.
>> Brian Holt: That does remind me of something though. Because we're gonna be building a project together. It's kind of like, you have to like build one part of the app and then we move on to build the next part of the app, right?
[00:09:37] And if it's the bottom part of the work then you can't go forward in the app and then you have like a really frustrating time. Because you're trying to fix the old thing while we're still going forward. So what I'm gonna do every still option and this gonna create a new branch and push it to GitHub.
[00:09:49] And you're welcome to just pull down that branch and it'll have everything that I just did. So if you fall behind, don't worry. Pretty soon, we'll catch up because you can just pull the new branch and start working from there. And so if I go too long without creating a branch, you can just like raise your hand or give me the middle finger or something like that and I'll remember to push up a new branch.