This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Creating a Landing Bundle" Lesson is part of the full, Complete Intro to React, v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Brian spends a few minutes debugging some issues in the application. He then demonstrates how the Landing bundle is only loaded when the user navigates to the Landing page. Code for the application up to this point is on the v2-24 branch.

Get Unlimited Access Now

Transcript from the "Creating a Landing Bundle" Lesson

>> Brian Holt: So, something, kind of, interesting probably happened, if you're watching, here, in your bundles. Notice that you have two bundles being generated now. It's probably hard to see. Let me make it bigger. But, I have bundle, and 1pointbundle.js. So webpack says, okay you're doing system import here. Cool, I know what to do with this and it's like, I'm going to cut that off the bundle.

[00:00:26] Now, let's discuss why this is actually not that great. Bundle.js is 1.04 MB, cuz it has to include react, axios, all of our preloaded data, a bunch of that other stuff. Landing is just really that one react component. So we're shaving 3.19 KB off of our 1 MB bundle, pretty dumb, right?

[00:00:50] Not super compelling, but now you know how to do it. So if you can shave off big parts of your app, this is how you do it. So, if we're go into our app now,
>> Brian Holt: I need to run my server again. So, let's go to package. Real quick, package.Json.

[00:01:11] And we're gonna do server,
>> Brian Holt: As : NODE_ENV=server node server.js.
>> Brian Holt: Okay, and now I can do, or I can just start, actually start's probably the one that you want, so start npm run start
>> Brian Holt: So now if I go to localhost 5050,
>> Brian Holt: And variant, that's cool.

>> Brian Holt: React,createElement type should not be null and find a glare number. Check the render method of component.
>> Brian Holt: So let's get off this for just a second. Let's go just do it on npm run dev
>> Brian Holt: Is everyone else seeing this too?
>> Brian Holt: Did I spell AsyncRoute wrong?

>> Speaker 2: Richard, is wondering if you can't name the React component with a lower case?
>> Brian Holt: Export default, I'll answer in just a sec. So I've got the export down here at the bottom.
>> Brian Holt: Hm.
>> Brian Holt: And this., so I'm trying to figure out why this is having a hard time loading, this.component.

>> Brian Holt: So false undefined, that's exactly what. [SOUND], that's what it is. So, remember that you have to interoperate between common js and yes, six modules, it's not module, it's module.default. Okay, and now this should work, cool. So, get rid of that console.log. So to demonstrate why I think this is cool, so here I'm on search.

[00:04:52] I refreshed the page, and I can see all, let's do all right here. Okay, as soon as I click svideo and go back to the home page, I guess that's actually what you want to see. So let's go back to browse all, refresh the page. And now if click go back to the homepage at that point, only at that point, does it actually request zero.bundle.js.

[00:05:22] So Webpack was smart enough to do all of that code splitting for us. Is smart enough to go out and request it for us, pull it back in, package it up nicely, inject it into that function and then we're able to use it at that point.
>> Brian Holt: So it does quite a bit of stuff for you.

>> Brian Holt: Any questions about that?
>> Speaker 2: Craig noticed that when you refresh the page it flashed the body.
>> Brian Holt: Yeah, cuz I turned off my node server.
>> Speaker 2: Okay.
>> Brian Holt: So let's turn it back on.
>> Brian Holt: Is anyone ever use nodemon before? It's basically runs, it watches all of your files then it restarts your Node server as soon as you save.

[00:06:14] It's like, watch for Node. So I'm just gonna use that for now so I can stop refreshing all the time. I'll also push a branch here momentarily.
>> Brian Holt: nodemon app per server.js. I suggest like, nodemons, you just use it like you would normally use node.
>> Brian Holt: So now, you can see it's watching this.

[00:06:42] As soon as I save over here, it restarts my server, right, so I don't have to keep killing it and restarting it.