Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Using React as a Module" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Now that Brian is using Webpack to bundle the application code, he no longer wants React to be a global module. Brian modifies his components to now ‘require’ React as a dependency. Webpack will now include React in the generated bundle.js file.

Get Unlimited Access Now

Transcript from the "Using React as a Module" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: We still have the problem pulling in React being a global module. And we don't want to do that. The other thing worth mentioning, never modify bundle by hand, just FYI. Just leave it out there and let it run of its own. Because as soon as you regenerate your file, all of your changes get blown away.

[00:00:22] So just leave but alone don't touch it just, yeah, don't touch it. Okay, so I want to get rid of this global React and I want to be able to pull it in locally. So, let's go ahead and do that. So up here in my title.js, say var React = require react.

[00:00:49] So remember we put dot slash in front of MyTitle. That's basically referring to like I created this, that this is my file that I'm pulling in, right? If I don't put that dot slash here, it basically means that I have an npm module that I installed right so if you look at your package.JSON, I pulled in React right?

[00:01:09] So that will match up. However your npm installed that that's how you refer to it here. I pulled in React and I want to pull that into this file. Okay? So save that in MyTitle, and then also go over to ClientApp.js. You can get rid of this global comment, because they're no longer going to be global.

[00:01:28] And we're going to say var React = require(react). And we're also going to pull in ReactDOM, because we're using it down at the bottom, ReactDOM = require react-dom.
>> Brian Holt: Okay? So all we did is in client app, we pulled in React and ReactDOM and got rid of the global comment.

[00:02:00] And then in MyTitle, we just pulled in React as well. Something else to keep in mind is Webpack is smart enough to not include like include React twice, right. It has one copy of React that's given to both these different files so you can require everything, everywhere to not worry about duplicating your code just keep that in mind.

[00:02:20] It was a worry for me so I mentioned someone else worries about it to. And, this is just code or guy trying to have all my requires at the top. Shouldn't affect anything as long as you're requiring React before you say you refer to it, up to you.

[00:02:42] Okay, so let's go ahead and run webpack again, we can just run literally the same command.
>> Speaker 2: If you're pulling in require, you don't need to the scripts or the index, the index.html, do you need to pull in React still?
>> Brian Holt: Yeah, good point as well. In fact, reactive will yell at you if you don't do that.

[00:03:01] So these two scripts up here. Yeah, go ahead and just delete that.
>> Brian Holt: Right? Because now everything's being put into bundle.
>> Brian Holt: Okay, so run webpack again.
>> Brian Holt: And so now you have ClientApp, you have MyTitle and then you have 158 hidden modules. The word hidden modules makes me like really frightened inside, I don't know if anyone else but that's just, that's all of react and all of its dependencies as well right now getting it included.

[00:03:50] That's the hidden modules part. And now if you look at public,
>> Brian Holt: Notice this got way bigger [LAUGH] and the reason why it got way bigger is cuz React is actually a fairly decent sized library. But now if you come over here, refresh the page, should still work.

[00:04:18] And if you look down here at your Network tab, you are just pulling in one bundle and that's it.
>> Brian Holt: Let's see, I want to hard reload.
>> Brian Holt: Well, it's cuz of that, yeah, whatever, that's fine.
>> Brian Holt: Okay, any questions about that?
>> Brian Holt: Great, so.
>> Speaker 2: Let's just take a show of hands, like who got that point?

[00:04:59] Anybody need help?
>> Brian Holt: Yeah, anybody?
>> Speaker 2: Anybody getting weird errors?
>> Brian Holt: If you're getting a weird error, there's a 90% chance that you're not the only one getting an error. So like never feel ashamed to ask like my shit's broken, please help me.
>> Speaker 3: Can you show how to do the rerun webpack?

[00:05:19]
>> Brian Holt: Sure.
>> Speaker 3: Was it just the word webpack?
>> Brian Holt: Webpack.
>> Speaker 3: Okay, so it's the whole phrase.
>> Speaker 4: Do you have to run that whole command every time because it's specific to that bundle?
>> Brian Holt: Yep, exactly because you have to tell it where to enter, so we have to tell it, please enter at ClientApp.js right?

[00:05:37] Cuz that's the main file, the way you'll be able to tell you your main file is, your main file never has an export, right? So you can't run a webpack on MyTitle. In fact, it'll yell at you if you tried to do that. This says hey, I can't do this, it has an export.

[00:05:54]
>> Brian Holt: It should, Jeez, I guess that's no longer the case.
>> Brian Holt: Anyway, it should never have an export and then you also tell what fire you want to generate. But that's kind of annoying to have to type that every single time, right. So that's why we have npm scripts so we're going to put that into an npm script and never have to worry about it again.

[00:06:22]
>> Brian Holt: Okay, so come back over in fact to your package.json,
>> Brian Holt: Put a new line in there that says build,
>> Brian Holt: And then just put whatever we had, we've been running right? You can actually even just copy and paste if that feels right to you.
>> Brian Holt: Okay, save that.

[00:06:50] This line right here, geez, don't do that. [COUGH] Another helpful tip that I kind of alluded to earlier. You see these yellow squares, that means that something I've modified since I last committed, or if you see the plus side of something I've added or if you see the red arrows that means things I've deleted.

[00:07:13] So you can kind of see like the diff of what we've been doing so far. And there might be helpful for you if you're trying to figure out what I've changed one on the page.
>> Speaker 2: It might be a good time to push and sync so some of these people can resolve their errors.

[00:07:24]
>> Brian Holt: Definitely. I will do it right before I start Babel which is the next thing. Okay, so I'll save that, say npm run build
>> Brian Holt: Now you have to remember the entry point or the exit point, you just say npm run build and everything works. Also a good time to run npm test, see what we've broken and luckily I didn't.

[00:07:56] I've done a good job. So, that's good, all right. So I'm gonna push up a new branch real quick.
>> Brian Holt: 4 right yep.
>> Brian Holt: Oops.
>> Brian Holt: Okay, good. push origin fem-4.
>> Brian Holt: Okay, so now if your stuff is broken, just go ahead and grab fem-4 and you should be back on the same page as us.