Complete Intro to React, v6 Including Vanilla React & Project Setup

Transcript from the "Including Vanilla React & Project Setup" Lesson

[00:00:00]
>> So like I said up front, we are going to write what I would deem pure react that there's gonna be no JSX there's gonna be no build step. There's no Webpack there's no parcel none of that stuff. We're just gonna write directly JavaScript into an HTML file, which is a great idea.

[00:00:17] And that's why I'm teaching it to you, it's not that that was sarcasm. It's a terrible idea, but it's a good way for us to get started. So, I want you to just create like a folder somewhere I have one here, this is just on my desktop. I'm gonna create a new folder, and I'm gonna call this adopt-me, cuz that's actually the name of the app we're gonna be writing today, which is a pet adoption app.

[00:00:44] Okay, and then I'm gonna open adopt-me in Visual Studio Code, It's fine, okay, and now we have a brand-new project with nothing in it. I'm gonna create a new folder in here and call it SRC. Why do we call it SRC, I just always call my source directory where all my source files are in my SRC?

[00:01:11] It's just something I've always done and I see other people do it and I have no reason to stop. Okay, in my SRC directory, I'm gonna create a new file there and I'm gonna call that index dot HTML. Okay, good so far right within HTML file inside of our source directory.

[00:01:32] In Visual Studio Code, you can see HTML, colon five, just like that. And I can hit Enter, and it scaffolds out a basic HTML file for me. If you're not using VS Code, you can just go into the course notes and copy and paste. But as long as your VS Code is in HTML mode, that'll work.

[00:01:52] You can tell it's an HTML mode if you see the five of them, I guess some people won't see a five little spirits like an HTML symbol though. Okay, so if you put a couple of things in there, the title I'm gonna call mine adopt me. You can call your app, whatever you want, that's gonna be whatever show up in the little tab up there.

[00:02:15] And then here in the body, I'm gonna put a div with an ID equal to root. Call this again, whatever you want. But this is going to be where react is going to render itself into right?. You have to give it kind of like an anchor point site is to just create an empty div, and I'll put not rendered here.

[00:02:34] So that way I know if I see not rendered I'll know that react hasn't rendered yet, right it's because React will replace whatever is in there. Okay then I need you to put two Script tags, and the source of the first one. And it doesn't matter which one quarter these come in is http://unpkg unpackage.

[00:03:01] It's from a friend of mine, it makes a Michael Jackson. His name is not Michael Jackson's not that Michael Jackson. Unpackage.com it allows you to basically link to NPM packages from the browser. That's the gist of it, so we're going to do react at 17.0.1. So that's the name of the package that we're going to use, and then we're gonna do umd/react.development.js.

[00:03:35] And this is gonna load, the React package from unpackaged into our browser. I'm sure many of you have done something similar for like loading jQuery off the CDN, right? Okay, so I need you to make a second pack tag, you can just copy and paste this top one.

[00:03:56] We're gonna change react here to react-dom, right? D-o-m, right there, and then we're gonna change this one as well. The second one c needs to change two things in the second line, react dash do CF react and react DOM. You need both packages because react requires two packages to render.

[00:04:23] React is like the high level API all react works relatively the same way. And then react DOM is actually the underlying line library that interacts with the DOM right? I'm sure many of you have heard of React Native, right? So React Native uses both React and React Native, that's why you need both of those.

[00:04:37] Okay, and now we're getting into our script tag here, and we're going to write some react directly into Our HTML file, we're going to put a link tag to a CSS file. So link REL equals stylesheet href equals style dot CSS, just like that. I wrote all the CSS for you for this course so that you don't have to write any CSS.

[00:05:06] For many of you, you're welcome for others of you, I'm sorry. Depends on what you think about writing CSS. So if you go back to the course website here is right here you see that let's add some style and then click here. This will take you to all the raw CSS so you can actually just copy and paste this directly from there, and you can put it into your new file here.

[00:05:32] Called, style.css. Style.css start to go on the source directory. Why are we not using create react app here, create react app is great and when am just doing things. Things quickly on my own, I use it quite frequently. So a create react app does for us, it basically scaffolds out a ready to go react app to write with all the tooling in place and all that kind of stuff.

[00:05:55] This circles back to what I was talking about early earlier. Which is I want you to understand what your tools are, why are using them and how to change them later. The problem with create react app is it's like it's very rigid in its structure, and it hides all the complexity from you.

[00:06:10] And I want you to see all the complexity, I want you to embrace the complexity of this. So later, you should definitely use create react app once you understand what it's doing for you. But I want you to basically build your own create react app for this of course.

[00:06:25] So we put in style that CSS, right? Which is a bunch of CSS that I do not assert is written well, but it does work, which is probably the most important part about CSS is that it does work, okay? So now that we've done that, what you should be able to do is you can just do file open here.

[00:06:47] File, Open File, and I'm gonna open it straight off of my desktop. I'm just gonna open it up, next up, HTML directly in my browser here. And you should see something like that, it's gonna say not render because we haven't done anything yet. But you see that you should see a nice background that's coming from the CSS.

[00:07:11] And if you go into your console, so this is just in the terminal, you'll see that react is now defined right? Because this is now being loaded off the CDN, same thing with react dom like that. This has always been my favorite, secret internals do not use or you will be fired.

[00:07:34] I guess the story for that people wanna know is there's internals that React has and the React team previously had directly used those. So Facebook.com was using private APIs, and so they made this thing here that they said, do not use it or you will be fired at Facebook.

[00:07:52] I don't know if they'll actually be fired, but I also probably wouldn't try if I worked at Facebook