Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, you'll learn how to break up your React components into modules. ES modules is a feature in JavaScript that lets you break up your code into individual JavaScript files. Modules provide a better way to organize and maintain your code, as well as provide scope for your variables, functions, and classes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
There are a few things you may have
noticed in the new project files.
0:01
First is the import statement at
the top of each JavaScript file.
0:04
And the export statement at
the bottom of the App.js.
0:09
Create React App uses ES modules, a
feature in JS that lets you break up your
0:14
code into individual JavaScript files.
0:18
Modules provide a better way to
organize and maintain your code,
0:22
as well as provide scope for
your variables, functions and classes.
0:26
The module system allows you to import and
export entire modules or
0:32
just part of a module.
0:37
For instance,
the file App.js is considered a module.
0:39
It's importing React as a dependency
from the installed npm packages.
0:43
At the bottom of the file we're using
an export statement to export only the App
0:49
component.
0:54
That way it can be imported
into another module.
0:55
For example,
index.js is an entry file of the app.
0:58
It's importing the parent
App component from App.js.
1:03
And it's how we're able to use
the App tag in root.render.
1:07
Anything that we don't export from the
App.js file won't be available to other
1:10
modules in our application.
1:15
It will be private to this module.
1:16
index.js is also importing React and
ReactDOM as dependencies.
1:18
It is also importing index.css, which
means that the CSS is gonna be processed
1:25
with the JavaScript files and
included in our JavaScript bundle file.
1:30
Right now, we have all our components
defined in one file, App.js.
1:35
Over time, you'll find that
putting all your components and
1:40
logic into one monolithic file
can become difficult to manage.
1:43
In React, it's common to think of each
component as an independent module.
1:47
In order for our app to be truly modular,
1:52
let's move each component into their
own file, starting with the header.
1:54
The first thing we're gonna do is
add a file to the components folder.
2:00
We'll title this file Header,
we'll write Header.js.
2:04
Also make sure that there's
a capital H in the file name.
2:09
Commonly the first thing
you do is import React.
2:13
To do that we'll write
import React from 'react'.
2:15
Since each module has its own scope,
you'll need to import React into the file.
2:23
As of React version 17, you no longer
need to import React to use JSX.
2:29
But you do need to import React to
use other features in React API,
2:36
like React.useState for example.
2:41
So moving forward, I'll import
React at the top of each file for
2:45
the sake of consistency.
2:49
Now let's cut the header
component from the App.js file.
2:52
So we'll cut this, delete the spaces.
2:55
Remember to save the file before
heading over to Header.js.
2:58
Okay, let's paste the header
component under import.
3:03
The next thing we'll have to
do is export the component.
3:06
So write export default Header.
3:09
Let's check how our app is
running in the browser.
3:13
The app now gives us an error,
Header is not defined at App.js.
3:16
That's because App.js is referencing
the Header component with the Header tag.
3:21
We have no way of accessing it
because we haven't imported the Header
3:27
module containing the React component.
3:30
So let's do that.
3:33
At the top of App.js, just below
the React import, we'll write import,
3:38
followed by the name of the default
export from the module we're importing.
3:43
So write Header from, and
the path to the module as a string.
3:49
Since the modules are all
in the same folder,
3:59
I'm using the relative path to
the JS file containing the module.
4:01
We can leave off the .js
file extension here,
4:05
because Create React Apps module
bundler called Webpack allows
4:09
you to leave off the file extensions for
JavaScript files.
4:14
If you're curious about this,
check the teachers notes below.
4:20
Import will let us pull the Header
function out of the Header module and
4:24
into the App module.
4:28
Let's save and check the browser
to see if the error is gone.
4:30
Once we reload the page, we can see
the error's gone from the console.
4:34
Next, we'll place the Player component in
its own module by following the same steps
4:38
we took to create the Header module.
4:43
Let's navigate back to the code.
4:46
Let's create a new file.
4:50
We'll call this Player.js.
4:52
We'll import React from "react".
4:56
And underneath we'll paste
in the Player component.
5:00
We'll save, head over.
5:07
Now let's not forget to export it
by writing export default Player.
5:11
All right, let's save this.
5:22
In the browser we're
getting another error.
5:25
Player is not defined at App.js.
Let's import it.
5:28
Import Player from player.
5:35
Let's click save.
5:40
We're still getting another error.
5:43
Counter is not defined at Player.
5:45
In Player.js,
we're calling the Counter tag, but
5:50
we forgot to import Counter,
so let's do that.
5:55
We'll create a new file and
name it Counter.js.
5:59
We'll import React and now let's cut
6:06
the Counter component from App.js.
6:12
And of course we'll do export
default Counter.
6:24
To fix the error let's import
Counter in the Player component.
6:31
Do import Counter from counter.
6:37
It looks like I misspelled Counter.
6:42
Let me fix that.
6:44
One nice feature about Visual Studio Code
is that it gives you a prompt to update
6:49
all your imports.
6:53
So I'm gonna click that,
and it did it for me.
6:54
Nice.
6:58
So let's save this and
navigate back to the browser.
6:59
Once we reload the page,
we can see the error is gone.
7:01
Now we're left with just
the App component in App.js.
7:08
This is our main component which
holds the players state and
7:12
the handleRemovePlayer function.
7:15
As your app grows in complexity and
you create more and
7:19
more components, bringing each module
into its own self contained functionality
7:22
will help you spend a lot less time
figuring out what the app does.
7:26
And letting you focus more on what your
React application should look like at any
7:30
given moment.
7:34
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up