Complete Intro to React, v5 Project Setup

[00:00:00]
>> Brian: When I was very, very first learning React, actually the very first time I saw React, I thought it was gross. I thought it was gross because why would I wanna put HTML inside my JavaScript? Why would I wanna have this extra transpiled language? There was a bunch of really weird feelings that I got about it, and I just pushed all the feelings down, which was what my therapist told me to do.

[00:00:19] That's not, I'm kidding, don't do that. But I'm going to explain to you why I think those things are okay, but we're going to start with no transpolation step, no JSX. No babble, no web pack, no parcel. Nothing like that. We're going to be writing raw JavaScript React just to show you that it's possible.

[00:00:37] And I wish someone would have taught it to me like this because you'll see that JSX and React are not doing any sort of black magic. It's just regular old JavaScript function calls, and it's my opinion that you want to understand your tooling, cuz if you don't understand your tools and you resent them, right?

[00:00:57] Because they just seem to add complexity. But if you understand the problem that the tools are solving, then you embrace the complexity because it gives you ease of use, right? So that was kinda my problem with JSX is I resented it cuz I didn't understand it. So hopefully here I can teach you what it does and then you can understand why it exists, because it's really annoying to write React like this.

[00:01:18] But you can. Okay, so what I want you to do, I'm just gonna go to my desktop, and I'm gonna make a directory. Actually, even just do it this way, I'll just say, New folder right there, and this is going to be called the adopt me project. Choose a different name.

[00:01:42] Well, I'm just gonna delete that one then.
>> Brian: All right, move to Trash. All right. This one is going to be called adopt-me, cuz that's going to be what we're building today. A pet adoption application. Okay, and then I'm going to open this with Visual Studio Code.
>> Brian: All right.

[00:02:13]
>> Brian: Okay, so now I'm inside of this adopt-me folder with nothing in it. I'm gonna create a new directory inside of here. So it's gonna be, SRC is the name of the directory that I just created. There's no reason you have to structure a React project this way.

[00:02:29] This is just a way that I'm habituated to writing code. So okay, inside of here I'm gonna create a new file, and it's gonna be called index.html.
>> Brian: Now the first trick here that I'm gonna show you with Visual Studio Code is a little thing called Emmet. So if I put html:5, and you can see that I have this auto completion coming out, and if I hit Tab, it's going to autocomplete out to like a scaffold of the HTML file.

[00:03:00] Because I can't remember everything that needs to go into an HTML file, right? I literally have to Google this every single time that I do it, so that's what that does. And I'll be using Emmet a little bit more as we go on, and I'll call it out so you can see it, but you can see that the entire cheat sheet @emmet.io.

[00:03:17] It's not something that VS code invented, so you can put Emmet into Sublime and JetBrains and stuff like that, but it is built-in off the bat. Okay, and I'm gonna, this is gonna be called ADOPTme, so that's what I'm gonna call the title.
>> Brian: Okay, so here inside the body, I'm gonna put a couple of tags.

[00:03:39] The first one is I'm gonna put one called root. So you can there I just wrote the css selector for root, which I wanted to be a div, right? So I do #root, and then I hit Tab, and it's gonna complete that out to a div. Now just so you know Emmet is way more complicated that, you can do crazy stuff with Emmet.

[00:03:57] I just use like the lazy abbreviations, that's mostly it. Okay, so I have div as an idea of route, I'm gonna put not rendered inside of that. Reason why I do that is because if I see not rendered I know that the React application didn't start. But if it did start, then it's going to replace everything inside of this div.

[00:04:21]
>> Brian: Okay, underneath this, I'm gonna put two script tags, so I'm gonna put script:src, like that.
>> Brian: It autocomplete out to a script tag. And we're gonna put two URLs here. So one of them is gonna be https://unpkg.com.
>> Brian: This is a CDN for NPM packages, which is just a fancy way of saying that there's a bunch of JavaScript files that I'll unpackage and it'll pull these off of the mpm registry.

[00:04:58] So I'm gonna pull off of the registry, React, and I'm gonna grab a specific version, so 16.8.4, I think 6 is the latest version as of the filming of this. But we're gonna stick with 4 because all my notes are using 4, so let's just stick with that.

[00:05:22]
>> Brian: Okay, and React to 16.8.4/umd/react.development.js.
>> Brian: So what this is gonna do, this is gonna go out to the CDN, grab this file which is a compiled React file, and it's going to load this as a top level React variable, so you can use React. Okay, we're gonna need another one of this.

[00:05:52] So I'm going to copy this and paste it underneath it again, and then I need to change two things. One of them here the React when put this react-dom, like that,
>> Brian: And then I'm also where it says react.development.js, I'm gonna put react-dom.development.js, right? So I changed this in two places.

[00:06:21]
>> Brian: Okay? And this is going to load a second library, which is going to be the react-dom library, which allows you to render and react to the browser. Now why is there two packages? That seems a little confusing, right? Well, some of you may be familiar with the project called React Native.

[00:06:35] So React Native and ReactDOM both share the React package. This React is just like, it's a very small 2 kilobyte package of how to interact with React. So it has all of the top level methods that you're going to call, and then ReactDOM is actually the large one that takes all that stuff out of the React package and renders it to the browser.

[00:06:55] By the same token you would load React, and then React Native would actually load it into your Android or iOS app. Does it make sense? Okay. So that's why there's two different packages there.
>> Brian: Underneath that we're gonna put a third script tag, and we're gonna do what you should never do, which is we're going to write JavaScript directly in our HTML.

[00:07:18] Now the reason why I showed you how to do this is because I wanted to show you that this can be super bare-bones, right? We're gonna fix this in a little bit but for now I just want you to write this, your code is going to go here.

[00:07:33]
>> Brian: For now. Oops, stop that.
>> Brian: Now that I've done this, save this file, right?
>> Brian: And I want you to go over to your favorite browser, mine happens to be Firefox. And I'm gonna go here and say File > Open > Open File, right there.
>> Brian: Let's see this in a new directory here.

[00:08:05] File > Open File, and then I'm gonna navigate to my directory which is on my desktop. I'm going to find ADOPTme, source, and index.html. And I opened this in my browser.
>> Brian: And you should see something that says not rendered, right? Because we haven't actually done anything yet.

[00:08:26] We've just loaded the libraries.
>> Brian: But I'm gonna open my console here. This a bit bigger. You don't have to do this, I'm just showing you. If I go in here in my console, and I say React, now this is defined because we loaded that, right? With one of the script tags.

[00:08:46] Same thing here with ReactDOM, also defined because we loaded this off of the CDN. Makes sense of how all that's is plumbed together, cool.
>> Brian: All right. The next thing I want you to do is we're gonna go grab the CSS. This is definitely not a course about CSS, so we prewrote all the CSS for you, so that you don't have to write.

[00:09:16] So if you just follow our conventions and naming patterns, you're gonna get all the styling for free. And I'm not telling any of you to look at the CSS or think it's the way that you should write CSS. There's no commentary intended from the CSS. So if you go here into the class notes, you're gonna see here about a third of the way down, you'll need to grab the CSS file.

[00:09:44] We wrote it so you don't have to download it here. And actually, Tanner wrote it so thank you, Tanner. So if you click Download it here, it should take you to this file, you can see here it's actually on the GitHub.
>> Brian: And I'm just gonna hit command A, select everything, and copy it.

[00:10:06] And then I'm going to go back over to my project here, create a new file in the source directory, called style.css, and paste all that business in there. And Save it. Okay, here inside of the head tag I'm gonna put link, which is going to complete out to this, and I'm gonna put /style.css

[00:10:41]
>> Brian: Cool. So now, we should be able to go back to our ADOPTme, refresh the page, and now it looks a lot nicer. It's got little chickens and beetles in the background, it's very pleasant.