Complete Intro to React, v7 Introduction

Transcript from the "Introduction" Lesson

[00:00:00]
>> Hello, and welcome to the complete intro to react V7. I'm Brian Holt. I'm really excited to be here talking to you a little bit about React. It's been a while since I've been teaching about React. So, this is my favorite course to teach. And today we're gonna be talking about how the React ecosystem has changed and moved over the past year or so.

[00:00:19] So, what I'm looking at in front of you is the course website, you can get to this course website by going to bit.li/react V7. Make sure that it's all lowercase. React v7. Now take it here you can also get there through my GitHub on BT hold on GitHub.

[00:00:37] You can see here I literally have two computers, right? This website is what I have up on this computer so that's what I'm reading through I'm teaching this all to. So, one you can read while I'm reading. If you fall behind and go back and kind of reread my points and my statements and all that kind of things.

[00:00:53] You can copy and paste some like the longer pieces of code you don't feel like editing yourself I will, I know I will anyway. Let me explain to you a little bit how it works, so you can see down here this is all my course websites stuff. One thing I did want to address immediately out of the gate before we get too much further into this, is this course is teaching React version 17 not 18.

[00:01:18] As of writing of this course, version 18 is still in release candidate. And so, it's not quite stable and I'm trying to teach you something that you can use today at your job. You don't wanna use alpha or beta software particularly if you're going out to production for your large scale application.

[00:01:35] So, this still uses the most stable version of React which is version 17. To be honest with you, there will be some changes between version 17 and version 18. And we'll get into that in the course. But all the concepts that you're learning now are great for going forward.

[00:01:49] You do not have to take version 6 or version 5 version for this course. This is just the seventh revision of this course. That's the most up to date of all the different things. If you wanna learn legacy versions of this software, you can go back and look at the complete insure React version 6, 5, 4,,3, 2, 1.

[00:02:08] They all use different, build processes and routers and things like that. But, if you're just here to learn React, start here, you're in the right place. And we can get started and get going. So, let's talk about, why I made this course and the style that I made it?

[00:02:21] So, when I was learning React 2014 I think is the first React I shipped to production. That's supposed to be eight years. That's a long time to be writing React and that's eternity in the front and landscape where the shifting sands are always moving around, right? When I was learning React, I felt like all the tutorials were started on step 14, right?

[00:02:48] It's like have you ever seen the the mean drawn owl, is like the first line draw circle and step two is draw the rest of the owl, right? That's kinda what I felt like the React tutorials were like. And so, I wanted to know what steps 1 through 13 are.

[00:02:59] One, I'm like an infrastructure person kind of by trade, and so I'd like the build tools and the build processes. And I guess I'm a glutton for punishment when it comes to those kind of things. But, yeah, that's why I built this tutorial in the way that I do.

[00:03:14] We start with a script tag and a browser and that's it, with no build process. And then we kind of build up piece by piece until eventually we arrive at something where you feel you understand your stack from top to bottom. Yeah, and I just in general, someone that's done infrastructure for a long time.

[00:03:30] If you are working with an abstraction that you don't understand what it's doing, I think you learn to resent the abstraction, right? So, for example, who here has problems with Webpack? Everyone has problems with Webpack. Your hands not up cuz you haven't worked with Webpack, right? If you had to like manually and go and do everything that Webpack does for you, then be like Webpack is the best thing that has ever happened to me, right?

[00:03:51] And that's how I felt when Webpack came out, because I was struggling with things with like Browserify and stuff like that back in the day. And so, when Webpack came along and did all the things I needed to do. And that's kind of how I feel about React and all these build tools that I'm about to show you is that, if you understand what it's doing for you, then you be like gonna be like, I love this thing, it's great.

[00:04:08] Even though it's annoys the hell of me and I have to like fight it, it's better than fighting what's underneath it. So, who is this course for? This course is for you, I hope [LAUGH]. To be more specific there, you need to know JavaScript. And HTML and Python CSS, you could probably get away with like mental you should know CSS most of you shouldn't.

[00:04:29] But you don't have to know much CSS for this class. In other words, I wrote the CSS for you and I am not saying that it is good, but it is there. It does work. If you're not comfortable with JavaScript, this course is gonna be pretty difficult. Luckily front of masters has a couple of really good intros to JavaScript.

[00:04:47] He wants the boo camp, which I helped to teach with Jim Cramer, which is awesome. And the other one is the intro to web dev, v2, we're about to do v3, which did teach that one as well. So, I will take those first if you're not comfortable with that.

[00:05:01] This class does share much of the structure with V5 and V6. It's the same kind of narrative, it's working on the same app. I was really happy with that one. So, I kept going with it and just kind of refined it. If you wanna work with like previous versions of things, like maybe the old React router or Reach router, the one previous to that.

[00:05:19] You can look at the V5 and V6 and you can kind of compare and contrast how the React ecosystem has grown over time. Talk about what you needed to set up on your laptop. So, I'm gonna be doing this obviously on Mac OS, I have tested this on Windows so it does work.

[00:05:36] And I don't keep Linux at home that's just for the office. I'm just going for punishment at work not at home. But everything, you just follow the Mac OS instructions everything should work perfectly well. It gigs a ram on your computer would be ideal. You can definitely get away with four.

[00:05:54] You can probably even get away with less, you just have to wait a bit longer. Please make sure you have Node js already installed. I'm not gonna be covering any Node.js stuff. But we have to use NPM and some of those tools. Parcell relies on it, those kinds of things.

[00:06:10] I'm gonna say you need at least 12, I don't think you get away with 10. I'll be using 16, which is the LTS at the moment. But 17 I actually tried this was 17. I wrote most of course using node 17. So, all that stuff should work. Anyway, just be above 12, probably be on 16.

[00:06:29] That's my pitch for you. There's setup instructions here if you need instructions for that. I will be using Visual Studio code. I used to be on the Visual Studio Code team, so I'm very biased as to which editor is far superior to the other ones. Anyway, I will be showing you some tips and tricks for VS code.

[00:06:47] I imagined much of it will work and other editors but maybe try VS code cuz I will show you some really cool things with that. My font is Mona Lisa. It's not free, but if you see me how using coligatures, which is combined symbols that comes from Mona Lisa.

[00:07:07] You can also use Dank mono, is another cool font. Or Microsoft's Cascadia code is free and it has all these ligatures in it as well. So, if you want to have a cool font, I would suggest that one. By the way, the reason why I'm covering all these things is cuz if I don't cover these things, I get a billion questions about it later.

[00:07:27] So, I'm just very upfront, this is how I set up my coding environment. I just use start plus the default VS code theme, I haven't found one that I like better. So, I just keep using it. When I do switch I use Sarah Dresdner's Night Owl. I just use the Mac OS built-in terminal, but ITM2 is great.

[00:07:47] All Windows I use the Windows Terminal. And then I use the vs.code-icons extension, which gives all the cool icons inside of my VS code editor. I think that should cover everything interesting about my coding In setup. I usually keep it pretty vanilla because I switch computers a lot and I hate setting things up.

[00:08:07] File issues, again, everything on here is open source. If you go to the complete intro to react V7, this is the course website. You can see all the lessons are in here. This is all built with Next.js was actually built using React. Yeah, that's all in here if you have issues or pull requests please make them here.

[00:08:26] I do get a lot of people that message me on Twitter and LinkedIn and such I'm terrible at responding to messages just so you know. So, it's not that I'm ignoring you it's that I'm ignoring everybody. Who am I? My name is Brian. Probably got that by now.

[00:08:41] Maybe didn't, if not here I am. I work at stripe now. I am a product manager on developer tools and developer experience. So, I work exclusively on tools that developers will use, which means I end up writing a lot of code on the day to day. I own the stripe VS code extension, the stripe CLI, the stripe server side SDK.

[00:09:01] So, if you're writing like no JS with the stripe SDK is that's the stuff that I work on. Just like other kinds of developer tools. Before that I worked on VS code and Azure at Microsoft. And before that I was a JavaScript developer for a decade. So, I did that for a long time before switched into pm developer things.

[00:09:22] And I've worked at companies like LinkedIn, Netflix, Reddit. I feel like if you go back from my intro to React courses, you can kind of see me like wearing different hoodies or having different stickers on my laptop from other companies that I worked. It's like my resume. I should just send people that instead of my resume.

[00:09:35] It's a great idea. I wrote a lot of React at basically all of these companies. But I launched red its first React, that's one of my claims to fame. Actually, I think I have the tweet up here. So, this is from July 28 2014, from Salt Lake City, which is where I used to live.

[00:09:58] That we should read first production code and React js. And there's like a bunch of funny people in here. Like Matt said rescue this guy runs React rally. There's a bunch of people that are now big names in the React community. That's really cool I've heard of this React thing.

[00:10:13] So, that's my claim to fame. I loved it. Well, let me rephrase that. At first I hated it, which is how it's really good because you don't like it at first and then you learn it's wait, this is actually great. And I'll show you why I didn't like it at first.

[00:10:29] And then when I kinda get over that initial hump of this looks gross I was, okay, this is actually amazing. Cool. So, I've been using it for yeah, basically eight years now. And I'm gonna show you why I like React still to this day. And I've worked in a bunch of other frameworks like, I had an Angular js app.

[00:10:51] Like Angular pre one app in production until like two weeks ago. And I wrote that at Reddit as well. So, it was in production for almost a decade. So, I wrote a lot of angular as well at LinkedIn I wrote a lot of Ember. So, I have worked with a lot of these frameworks and this is still my go to the other ones are great.

[00:11:11] And then they have great reasons to choose them. And I'm definitely not going to popoo them. I'll just tell you the ones that I chose. So, I live in Seattle now, and quite like it. I've come in Minneapolis enough now that I feel like I live here. When I'm not playing games or working out, or any things like that, to hang out with my wife and I just had a kid and he's very cute.

[00:11:33] And I have a cute dog and I like to exercise and I play Over watch and Dota really poorly. And I drink a lot of scotch, and IPAs, and coffee. As you can see here, I think this is cup of coffee number three for me. That's me. If you didn't know from my face that's also me on the website.

[00:11:54] Among the socials, please find me there. If you start this repo then that strokes my ego I'd be very happy about that. But it also like makes it like one of the rising ones, which I means more people can find them. Which I think is great. So, let's talk about just one kind of housekeeping item here.

[00:12:14] There are two Repos for this class. There's the website one, which one has one already showed you if there's mistakes on the course website, go here to fix those, right? And then I have here of the example projects, which you can see is complete intro to React V7 project.

[00:12:31] And you can see here, it's folder by folder of step by step of what we're about to do. This is for both the intro and intermediate. You can see it goes 1, 2, 3, 4, 5. And you'll see at the bottom of my course notes, hey, we've hit this checkpoint and it'll have the Repo in that state, right?

[00:12:52] So, the first thing we're gonna do is, we're gonna do this one, right? And then, after that we'll do this one. But each one of us like the standalone project of that particular step that we're in. So, a couple of things here. One, if you like fall behind just go grab it off at the course website, crown it and start from there.

[00:13:11] There is no cheating in here, right? This is all just about learning. So, if you're succeeding in learning then you're doing the right thing. And if you're not succeeding in learning, then you're not doing the right thing, right? So, you just gotta have to optimize for that. You'll have to learn MPM and style every time you switch folders, right?

[00:13:26] But I'll just say go crown that Repo right now. And then, if when you need it, it's there. So, if there's mistake in the code here, you'll have to come fix it here. Or just what's easy to probably just to leave an issue and then I can go and fix cuz I have to fix it multiple places.

[00:13:43]
>> Do you prefer Webpack or Parcel?
>> That is a interesting question, do I prefer Parcel or Webpack? For teaching hands down, no question Parcel is like God's gift to teachers, right? Because we don't have to configure anything and it just works. If I'm gonna make a super large scale production app that I'm gonna maintain for five years I might start with parcel until I needed more configuration than it offers.

[00:14:14] And at that point I'd probably move to something like ES build. Or Vito VT or whatever you want to call it, or Webpack. I guess it just depends on the nice thing about Webpack is it has such a mature ecosystem that. If there's something you need to do with Webpack, I guarantee you there's four plugins out there.

[00:14:32] And hopefully at least two of them work. I have a lot of respect for all the build tools because it's such a hard problem to solve. And they all have their uses. So, down here and you can click Next to go to the next section. Or you can also just click here and go back to the beginning.

[00:14:47] So, the one thing I'll point out for the course website here, I intentionally put up here. This is the lesson that we're on, and this is the section that we're on. So, if you get lost and you don't know where I am in the course, you can just look up here.

[00:15:00] And you can see I was on No Frills React, Pure React. So, that's up there. So, you can make sure you can always orient yourself to where I am in the course.