Complete Intro to React, v7 Vanilla React Setup

Transcript from the "Vanilla React Setup" Lesson

[00:00:00]
>> Let's start writing some React. I want you to create a new directory wherever you feel like creating it. You can create it on your desktop if you want to. We're gonna be writing a pet adoption app, cuz I like animals as you probably guessed that by now.

[00:00:20] And if you're gonna be looking at something all day, it might as well be puppies. I think that's good solid science there. The name of it, it's gonna be adopt me, cuz I'm creative. And then we're just gonna open this in VS Code. So I'm in VS Code here, and I am going to create a new directory here called src.

[00:00:44] That's not a React thing. That's just what I always call where I keep all of my code, I think that's a habit from probably high school. Anyway, there's no reason you have to do it that way, it's just the way that I did it. Also you get a really cool icon with it if you use the VS Code's icons, and I like the cool icons.

[00:01:02] Icon driven development, that's what [LAUGH] this is. So in your src directory inside of your base project here, we're gonna create another file and we're gonna call it index.html, okay? So inside the source directory, we made a file, it's called index.html. Another fun little a trick for VS Code here, you can say html:5.

[00:01:29] And then you can hit that and it'll just scaffold out an entire HTML document for you. This is called Emmet. I'm not gonna be really using Emmet very much in this course, but you can look it up if you want to, E-M-M-E-T, and it's just built into VS Code.

[00:01:45] Okay, we're gonna call this Adopt Me, you can leave all the meta stuff there. It's always good stuff to have. We're gonna make a link here. And it's gonna be rel equals stylesheet cuz we're gonna put some css in here, and the href is going to be equal to ./style.css, okay?

[00:02:12] Here in our body, we're gonna have a div. And I'm gonna change this to be two spaces. Definitely, I know someone's gonna be like, does Brian prefer tabs or spaces? I just use spaces, I don't have an opinion on it, and I definitely don't wanna argue with you about it.

[00:02:35] My only thing that's less favorite than talking about is arguing about this stuff, so, anyway div id= "root". Okay, and we're gonna put not rendered here, so that if we ever see not rendered, we'll know that our app didn't successfully render, right? But eventually, our React app is going to replace what's inside of this root.

[00:03:01] Okay, and then we're gonna put two URLs in here or two script tags in here that are going to be loading React off the CDN. If you don't wanna copy this line for line with me, you can just copy from the course notes. That's probably what I would do if I were you.

[00:03:17] So I'm gonna script src="https://unpkg.com/react@17.0.2/umd/react.development.js". Dev, and you have to spell it correctly, you have to know how to spell it correctly and then you have to do it, development.js. Okay, we're gonna put the same thing underneath it but it's gonna be react-dom, and then again here react-dom. So you have to change dom here twice, right, once there and once there.

[00:04:02] It does not matter what order they go in. So unpkg basically allows you to load things in from NPM via a CDN. That's all its entire purpose is. This is the package name, that's the version number, and then this is just the file system, okay? And then underneath that, we're gonna put a script tag.

[00:04:22] We're gonna write code here directly in our HTML document, because we're going to do the most bare bones HelloWorld React application that you possibly can, okay? So I saved that. I'm gonna just go open this file in my browser. Here in Firefox, you can just say Cmd+O or Ctrl+O depending on what operating system you're in, or you can just say File > Open File here.

[00:04:46] And I'm going to go find it. I have it on my Desktop, adopt me > source > index.html, and I'm just gonna open it in my browser. So you can see here I have not rendered with a very beautiful background. But as you can see here, if I open my dev tools, You can see that React is now defined.

[00:05:08] And ReactDOM is now defined. And my favorite thing that's on React is these secret things called SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED. [LAUGH] That's been there for a while. I've used it and I haven't gotten fired, so, It's just like stuff that they allow you to do, performance checks and you can check internals of how it's working.

[00:05:35] I'm pretty sure that that's for a Facebook thing anyway. First question that I know is at least on some people's mind is Brian, why are you not using React 18, why are we using React 17? As of filming, React 18 is not officially out yet. It's still in release candidate.

[00:05:51] And I have a big thing that I do not teach Alpha software. I did it once, it hugely bit me in the butt. I'm never doing it again. So and the other thing and the point of this course is that if you're learning React right now, you probably wanna write React code right now.

[00:06:05] And the React code that you wanna write right now is the one that's out, right? So if you go work at a company or you already work at a company that's deploying React, they're writing React 17. So this is gonna be useful for you today. As soon as React 18 comes out, we'll come back, we'll do React, intro React V8.

[00:06:20] React 18 does change a bit of stuff but the general paradigm of writing components does not change. So you're good to learn this, React 18 will just be a little sprinkle on top of that. Pretty standard HTML document, writing a root div, we have two script tags. You might ask, why is there react and react dom, why is that two separate libraries?

[00:06:44] I'm sure many of you are familiar with React Native, right? So the reason why they do this is this React package is shared between React Native, React DOM, React ART, React 3D, React 360. There's a bunch of renderers or underpinning layers for React. And so they build this one React package that they all use.

[00:07:05] And then, this is actually where most of the code is, I think this is like 3 kilobytes and this is like 40 kilobytes. This is actually what handles all the rendering to the DOM, right, it actually handles document.write kind of stuff, right? And if you swap that out for React Native it'll handle all of the writing to web views and things like that.

[00:07:24] Or I guess it's an interface to the IOS, but whatever. Not a React Native course, you should take the Frontend Masters React Native course, which is cool. So let's go grab our stylesheet. So if we go back over to my GitHub repo here, complete intro to React V7 project one that we were showing you earlier.

[00:07:50] Or another way to get there is from here. If you go from here to pure React which is where we are. And you scroll down, Here to this blue box that says click here to get the style sheet. If you just click on that, this will give you the raw output here.

[00:08:07] So if you just Cmd+A copy or Ctrl+A all, right, and then we're just gonna make a new file here called style.css. You just paste that business and you just wrote all the CSS for the course, congratulations. I call it the stack overflow way of writing code. So again, this is not a CSS course, this is meant to be easy, not necessarily good.

[00:08:35] [LAUGH] But if you follow all of my class names, you'll get all the styling for free. So now if you refresh your page, you should see it should change a little bit, right, you see cute little animals. So, so far you should see some style but you should not see anything rendered to your page yet.