This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Installing React & ReactDom" Lesson
[00:00:00]
>> Brian Holt: Now let's go fix this error that React doesn't know what this is. What we're going to do, if you don't know, to stop the serve you hit Ctrl-C. I think that works on any platform. You send an interrupt command to it and say stop this, right?
>> Brian Holt: So here I'm gonna say now npm install without the D because these are production dependencies, react react-dom, like that.
[00:00:32]
>> Brian Holt: So this is gonna go install our two packages off of the npm registry.
>> Brian Holt: Take a second to do that.
>> Brian Holt: Okay, now instead of going back in my index.html, I'm gonna delete these two script files. Cuz I don't wanna load these off the CD anymore, I wanna load them off of my local computer, so delete that.
[00:01:06] So all we have is the root and our app.js.
>> Brian Holt: Okay, now we're gonna go back into app.js.
>> Brian Holt: And we're gonna say up here, import React from 'react'. So this is going to import the default export from the React package, okay? And we're going to say import and I'm gonna say {render} from react-dom.
[00:01:48] Now, some of you might not be seeing this autocompletion here. That extension is called NPM Intellisense, which again is here. NPM Intellisense, right there,
>> Brian Holt: Quite useful. So import render from react-DOM is where we want that one to come from.
>> Brian Holt: So I show you this, I could've just done import without the curly braces here and said react-DOM like this.
[00:02:23] And now this would work because this is called reactDOM down right here, but I wanna show you how to input the specific thing, so I wanna import just render from reactDOM. So this is saying reactDOM has a specific export called render and I want you to input just that, okay?
[00:02:38] And then down here just erase the render, so it's just render like that. So I wanna say this is similar to destructuring. It's technically not destructuring, this is just how modules work. But this is just saying react-dom has a specific instance, export render equals something, heah, question?
>> Speaker 2: When you're using an import statement, how do you know whether or not you should use the curly braces?
[00:03:07] Is that just for if you want to import one specific feature?
>> Brian Holt: Yes.
>> Speaker 2: Okay.
>> Brian Holt: For example here from React, I can actually import specific things. So like, I cannot actually just import creed element, because it specifically exports that, right? And then I wouldn't be using, I would just be using create element like that.
[00:03:33] In general, I would encourage you to do specific exports most of the time because parcel will do a thing for you called tree shaking. It actually uglifies the actual thing that does the tree shaking, but what that does is it's live code inclusion. So it will only include code that could ever potentially run.
[00:03:57] So in this particular case, let's say react-dom had 1,000 methods and we're only importing 1, right, it would not include the other 999. If they packaged it correctly which is a big if because most of them don't. But like a good example that would be like low dash right?
[00:04:14] Low dash is a huge library has like 200 methods right? And you don't, no one ever uses all 200 methods right? So what you wanna do with that is you wanna import just a few methods that you use and then it won't include the other ones, right? That is like the benefit there, potentially, it doesn't always work out that way.
[00:04:32]
>> Brian Holt: For me it just helps me to be explicit that I know this only uses render from react-dom. So what I wanted to get to is, this actually isn't helpful, because if you include react-dom you get the whole thing, because it's not packaged for tree shaking. And then the other thing is that there's not a lot of wasteful stuff inside react-dom, so there's not a lot to tree shake out anyway.
[00:04:53] So now if we save this and go back over to our project, it should still work, right? So now, you have to run the project of course, npm run dev, like that.
>> Brian Holt: Once it's finished building, you can see this looks like a JS file that's loading, it's only loading this app.js file.
[00:05:25]
>> Brian Holt: And it's not loading anything else, it's not loading like those other files from the repo. So you can see that that reacts now being included inside of our app.js instead of being loaded from some other CDN. And you can see that it's much larger than it used to be here, now it's 965 KB instead of being, like the probably 5 it was before because it includes React.
[00:05:48] Now keep in mind this is the development environment which means it's massive. If I patched this for production it would be much, much smaller. So don't worry about file sizes until you actually do the production builds, so just keep that in mind.
>> Brian Holt: Right now, this project would probably be 35 KB, I guess, cuz React is about 32.