Check out a free preview of the full Complete Intro to React, v5 course:
The "Separate App into Modules" Lesson is part of the full, Complete Intro to React, v5 course featured in this preview video. Here's what you'd learn in this lesson:

Brian moves the components into different files to make the code more maintainable. Alternatives to Parcel are also given, as well as instructions on how to move forward with the commits. -

Get Unlimited Access Now

Transcript from the "Separate App into Modules" Lesson

>> Brian Holt: So now we have a bundler, we can do whatever we want, right? Now we have more leeway to do things. So the first thing I want to do here is I want to split pet and app into two different files, right? I can't think of a reason why you would not have one component, one file.

[00:00:21] It's always that way. You don't ever have two components in a file. I've not really seen a good reason to do that before. So one component, one file. So I'm gonna show you a pretty cool trick that VS Code can do for you. So I'm gonna highlight this and then I get this little light bulb here.

[00:00:38] This light bulb is called a code action. So I'm gonna click that and there's a couple things here. The one that I want is move, you might not see all of these because I have other extensions installed. But the one that you wanna do is move to a new file, which all of you should see, right?

[00:00:56] So click move to a new file. And all the sudden I have a new Pet.js file which has an export in it, and app is importing from that file. It's pretty cool, right, you like this, cool? Okay, cool. So what's really cool about it is, it's actually TypeScript that does that for you.

[00:01:19] It's not VS Code. TypeScript is actually running on your code, even though we're not writing any TypeScript right now. VS Code is constantly running TypeScript against your code, to understand how your code works. And so that's what's actually able to do that. Now, I prefer default exports, so I'm gonna change this to get rid of those curly braces, and save that.

[00:01:40] And then here, instead of saying, export const Pet = blah, I'm gonna say export default function blah like that. And let's give this a name like so.
>> Brian Holt: Now why do I do that? It's just kind of a pattern that I had that the default export for components is always the component.

[00:02:14] I would say it's a decently common pattern, but I'll leave you to judge it for yourself.
>> Brian Holt: As far as changing it to a named component, this is useful for when you're debugging things. Because if there's a stack trace, you'll see pet has the error, which makes that a little bit easier to debug later.

[00:02:33] So now, we have two different files, right? We're importing pet from pet. This should still work the way it should. It does. But now they're a little bit better organized now that we have an app component and a pet component, and they're in separate files and we can maintain them separately.

[00:02:49] There's another commit point here, that if you've fallen behind, you can go ahead and come up to I think this commit. Let's just take a look and see what it's called. It's right there.
>> Brian Holt: So this one is the add Parcel, build process and extract out Pet components so this is the one that you'd want to move up to right now.

[00:03:23] Okay and so we used Parcel. I told you could use Webpack this would 100% work with Webpack as well. You could also use Browserify, which is another great project for bundling code. It still works really well despite what other people might say. It's a bit older, but it still works great.

[00:03:40] Or you could use Rollup as well. Roll up is a bit more unwieldy sometimes a little bit harder to use, but works well, as well. At this point, now we've introduced a package.json so if you're moving forward and commit points in the course, make sure you move forward in the commit, and then you run npm install afterwards, right?

[00:04:01] So if I come to my terminal here, not this one, this one. And I say, if I moved forward in the commit, I would have to say, npm install, just like that. And it's gonna go run and install everything off of the npm registry. You don't have to do this if you've been following along, but just so you know, make sure that you're always keeping up with the npm installs as well.

[00:04:26] Otherwise, things won't work.