This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Who is this Course For" Lesson
[00:00:00]
>> So who is this course for? Hoping it's for you, right? I tried to build this course for anyone that wants to learn react that they can come in and pick this up. So it's for beginners in JavaScript. It's for, I've been working as a career engineer for a decade.
[00:00:18] The key here that I want you to understand at least a little bit of JavaScript. Because I'm not gonna be teaching you JavaScript. And if you do need to understand JavaScript, there's lots of great courses on front end masters. I like to do some help there like the boot camp is a good place you can go or intro to web dev v2.
[00:00:34] Lots of good courses for you to take for that. So if this is your first time in React, or sorry, in JavaScript, this should be the third or fourth course you might take. If you have taken previous versions of this course, this is updated. This is with all the latest greatest hotness.
[00:00:51] So this is still useful to take in particular that I go over some new techniques, some updated tooling, all those kinds of things. This course will feature all the current feature set of the library. By the time that you're done with this, you'll have learned almost all of the API.
[00:01:08] So that's all goodness as well. This course does show so much the same structure as V5. So if you've done V5, this will feel very familiar. But again, some updated gray content and a lot of it's been rewritten. So it is, I think, still worthwhile for you to check out.
[00:01:24] I built this course because I was really frustrated with a lot of the courses out there that they didn't start from ground zero. So when I dig into something I new, I don't like magic. I wanna understand how everything works and in particular the tools. This is why I don't start with Create React App, which is a great tool.
[00:01:40] I love Create React App, I use it all the time. But I don't have you start with that because I want you to understand the tools that go to create React App. Create React App does a lot for you, right? It's Setup, the build process, it adds linting.
[00:01:56] It adds service workers. And I wanna strip all that away. And I want you and I to start from a repo, from zero. So that you and I can learn React together. So that's why I wrote this course this way. It's why we're not using Create React App.
[00:02:09] I think afterwards, you should use Create React App once you use everything because it does set up a good process for you. But I want you to understand how to set this up for yourself. And why I use all the tools that I use. So let's even talk about like what React is, right?
[00:02:23] What is React? Why would I even wanna learn this React thing? Well, it's a library written for Facebook. I think it actually started out of Instagram if I'm not correct, or if I'm not wrong. It's a library for the view layer. So when I say the view layer, is not gonna handle like your models.
[00:02:41] It's not going to do anything like that. It's a pretty unopinionated the toolset for you to create User Interfaces out of it. But now, you can kind of argue with me it doesn't do models like does state. But well, we'll get into that when we get into the course.
[00:02:54] But let's just talk about like the fundamental model of how a React Application works. So React Application is fundamentally just a component which is made up out of other components. Which is made up of other components and so on and so forth, to great depth. If you could go through Facebook's homepage, there's levels of depth.
[00:03:13] They have a 100 components deep, right? So it actually, it's a lot of components making up other components. So there's other frameworks out there. There's like angular might be one of them, amber could definitely be one of them. That what they try and do is, they try and separate the models, the views, and the view models in two separate pieces.
[00:03:33] So they try and separate these into, like basically MVC. If you've never heard of MVC, it stands for model view controller. And it's a really popular paradigm for the back end of things like Ruby for things like Django, even you can do it with Express if you really wanted to.
[00:03:50] And that's a really great paradigm for the backend to separate these kind of concerns into separate kind of silos. So you can say like, all right, if there's problems with my database layer, I can know. I can go look at my models, right? Or if my API is not responding correctly, I can go look at my views.
[00:04:04] So someone took that as like, this is a great idea. Let's take this and apply it to the front end. And more or less, that's kind of how we got backbone. If you remember backbone and I imagine some of you probably still write backbone. It's a fine library even still.
[00:04:18] React kind of took this and totally flipped on its head, like this is a great paradigm for the back end. But let's not do this for the front end. This is actually kind of makes front end harder because it's a weird abstraction. When you're talking to databases to have models, everything in the front end is based around components, right?
[00:04:35] I have an HTML tag or a yeah. Which is filled with a body tag, which is filled with dibs and sections, and images and paragraphs. And why don't we embrace that model and take everything. The model the view, the controller, the view model, whatever you wanna call it.
[00:04:51] And shove it together for one individual little component. This ends up working out really well. But it feels kind of gross to people up front. Like, well, I was used to separating this and I've always felt this was a good idea. So I'm gonna invite you to kind of challenge that a little bit.
[00:05:06] Work with me, with this, and then see at the end that I think it's really good. The reason why I like this is because when you go into like a component. Like let's take, like you have a counter on the page, right? And also on the counter starts counting wrong.
[00:05:18] Well, if you're in a different framework, you can say like, is that the directive that's wrong? Is that the view model that's wrong? Is that the controller is that the scope? I'm referring to angular here just because that's the one I know. And I'm not picking on angular great library as well.
[00:05:33] The downside of that approach is it's really hard to separate out. Where's that bug coming from? Let's flip over to React now. If there's a bug with the counter component, It's in the counter component. In a depth of, the way that you structure your application with React doesn't allow you to put it anywhere else.
[00:05:53] And so that reason is why I quite React, It's a very readable library. It's a very debuggable Library. It's a tool that I feel like assist you in maintaining it. And that's always the hardest part of writing software is maintaining software long term and fixing bugs. And debuggability and readability, and all those kinds of things.
[00:06:14] So, I'm excited to teach you all this stuff. This is something I really enjoy. So hopefully this course is for you.