Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Components!
You have completed React Components!
Preview
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