Intermediate React, v3 Introduction

Transcript from the "Introduction" Lesson

[00:00:00]
>> Welcome to Intermediate React V3. I'm really excited to talk a bit more about kinda the ecosystem around React. So let's go ahead and jump into the course website if you would bit.ly/.react-6. This is the same website that many of you were using for the Complete Intro to React Version 6.

[00:00:19] If you go scroll partway down through here, you'll see the Intermediate React v3. And this is where Intermediate React picks up. So go ahead and click on that welcome. We start chatting about the structure of this course. So, my name is Brian Holt. And I'm really excited to be here.

[00:00:39] If you haven't, seen other one of my courses, I have an intro page here. So if you click that, that'll take you back to the intro page here, where I kinda talk a little bit about myself, and why I teach this course and some of the things. But, who is this course for?

[00:00:53] This course is hopefully for you. Right? I would like you to learn more about React and for the ecosystem. It does require that you know some JavaScript, probably that you're a little familiar with the command line, you'll have to know a lot, you can readily follow along with me.

[00:01:08] And then hopefully you've taken the complete intro to React V6, or at least you're very familiar with React, because this part of the course is not gonna teach you the underlying basic React parts. It's just gonna teach you kinda the more ecosystem things around React that you should know.

[00:01:25] The Complete Intro to React goes over all the core library, the core API's, all those kinda things. So if that's not familiar to yet, you should hop back over there. Take that one first and then come back to this one. This one's gonna go over more like, how do I do CSS?

[00:01:38] How do I do testing? We go into hooks in depth and a bunch of other really cool stuff. So who am I? I work at Microsoft. I'm a program manager on Visual Studio code, as well as the JavaScript developer experience on Azure. I've worked at Netflix, I've worked at Reddit, I've worked at LinkedIn, and a couple other startups.

[00:02:03] And I've been writing React for a good seven plus years now. So suffice to say I'm pretty familiar with the library. And I crafted this course because I wanted you to have kinda exposures to kinda every different piece of the ecosystem, so you can make informed choices. So for example, we're gonna talk about Tailwind CSS and I don't necessarily want to encourage you that you must choose Tailwind CSS, but I want you to understand what it is.

[00:02:28] So you can make a trade off about like, should I use Tailwind? Should I use emotion? Should I use styled components? Things like that. I wanna kinda have like an entry point into every one of these pieces of the ecosystem, cuz I think that allows you to make informed decisions about what you wanna do when you're writing your application.

[00:02:47] This course has been tested on Mac OS and Windows 10. So it should just work out of the box. By extension working on Mac, I assume it works on Linux, I haven't had any problems that way. Some things that you will definitely need to do before you get started.

[00:03:01] You need to install Node.js, please be on version 12 or above. There's some setup instructions here in to the welcome introduction part. I'm gonna encourage you to install Visual Studio Code. Obviously, I work on Visual Studio Code, so that's a conflict of interest there. But what I will say is that I'm gonna teach you some cool short cuts and extensions and stuff like that with Visual Studio Code along the way, specifically for React.

[00:03:28] And just to let people know I use dank models I font. You can enable ligatures if you go here, I have this little link there for you, which is like if I have like an equal signs and angle bracket will combine them into an arrow. Dank Mono is not free whereas Microsoft Cascadia Code is also really great fun.

[00:03:47] I use dark plus for my theme on Visual Studio Code. I do like Sarah Draner's Night Owl. It's another really good one. I just use the Mac OS is built in terminal, works with the great, it's nice and fast. I use the SH with spaceship as my prompt.

[00:04:02] On Windows, I really like Windows terminal. And then my VS Code Icons come from vscode-icons, which is an extension that you can just download through VS code. If you have any issues like spelling mistakes or anything like that with this course website, you can just go file an issue or open a PR On the repo, that's always very much appreciated.

[00:04:22] In fact, I see some people have already opened up which is really great. Thank you. And yeah, that's me. Thanks to friend of masters for inviting me back. I'm always happy to be back here. You can catch up with me on social media. I left my links on there.

[00:04:40] Just so you know, I'm terrible at responding to direct messages. So, sorry. [LAUGH] And then let's hop back over here to the Intermediate React V3 here. Click on the welcome, just to let you know how this website works. Anytime that you're watching the video and you can see this, you can see the section that we're on which is Intermediate React V3.

[00:05:03] And then welcome, right, so you can see here if I go back, I'm on Intermediate React V3 and welcome. That's just you can kinda orient yourself of where I am on the site at any given time just by looking at the video. Okay, let's talk a little bit about the structure of how this course is gonna work.

[00:05:22] Every section here, so hooks in depth Tailwind CSS. These are all individual modules. So, if you don't wanna learn about Tailwind, for example, you can just skip ahead and go straight to Code Splitting. They don't build on each other. This is different from the Complete Intro to React where every section builds on each other, and you have to kinda take them an order.

[00:05:40] This one, they all kinda start from a fresh with a new repo that we keep going with. So that's the first thing I wanna say. All the project files are here in the Complete Intro to React V6 projects repo. So if I click on that, you can see all of the steps here.

[00:06:02] So you can see this code splitting redux server side rendering. These are all the intermediate ones. All of these ones that begin with numbers, those all come from the complete intro, so we won't be talking about it in this particular course. But in particular, what's interesting for you is every section is gonna start new from 12 portals and rests from the last part, the finished part of the Complete Intro to React.

[00:06:26] So basically, what we're gonna do is every time we get into a new section, you're gonna copy all the files in. You're gonna run npm install again, and we're gonna start with a brand new repo.