Introduction

[00:00:00]
>> Welcome to Intermediate React version five. This actually all used to be one course, it was just the complete intro to React. And I decided, I guess after v3, I suppose I can math, to split this into two different courses, into The Intro to React where you just build one application.

[00:00:22]
And then Intermediate React where we kind of just go off in various little submodules. This course intentionally builds on Complete Intro to React. If you did not take the Complete Intro to React, that's fine as long as you know React okay. But if you haven't, I'd invite you to take that one first because you're gonna learn a bunch of stuff that will help you in this.

[00:00:46]
Or say that differently, I assume that you know everything that I taught in Complete Intro to React. So if you haven't, please go to React, you can just go to react.holt.courses, and that'll take you to whatever the most recent version of this course is. In our case, it is React v8, so Complete Intro to React v8 and Intermediate React v5.

[00:01:09]
That's the same website for both courses. That's why you'll see Complete Intro to React v8 up here, it actually is also the Intermediate React v5 course as well, okay? Just to give you a little hint on how this site works, if I click on something here like you useReducer here on Hooks in Depths.

[00:01:27]
Hooks in Depths is the name of the section, useReducer would be the name of the lesson. You'll look up here and you'll see that I have that in the top right, so you can kind of always keep track of where I am in the course. And by all means, please always click on the Watch on Frontend Masters if you need to get back to the videos as well.

[00:01:45]
Okay, Sections two through seven are all intro stuff, so feel free to review those if you need those. And just to give you a little introduction to who I am, my name is Brian Holt, I am a product manager at Stripe, I manage all the dev tools. That's the server side, SD, it's the Stripe CLI, the Stripe Shell.

[00:02:10]
So if you like stripe.sh, it's like an in browser shell that I worked on. That was pretty cool. I've been doing that for about 18 months now. Before that, I worked at Microsoft for four years, I worked on VS Code, I worked on Azure. And then before that, I was a JavaScript developer and Node developer for like a decade.

[00:02:29]
I launched my first React code in like 2014 when I was at Reddit. I launched Reddit's first React code, so that's one of my claims to fame. And I've been writing React ever since. So I have a decent amount of experience and history with React. And I've taught, at this point, thousands of people how to write React all over the world.

[00:02:50]
So all frameworks have their merits, right? I'm not gonna be the kind of person who's gonna sit and argue with you that React is better than any of the others, they're all different tools for different jobs. It's like you come to me as like, I demand that we only use hammers in this project when we're talking about screwing something in or something like that.

[00:03:07]
To me, it just doesn't make any sense. So, who is this course for? Hopefully, it's for you. This course is going to assume that you know JavaScript, so if you don't, there's plenty of awesome courses on Frontend Masters. And I'm gonna assume that you have basically taken through complete intro of React.

[00:03:27]
So you're gonna know the basic component life cycle, what hooks are, context portals, refs, all those kind of things. If you don't, please go take Complete Intro to React first, come back to now. The setup for this, please make sure you have Node JS installed. I'm gonna say 14 is probably the bare minimum here, you might be able to get away with 12, but maybe just don't get to 16.

[00:03:55]
I'll be on 16.18, I believe and probably by the time that you're watching this, I imagine 18 will be the LTS of node, 18 would be perfect. You do not have to use Visual Studio Code, however, I will suggest it. I do like VS Code, I used to work on it, so I'm a bit biased, and I will show you some tips and tricks about VS Code as we go along.

[00:04:20]
I use Mono Lisa as my font, be sure to enable font ligatures if you wanna see all the combined glyphs just to show you what that looks like. So if I have like a two, let's see. So this right here is a font ligature where it's combining two lists together, it's an equal signs and an angle bracket.

[00:04:44]
A ligature is the thing that combines that together. So, I have those enabled, so you'll see arrows like this, you'll see double equal signs like that, you'll see triple equal signs like that, there's a bunch of them, right? So if you want that, go ahead and follow the directions.

[00:04:59]
I have that link here in the welcome notes for you to do that. Mono Lisa is not free but Cascadia Code is, so if you want a font that does it, grab that, Fira Code would be another free one. I use Dark+ as my code theme, for my terminal, I either use VS Codes built-in terminal or the macOS built-in terminal.

[00:05:22]
And then I'm using VS Code icons, and then I did get a question about what my prompt is for my terminal. So if I look at this, let's see if I go to personal/8react or something like that, you can see that it has. I'm on the main branch, I'm on Node 18.

[00:05:42]
It'll tell you what your Docker version is and bunch of stuff like that, that is called spaceship prompt and it's for ZSH, just google it, I'm positive it'll be the first thing that comes up. Where to File Issues, this is itself a open source website. All the lessons are open source and so if I have spelling mistakes or content mistakes, please just open a PR, I will merge those ins, really appreciate that.

[00:06:11]
This website is open and free forever, so if you wanna send it to your co-workers, or if you wanna use it for your own materials or things like that, please by all means do. All the code is licensed under Apache 2.0, so you can literally copy and paste my code into your commercial project.

[00:06:30]
I encourage you to do that. Then all the content can be shared as long as it's being shared freely. Anything else? I'm from Seattle, I live in Seattle, lived there for some years, I'm originally from Salt Lake City. In my free time, I will travel a lot, I love to travel.

[00:06:53]
I hang out with my wife and son, get on my Peloton and pretend that I like riding bikes, played Dota very poorly or drink either Scotches and IPAs and coffee. I put all my links down here to my social medias, feel free to catch up with me there.

[00:07:09]
I will tell you that I am the worst at responding to DMs, so have patience with me. And then for my own personal vanity, please star this repo, please give me dopamine. I'm kidding, you can do it if you want to, but I find it helps if I ask nicely.

[00:07:29]
There are two repos for this website. One of them here is the website you're currently on, so that's this one, the Complete Intro to React. The other one here is the example project. For this course, I need you to clone this one, because everything is going to be building off of a project, right?

[00:07:45]
So we have this one here, 14 context. Basically, we're gonna be taking the last finished project from the Complete Intro to React, and then we're gonna be building on top of that. So you're gonna be finding yourself copying and pasting that quite a bit. And then all of these down here at the bottom, code splitting, redux, server side rendering, all that kind of stuff, that's all the various different completed projects if you wanna go see my code.

[00:08:09]
So just to show you, I use this program called Kaleidoscope that you can use anything that compares two directories to each other, remind me later. So if I wanted to see what's different about a particular project, I can come in here to project. And if I have steps here, so if I drag context into here as one, and then I drag something like, let's say, transitions in here, right?

[00:08:38]
I can then see what's changed, right, so I can see, if I look at SearchParams.jsx, I can see all the things that I've added, and subtracted, and things like that. So that's useful for me, at least me personally, to see what's changing between the various different projects. So again, please go.

[00:08:54]
The name of that repo is citr, which is a Complete Intro to React v8 Project. Yeah, one last thing here. These modules do not build on each other. So if you are going through this and you're like, I profoundly do not wanna learn about tailwind, right? That's just not something you're interested in going into, feel free to totally skip that section.

[00:09:16]
Because every module here is more or less self-contained, and they do not build on each other. So a good project for you to go do at the end is like if you're really interested in Tailwind as well as TypeScript, go combine those things together because I don't do that for you.

[00:09:31]
So it might be a good way for you to kind of understand how the pieces fit together.