This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Including React" Lesson
[00:00:00]
>> Brian Holt: So we're gonna build this AdoptMe app here. Let's see, let me get my notes here. And we're gonna put a couple more things in here. So we're gonna put a DIV here, and its ID is going to be root, this is where React is going to be rendered into, this is the target element where React is gonna render into.
[00:00:22] I like to put something in here, so that if it shows up, I know that the app is not rendering. So I put not rendered. Because when it does render, React will replace whatever inside of that.
>> Brian Holt: Okay?
>> Brian Holt: Then, we're gonna put two script tags here.
>> Brian Holt: Okay, and these are gonna go to https://unpkg.com/react@16.4.1, which as of last night, was the most current version of React, /umd/react.development.js.
[00:01:26]
>> Brian Holt: So let's talk a second about what unpackage is. It is basically a CDN for modules that are on npm. It's mostly just so you can like test stuff out just like this. You can actually load in files directly from npm packages. It's actually written by one of the creators of React router, specifically for this use case, for bringing in Reacts so that you can have just like little experiments with it.
[00:01:50] So if you wanna just open that, in fact, I can just come in and click on it. You can see here it's just a really, really long JavaScript file. So this is going to be loading that into your browser, okay. So with React, you actually need two packages.
[00:02:11] You need React and you need another one called ReactDOM. React is actually split into two packages for one specific reason. It used to be one package, like maybe 18 months ago, 2 years ago, something like that, forever ago in terms of Frontend software. [LAUGH] The reason why it split into two is we were writing these React applications and some engineers at Facebook were like, this seems really cool, we wish that we could do this for mobile development, right?
[00:02:41] That we could write code in the same way that you write code for the Frontend, that we can build it the same for mobile. So they went and built this thing called React Native, which I'm sure many of you have heard of. So they used the same API to build React applications, but they used that to target mobile.
[00:02:58] So they changed the rendering layer, and actually, this started happening a lot, they started targeting things, like you can buy IoT devices with React hardware. You can build VR things with React 360, or A-Frame React, like there's a bunch of different kinds of renderers. So React is actually the core API, and then you need a second one that's the renderer, right?
[00:03:21] So we have to bring another package called ReactDOM because that'll actually render whatever we have inside our React application to the DOM, okay? So I'm gonna make a copy of this line here, right? And then here, where it says react, I'm going to say, react-dom, D-O-M, and then again here, where it says, react.development.
[00:03:46] Say, react-dom.development. So you need to change two things, this one and this one. As far as I know, it doesn't matter what order they come in, but just do it in this order cuz I know this one works.
>> Brian Holt: Okay, questions so far?
>> Brian Holt: So you're gonna be loading these two files off a CDN into your browser and then now, if we make another script tag just beneath these.
[00:04:26]
>> Brian Holt: Inside of the script tag, we're gonna have both react and reactDOM available, so that we can actually start coding directly with these. So no build step or anything like that. We're literally just writing code inside of a script tag, the least magical thing. So your, I can spell, your code goes here.