This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
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.