This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Webpack & ES6 Modules" Lesson
[00:00:00]
>> Brian Holt: Moving on to the next two tools that we're gonna be talking about. We're going to be talking about Webpack and Babel. We're gonna be using Webpack 2 today, which is the new version. It's still technically in beta, but the only reason it's still in beta is the documentation.
[00:00:17] The actual core code itself is done, not changing. They just need to finish the documentation. And as far as I know they're almost done. Pretty close.
>> Brian Holt: So, let's talk first about Webpack. It's a phenomenal tool. I definitely suggest it for anyone that's gonna be building new apps.
[00:00:37]
>> Brian Holt: The basic, most basic part about Webpack is it takes all of your modules that you create and then it puts them together in one file and then makes that available to send down. Like that is the core, basic part of what Webpack is gonna do for you.
[00:00:52] It basically allows you to separate your one giant JavaScript file into multiple smaller ones. And then you can just say okay, import this from this one, import this from this one. It's gonna make you one bundle file and you send that down the wire. That's the most basic part of it.
[00:01:07] Then there's 15 billion other things you can do with it, right? So it has what are called loaders. Loaders are basically say okay, I'm gonna pull in this file, but I'm also going to run it through this like, middle processing to go from this format to another format.
[00:01:22] And I'm gonna run this one through the linter, right? It does all sorts of crazy other stuff for you.
>> Brian Holt: But a tool like Webpack or Browserify or rollup, or any of these other packaging tools, are essential because if you have an app the size of Netflix, you need to break it down into smaller modules.
[00:01:45] Like that's just a given, that must happen, and it's up to you to figure out how that happens, but it has to happen. It becomes untenable to have a 50,000 line file. Like, that's a non-starter, right? So enter Webpack, that's the tool that we're gonna use. I think today Webpack 2 is definitely the best piece of software that it does everything the best.
[00:02:11]
>> Brian Holt: Okay, so let's actually just go and do a quick experiment with it to show you exactly what I'm talking about. So go into, or create a new file, and put it in your JS directory.
>> Brian Holt: And call it MyTitle.js. Okay, then go to client app and just rip out all of this MyTitle stuff.
[00:02:42]
>> Brian Holt: Actually, I just take that whole thing up there.
>> Brian Holt: Okay, and we're gonna go to MyTitle.js. Paste all that in there. This doesn't need React.DOM, so we can get rid of that.
>> Speaker 2: Could you boost the font a little bit?
>> Brian Holt: Yeah.
>> Brian Holt: Better?
>> Speaker 2: There you go, thank you.
[00:03:05]
>> Brian Holt: Yep.
>> Brian Holt: Okay, so you're gonna have.
>> Brian Holt: CreateClass here, so this is just what we had before.
>> Brian Holt: And then what we're gonna do down here.
>> Brian Holt: Let's see.
>> Brian Holt: Yeah, we'll fix that in just a second.
>> Brian Holt: We're going to say, there, okay, cool. So rather than have that global react at the top, we're gonna say import React from 'react.'
[00:03:48]
>> Brian Holt: And what this is signaling to our packagers like, hey, I need you to go out and grab the React module, which it's just gonna know to grab from your node modules directory. And bring that in as the React variable, right? I could call this Blah, right? And it would just refer to it as Blah.
[00:04:08] But we're gonna say that React, right? Now we have React available in this scope. So now this isn't coming from the global scope, this is coming and being locally injected here, okay? And then what we're gonna do down here at the bottom is we're gonna say, export default MyTitle.
[00:04:30] And what that is doing is it's saying, I created this MyTitle piece of code. Now whenever someone else requests this particular module, give them this, right? You're just identifying here is the thing I'm trying to export from this particular file.
>> Brian Holt: And the default part just comes from, because you're can export multiple different things, right?
[00:04:55]
>> Brian Holt: So you can export multiple different things. So this is called, these are ES6 modules, right? And there's a couple different ways of doing modules in JavaScript. I would say the most common way, ha ha, is CommonJS, right? And that's one that node, in particular, uses.
>> Brian Holt: Node is trying to find the way to get in to ES 6 modules but they haven't figured that out yet.
[00:05:19] I think they kind of have figured it out but now they need to just implement it but they're still kind of landing on that, but this is the syntax of the future. This is the one that you kind of want to start moving towards because this is what we're going to settle on.
[00:05:34] For those of you that are used to writing CommonJS, this var React = require('react'), that's these two are essentially synonymous, right? So you don't need that, that's just, and those two are synonymous.
>> Brian Holt: If we're used to writing CommonJS. Any questions about ES6 modules? That's the one we're using today, so.
[00:05:59]
>> Speaker 3: So on these files running the Webpack.
>> Brian Holt: Sorry?
>> Speaker 3: You're using Webpack?
>> Brian Holt: I haven't started using Webpack yet.
>> Speaker 3: No?
>> Brian Holt: I'll show you in just a second.
>> Speaker 3: Okay.
>> Speaker 2: I'm converting it so that it will be in Webpack-like syntax.