Intermediate React, v4 Introduction

[00:00:00]
>> Welcome to Intermediate react version 4. What I would like you to do right now is I want you to go get on bit.li/reactv7. Make sure that's all lowercase, no spaces, and that should take you to this page, there's just a short link, so you don't have to type all of this business out.

[00:00:23] The intro to react and intermediate react website of the same one, so you can see the first part of this is all the intro part, and then down here section 8 is where intermediate react V4 starts. So the way that this course works, as opposed to the way that intro worked.

[00:00:42] Intro worked, we built one entire projects, beginning to end, every section built on the previous one. This one works a little bit differently because with intermediate react, I want you to be able to kind of pick and choose so the concepts you wanna learn so you don't have to go learn things that you're not interested in and you can just kind of stick to the ones that you want.

[00:01:00] So each one of these sections is in its own silo, right? So what we're actually gonna do is we're gonna take the project that we built in complete intro to react V7 and then we're gonna add additional features just to it. So if you've taken intro to react V7, you'll already be up to speed, you'll already understand all of the concepts that we went over and the code repo.

[00:01:20] For those of you who haven't, I'm gonna give you like a little brief tour of what happens in that code. You do not need to take previous versions of this course, right? So you don't need to take v3 or v2 or v1 of intermediate react. This is just a like a revision, right?

[00:01:35] So we're just keeping everything up super up to date. So that when you watch this course, it's the most up to date react information you can get. So we tend to redo this every 6 months to a year. Yeah, that's it, it's pretty close. And we'll definitely be doing version 8 here fairly soon because react 18 is about to come out and that's gonna introduce a bunch of new intermediate advanced concepts.

[00:01:57] So the reason that we're not doing react version 18 right now is that it's still in release candidate. And I just didn't wanna teach you anything unstable, right? They're still changing some things. They still have like reserve the right to change some things and some paradigms. And it's also good to like let those libraries kind of sit out in production for a little bit so we can kind of figure out what patterns work, what patterns don't work.

[00:02:19] So that by the time that I can teach you these things that you're actually getting like settled science instead of, Brian thinks this seems a good idea, good luck. [LAUGH] I still do that but at least I'll tell you when I do that to you. Okay, so who is this course for?

[00:02:34] Hopefully it's for you. The other thing I'm wanna ask that you know is JavaScript, HTML. We'll do a little bit of CSS cuz we'll talk about it and tailwind, but it'll be pretty minimal. We've mostly focused on it like the JavaScript side of tailwind. So in other words, some CSS familiarity will be helpful to you.

[00:02:56] And then if you're taking intermediate now I've asked that you at least take an intro to react V7, or are already know react fairly well. If this is your first exposure to react, please go take complete intro to react V7 first and then come back here and we'll talk about the intermediate concepts.

[00:03:15] The setup here, I've tested everything on Mac OS and Windows 10. If you're on Windows 11, I'm sorry I'm not testing that [LAUGH] said as a former person that worked at Microsoft. Linux everything should just work just fine if you use the Mac OS instructions, I don't think anything has to change.

[00:03:34] Please install no-js, please make sure you're on a node version, let's say more recent than 12, preferably 14 or above, I think 12 would work but we found out yesterday that 8 definitely doesn't work so don't do 8. In general, just pretend it didn't happen. So I have some setup instructions here for you if you need to go and set up node, you do not have to use Visual Studio code.

[00:04:01] I used to be a pm on Visual Studio code so I will be using it and you'll get some cool tips and tricks and extensions to use. I added some new ones this time. So there's some really cool new Visual Studio code stuff in here that I'll be teaching you.

[00:04:17] So people always ask me what my coding setup is. So I just run through that really quick so people don't tweet me Brian, tell me about all of your editor settings. I'm using Mona Lisa. It's a cool font. It is not free. But, people deserve to be paid for the work, so I'm fine with that.

[00:04:33] And I have cold ligatures, enabled which allows you to have combined glyphs right so if you put like double equals make like a log equal sign if you put triple equals that make like a triple equal sign, it'll do things like that and I'll show you that when I get in my code editor.

[00:04:48] You just needed like a certain kind of font that can do that, Mona Lisa can do it, Dank Mono can do that, FIRA code or actually really quite like Cascadia code, Cascadia code is put up by Microsoft, it is free and it has code ligatures in it so go ahead and check that one out.

[00:05:04] For my team, I actually just use dark plus which is the default Vs code theme, because I have one that I like better. For the terminal, I actually just use MAC's built in terminal. It's fast, it's really fast actually. But I've used in the past and it's great.

[00:05:21] And then on Windows, I do like Windows terminal. And then all the cool icons comes from an extension called VS code icons. Okay, so where to file issues, you file issues on the course website. If you just click here, it allows you to open issues or open pull requests.

[00:05:43] You can see it actually during while teaching this I've already close to two issues, and I think close to pull requests, so I try and stay on top of these. So if you find like spelling mistakes or technical mistakes or you just wanna tell me that I'm done, go ahead and do that in the issues.

[00:05:58] Or you can tweet to me, that's fine too, particularly if you need help. The best places to go is the issues because if you're having an issue, chances is someone else is having the issue and if you do it, you and I do it over a DMs, that I have to solve that problem for everyone, right?

[00:06:13] Whereas if we do it on like issues, then anyone can go to the GitHub repo and find the problems and solve them from there. So that's why I like doing it all in the issues. Okay, who am I? I'm Brian. I work at stripe. I am the product manager of developer tools.

[00:06:33] So I work on like the VS code extension, the stripe CLI, the stripe server side SDK is the React Native SDK, test and sandboxes, all sorts of, basically if you're writing using tools to build stripe integration, that's the stuff that I manage it at stripe. Before that I worked on Azure and I worked on visual studio code as a PM and then before that I was a JavaScript developer for a decade.

[00:06:58] And I wrote a lot of React at places like Netflix and Reddit. I launched Reddit's first react code. That's one of my claims to fame. I did that in 2014. So I've been writing react for quite a few years, I was a early adopter of React and I'm happy that I made the right call there, [LAUGH] I wrote a lot of Angular before that Angular 1 and I also wrote a decent amount of ember when I worked at LinkedIn.

[00:07:29] So I like teaching in front of Masters. I'm here fairly frequently. I live in Seattle. I like to hang out with my wife and I actually just had a kid in December. He's very cute. And I also still have my adorable little jerk dog Luna, who I still talk about in every course that I teach.

[00:07:50] When I'm not doing technical stuff or hanging out with my family, I like exercising, I played data and overwatch very poorly. And I drink a lot of Scotch cuz I like Scotch. Feel free to catch up with me on socials. I'm terrible at answering DMs. I disclaim that a lot because people get sad that I don't answer all the DMs.

[00:08:10] But feel free to tweet me, I'm pretty good at answering public tweets. And then yeah, so there's two repos for this particular website or for this particular class. There's the website 1. So if you go here, this is where actually all of the lessons are. You can see here, they're all just organized here into markdown files.

[00:08:31] Right, and it's all here. So if you find something to fix, that's where you wanna go do it. And then what you need to go clone right now is the example projects. So this is step by step all of the various different states of the repo that we're gonna be using, right?

[00:08:51] So for example, you can see here that there's a Redux 1, right, and this is gonna be the state of the world after we do the Redux portion of the site. So it's good for you to be able to see what's changing what I'm writing up here? So if you fall behind, you can go in here, you can click on, what his results look like right now and you can see that here, right?

[00:09:14] Specifically, the ones you need to be concerned with is, 1 through 12, here's what we built in complete intro to react V7. For all of our various different sections, we're gonna take this step 12 1, and we're just going to reclone it and reuse it again, and we're gonna start fresh with that particular project every single time.

[00:09:34] So just get used to copying and reinstalling the dependencies for this particular folder right there. And I'll show you what I mean once we get into it. Okay, if you have issues with the content, please just either fix them and open a PR or leave a issue on the course website.

[00:09:53] So check that one more than the project 1. And then just kind of a overview of the website here that you're looking at in front of you. These are literally my courses. You can see that I have two computers here. On this computer, I'm not just on Reddit or something like that I am, but it's fine, you don't have to worry about that.

[00:10:12] But I also have the course website up here, and I'm just reading off my notes here. And I open source all those notes so that you can use them, you can share them, you can refer to them later, you can send them to your co workers. It's meant to be a kind of a companion site here, so you can see what I'm seeing here.

[00:10:28]
>> What do you think separates a good react engineer from a great react engineer?
>> It's a good question. What separates a good react engineer from a great react engineer? I don't know if I can think of anything that's gonna be particularly tailored to react. In general, the best engineers that I've worked with communicate super well.

[00:10:55] And when I say that they, like let's say, I come into your office and I say, hey, I need you to build this new search functionality that allows users to checkout faster or something like that, right? A good engineer is going to ask a lot of follow up questions so that they can get the product requirements down to like, okay, we need to build this and this and this and so they understand the problem domain really, really well before they start working on something.

[00:11:23] That has been historically that the engineers I've seen that perform the best at can take something that's really ambiguous and distill it down to step by step steps that they can then go out and build, right? It's a really junior engineer kind of move to go in and just say, okay, I'll build it.

[00:11:42] And then they just go build something and it's not what was actually meant to be built. So those kinds of like human interaction personal skills like, that's what makes the best engineers. I'll say that when I worked at Netflix which is probably the hardest front end work that I ever had to do, it was the most advanced, was the most performance sensitive.

[00:12:04] 95% of my job there could have been done by literally any junior engineer anywhere, right? It was just mostly marshaling JavaScript and CSS around, which most of us can do fairly well, right? It was that last 5% that was really difficult. Scaling problems or problems that you run into that you can't just Google and say, how do I do x, right?

[00:12:23] And that was what the senior part of my senior engineering title kind of came in is like, okay, I've seen this before at Reddit, this happened we did these things. This didn't work and this didn't happen. So that experience helps a lot as well. Trying to think if there's anything else that I would really say that sets apart a great engineer.

[00:12:46] It really comes down to communication and experience are really the two things that are gonna set people apart as they move forward in their career. The most effective engineers like know how to work well with others and like be a force multiplier for their entire team. Like we've heard of the mythical 10x engineer helps other people be twice as productive, right?

[00:13:07] If they can do that for five people then they are a 10x engineer.