Introduction

[00:00:00]
>> Welcome to the Complete Intro to React. This is the eighth revision of the Complete Intro to React. We do our best here at Frontend Masters to keep everything nice and fresh and up to date. So you definitely do not have to have taken version seven, six, five, four, three, two, or one.

[00:00:16]
Maybe one. I'm just kidding, don't take one. God, how long ago was that? That was years and years and years ago. So now you can start here on version eight, that's totally fine. If you wanna hop over to React-v8.holt.courses, that will take you to this website. You can also always just put in React.holt.courses, but that will take you to the latest one.

[00:00:40]
So if you're watching this course later and version nine has come out, this will take you to version nine. Whereas version eight will always take you to this website here. So let's dive into it a little bit. Let me explain to you first of all how this course website works a little bit.

[00:01:02]
So if you go here and I click on this, you can see I clicked on under the welcome section and the introduction lesson. It'll say that up here on the top right. So if you're watching this later and you don't know what part of the site I'm on, you can always look in the top right and it will tell you where you are.

[00:01:19]
And then you can always click on this Watch on Frontend Masters. This will take you to the videos on Frontend Masters so you can follow along. This course website itself is open source and free and online forever. Very grateful to Frontend Masters for letting me open source these materials.

[00:01:34]
Not everyone has the opportunity to watch this videos, but this is very shareable, right? So feel free to share this with your colleagues and teammates and things like that. So let's talk about the methodology of this class, why I teach it this way. Obviously, I've taught this eight times now, actually nine times.

[00:01:49]
I had to redo it once cuz API problems. But we don't wanna talk about that right now. I don't wanna talk about that right now. Hopefully that doesn't happen today. It won't, we'll be fine. I started writing React I think in 2014. I actually have a link to the tweet that I tweeted once upon a time about when Reddit launched their very first React code, which I did.

[00:02:14]
It was before React was cool. How people talked about how they liked bands before you did, I liked React before you did. It's fine, it's fine, I'm cool. That's probably the lamest flex I've ever done. And I probably had lamer flexes, but that's a pretty lame flex or dumb flex rather.

[00:02:32]
Yeah, so when I started teaching these courses, I felt like it was like, draw the owl, right, where there's a circle and then the rest of the owl, right? It felt very much like that and I didn't like that. So I wanted to go through and actually explain to step by step everything in React.

[00:02:51]
I'm a big proponent, as someone who's worked in DevTools for a very long time, of understanding the tool that you're using. Because when a tool introduces complexity, you start to resent the tool unless you understand what the tool is doing for you, right? If you understand the complexity that your tool is solving for you, then you love your tools as opposed to hating your tools, right?

[00:03:09]
So we're gonna be writing literally in a script tag React, right, with no build tools or anything like that. And then we'll just build on tools after that. We will not use Create React app, which is an awesome tool for someone to get started. But it's a lot of complexity to introduce all at once.

[00:03:24]
People are like I hate Create React app. Until you understand what Create React app does for you, in which case you love Create React app. So that's basically it. We're going to build our own Create React app basically throughout this. And then we're gonna end up building this pet adoption app throughout the entire course here.

[00:03:44]
So hopefully, this course is for you. It's for anyone that wants to know React better. This course assumes a base level amount of JavaScript. This is not a JavaScript course. There's JavaScript courses on Frontend Masters, a few of which I teach. In fact, yeah, you can go to the bootcamp.

[00:04:02]
And this is a good way to get started as well if that's really where you need to start here. You can take this after that. This class shares much of the structures of v5, v6, and v7. I had a major revision around there, and I was really happy with that flow of the course.

[00:04:19]
So this is really an update to v7. There's some new things in here like React Query and React Toolkit and some other things like that. But for the most part, that the general flow is very similar to v7. Some setup notes here. This course has been tested both on macOS and Windows, and I'm positive it works as well on Linux.

[00:04:43]
I'm gonna recommend the eight gigs of RAM. That will make everything run real smoothly. If you have four gigs, this will still work. It's just you're probably gonna go a little bit slower. Make sure you have Node JS installed. We will be using Node almost immediately. I did test this on 14, but I'm gonna say, I prefer that you're on 16 for this course.

[00:05:05]
And if you're watching the videos later, probably 18. But this has been tested on 14, everything in here should work on 14. I would guess this would probably work on 12, but don't do that, please. I think 12 is actually as of right now deprecated, so just don't do it.

[00:05:24]
You do not have to use VS Code, though I will be showing you some VS Code tips and tricks along the way. I used to work on VS Code, so it's just kind of ingrained in me now. People will always asked me what my setup is here. So I have Mono Lisa for my font, or Mono Lisa, which is not a free code, but I do have ligatures enabled.

[00:05:45]
You'll see sometimes my glyphs are combined with each other. We can have a double equals. It's like a really long equals, things like that. That's called a ligature. I left some notes in here and how to enable that. If you want that on a free font, I'm gonna suggest Cascadia Code, which is the free font that Microsoft puts out.

[00:06:04]
I use Dark+, just the normal VS Code theme. I haven't found one that I like better. Though sometimes I do use Sarah Drasner's Night Owl. No, I actually I use just the built in macOS terminal now, cuz it seems to be faster. So, and then I use vscode-icons.

[00:06:20]
So if you see all the cool icons I have in my VS Code, it's from vscode-icons. I think that's really all that's interesting about my setup. If you have questions about it, let me know. I just try and preempt that because it's always the first dozen questions I get asked about.

[00:06:37]
What's this, what's that, where did you get this? So, I try and answer that before people have it. Where to file issues, this site itself is open source. So I think if you just click here, this will take you to the issues. So all the lessons are just in here.

[00:06:53]
So if you see spelling errors or even worse like actual errors in stuff I'm teaching, please just open an issue, open a poll request. It's open source software, so feel free to share that. And the reason why I asked you to put the stuff on GitHub as opposed to just messaging me is, if you had this issue, somebody else has this issue.

[00:07:14]
So if it's on GitHub, that means Google can crawl it, and then people can Google it, and they can find the answer to your question that someone else is gonna have later. Okay, so who am I? My name is Brian. Hi, hi Brian. I'm a product manager at Stripe.

[00:07:28]
I've been an engineer for a decade. So I'm not just a business school grad that decided to teach courses. This is stuff I've done a long time in my career. And then eventually I decided I wanted to build the tools that help developers. So which was I became a product manager so I can kind of work on those things.

[00:07:50]
I still write a lot of code in the course of my day job. At the moment, I manage all the dev developer tools for Stripe. So I own the VS Code extension, the CLI, all the Stripe server side STK. So if you're writing stripe and Node JS together, that's the STKs that I get to work on.

[00:08:07]
Before that, I worked on VS Code itself. I worked on Azure, I was the JavaScript lead for Azure. And then I spent a decade as an engineer like Netflix, Reddit, LinkedIn, some other startups. So I've written a lot of React. Yeah, so this tweet here, see if it'll come up.

[00:08:28]
So this is me, Brian. And you can see I wrote this from Salt Lake in July 20th, 2014. This is when I launched my very first React code. It actually made it to the React blog because back then they didn't have very many people that had it in production, right?

[00:08:44]
It was basically us and Khan Academy and Facebook, maybe a couple of others. So it was a deal. And I kinda just fell in love with it after that in the sense of it allowed me to write code that was very explicit, right? I could see the flow of data going through my app, and that was really appealing.

[00:09:04]
Because I could then hand this app over to someone else, and they'd be like, okay, I see where everything is going. And I was coming from a world of Angular JS, version one of Angular JS, where everything was very black magic, right? And it just it came from all sorts of directions.

[00:09:19]
It was very hard to follow where your data and mutations came from, right? So I kind of just stuck with it. I think now there's a lot of great frameworks out there. I still teach React, I still use React, and I still love it. But there's great things out there.

[00:09:36]
SolidJS is awesome, new Angular is awesome, Vue, Svelte. I think they all definitely have their merits as well. So if you wanna get into an argue about frameworks with me, I'm not gonna argue with you. I was like, that is also very cool. So, Yeah, so, I mean I've been using this for nearly a decade, which is basically eternity in web development terms, right?

[00:09:56]
So I write a lot of stuff for Frontend Masters. I think this is like, I can't even remember how many times I've been here. It's probably close to my 30th time here teaching at Frontend Masters. I don't even know. I can't count that high. I live in Seattle.

[00:10:13]
My favorite things to do, I like to travel, I mean, when I can now, right? I have a kid now, he's 10 months old, and he's very cute.
>> [INAUDIBLE]
>> Thank you. In my free time, sometimes I get on a Peloton. I play Dota very poorly. And I drink either scotches and IPAs and coffee.

[00:10:35]
That's me, I mean. Feel free to catch up with me on social media. I left my links on here. I'm the worst at responding to DMs. So if you send me a DM, there's a 90% chance I won't respond because there's just too many and I get overwhelmed, then I close the window.

[00:10:50]
That's just true. And just one vanity request here. If you could start the repo, that would make my day. So you just click this little guy up here. Okay, and then I think there are two repos for this website. So there's a website you're currently on, which is this one I showed you up here which says, Complete Intro to React v8.

[00:11:12]
There is a second repo, which is the example project. So if you click on this one which is citr-v8-project, this is all the various different click stops that we're gonna go through with all the milestones. So you can see here we're gonna do No Frills React and JS tools, and stuff like that.

[00:11:32]
If you fall behind or if you're confused about something that's breaking that you don't expect to break, you can just hop back in here and you can look at the last milestone that we reached. And in each one of these is like a complete version of the class up to that point, right?

[00:11:48]
So you can use a diff tool to see what's different, right? So for example, I use this one called Kaleidoscope, and you can pull up the project here. I have it here. So if I wanna see the difference between v5 or step 5 here, and I can drive 6 here, this will actually show me all the different here.

[00:12:14]
So I can see this file is new, I can click on this one, and then it'll show me all the differences between the various different files. I'm using one kaleidoscope, I think it's like 80 bucks. So it's unfortunately not cheap. But I think Source Tree and some other programs will do this for you.

[00:12:31]
I think you can convince git difftool to do this for you if you really want to try hard enough. So that's why I do this in this kind of fashion so you can compare what's changing over time. And so all the ones that have numbers here at the front, these are all for the Complete Intro to React.

[00:12:51]
All these ones without numbers here down at the bottom, these are gonna be for Intermediate React, which is the second course in the series. Does that make sense for everybody how that's kind of arranged? We're gonna be starting from totally from scratch. So I'll invite you to just go clone this repo.

[00:13:07]
But if you follow along with the class, you shouldn't necessarily have to use this, but it's there if you want it. And just to show you, At the bottom here of every single lesson, or not every single, some of the lessons, you'll see this checkered flag. That's an indication to you that we've reached one of the milestones, right?

[00:13:28]
And it's always at the bottom. It'll always tell you the name of it, and it'll always link you directly to where that folder is in the project. I have this website up here. You can see here I have two computers. Literally this computer, I just have this up.

[00:13:42]
So this is basically all of my course notes, right? So I am always just going through here and making sure I'm hitting all of my talking points. You can basically teach yourself this workshop by just reading my website cuz it's literally what I'm doing here. What is new from v7 in this course?

[00:14:00]
This course goes from v7 used Parcel, this will use Vite, which is a different build system. The React community has kinda moved in another direction. I try and teach things that I believe in, and I also try and teach things that I think are gonna be most useful to you.

[00:14:16]
That's kind of the the Venn diagram of stuff in the course. Personally, I still use Parcel. I love Parcel. It's the best developer experience tool for build systems. V7 uses it, v6, v5. I've used Parcel for a long time. But the React community has moved on. They've moved to Vite.

[00:14:34]
Vite is still awesome. Vite is from the same people that do Vue. Great tool, basically is good. So, that changed. I've just updated some things to work a little bit better. I'm trying to remember exactly. We talked about React Query. That's probably the biggest addition to v8 that was done in v7, which is just a new tool for doing fetching and requests and stuff like that.

[00:15:00]
Basically, everybody uses it now, and it's a great tool. So I use it. So I think I believe in it. We'll talk more about uncontrolled forms than we did in v7. I'm trying to think if I cut anything out. I'm sure I did. And then just in general, this is the version 18 of React as opposed to version seven, this course taught version 17.

[00:15:33]
That was the biggest impetus for me to coming back, was just to cover all the new React 18 stuff. The more advanced features of React 18 we actually covered in Intermediate. So a lot of that doesn't permeate too much into the complete intro. But there are a couple things that will come directly from version 18.