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

Brian demonstrates how Parcel allows the separation of code into component modules by creating the Pet component module.

Get Unlimited Access Now

Transcript from the "Component Module" Lesson

[00:00:00]
>> All right, so head to app.js, and we're going to movePpet into its own file. So you can just cut that whole bit of code here. Create a new file here, save it, call it pet.js. Again, that'll be inside your source directory. You're going to import React from 'react'.

[00:00:28] And then you're going to export default pet like that. So we have a nice little module now, because we have Parcel now, right? We can split our code up into various different pieces. You could not do that before, right? Because nothing was bundling it back together. And now the Pet's gone, it's like, hey, I don't know what this Pet thing is anymore.

[00:00:49] And all you have to do is say, import Pet from './Pet'. One thing I'll just kinda throw out really quick. Notice that I do use capital letters here to kind of correspond to this being a component. It's not required, and in fact, most, well, I won't say most, some file systems, are case insensitive.

[00:01:12] So do not rely on case to be sensitive. I might have caused downtime at Netflix one time by relying on it to be case sensitive. That's true, I got in trouble for that one. But just know that's why you do it. But I see people make that lowercase.

[00:01:29] That's totally up to you, it's a stylistic decision. So notice that I called App.js and Pet.js with a capital letter, that's just to correspondent to it being a component. It's not required, that's its stylistic decision. I believe Linux file systems are case insensitive. Or Windows, I can never keep that straight.

[00:01:49] It doesn't matter, one of them is case insensitive, and so just never rely on case to be sensitive with file systems. But these ones I do call capital letter just to signal to future Brian this is a component. If it is not a component, then I will make it lowercase.

[00:02:05] But some people will do that, some people don't. So one thing I do wanna call out here, for the rest of this class, please be using localhost:1234. Do not be using the file version that we have open here. Go ahead and just close that one.