Lesson 05

Moving definition of React.js Box Component to a Separate File

Learn to isolate a React.js component in a separate file, a common practice especially if your codebase is large and you want to separate the concerns and single out responsibility. In particular, take the colored Box component and move its definition to its own file Box.js instead of defining it in the same file as the App component.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Summary

Summary of Transcript

In this tutorial, the speaker explains how to define React components in separate files for better organization and maintainability. Here's a step-by-step summary:

File Organization:
- Typically, components are defined in separate files rather than within a single file (e.g., the app component).
Creating a New Component:
- Create a new file named box.js under the source directory.
- It's a common practice to name the file after the function or component (in this case, "box").
Moving the Component Code:
- Cut the code for the box function from the main app file (lines 4-10) and paste it into box.js.
- At the top of box.js, import React with the line: import React from 'react';.
Importing the Component:
- To use the box component in the main app file again, you need to import it.
- Use the following syntax:
```
import Box from './box';
```
- It’s common to omit the .js extension, but it can be included.
Exporting the Component:
- Before the box function in box.js, add the line:
```
export default Box;
```
- This makes the component available for import in other files.
Testing:
- After importing correctly, everything should work as before, confirming that the components function properly even when isolated in separate files.

This practice of isolating components improves code organization and readability.

Video Transcript

I just want to finish with letting you know how we can actually define these components elsewhere. Because typically when you define your own components, you write them in separate files. So the box here is in the same file as the app component, but by convention it's best we separate them to be more organized. So all you have to do is create a file under source here. I'll call it box.js. Typically I call the file name the same name as the function name or component name. And then what we're going to do is go back to app. I'm going to cut the code line4 through 10 for the box function. And I'm going to paste it here. Now within box.js let's go to the top. Always we do report react from react. Like that. Go back to app. It's going to complain box is not defined because it isn't, right? So we have to import it. So to use code from another file, you have to import it. So import space the name you want. It could be any name. I like to always use the same name as the file or component name, in this case box. Space from and then you got to use quotes and give the path to the file. Now if you're referring to the current directory, that's dot slash. Current directory is dot slash and then box. Now you can say that JS that's fine. So usually people omit the extension.js and remove it like this. But it's doing pretty much grabbing that file. Now it didn't work here. Why? Because whenever you have a nap, sorry, a component in a file and you want it to be available elsewhere, you need to export that. Okay. The way I imported here is using, it's importing for the default export. Okay. So go back to box.js before the function you're going to say export default separated by space. That way this function is now available to whoever wants to import that from the outside. And you can see things are working like before. You can test it out and it works the same way. All right. So that's just isolating every component in a separate file. That's a good practice instead of having everything in one single file.