1
00:00:01,060 --> 00:00:04,216
There are a few things you may have
noticed in the new project files.

2
00:00:04,216 --> 00:00:09,150
First is the import statement at
the top of each JavaScript file.

3
00:00:09,150 --> 00:00:14,120
And the export statement at
the bottom of the App.js.

4
00:00:14,120 --> 00:00:18,800
Create React App uses ES modules, a
feature in JS that lets you break up your

5
00:00:18,800 --> 00:00:21,420
code into individual JavaScript files.

6
00:00:22,710 --> 00:00:26,739
Modules provide a better way to
organize and maintain your code,

7
00:00:26,739 --> 00:00:31,070
as well as provide scope for
your variables, functions and classes.

8
00:00:32,910 --> 00:00:37,483
The module system allows you to import and
export entire modules or

9
00:00:37,483 --> 00:00:39,045
just part of a module.

10
00:00:39,045 --> 00:00:43,866
For instance,
the file App.js is considered a module.

11
00:00:43,866 --> 00:00:49,941
It's importing React as a dependency
from the installed npm packages.

12
00:00:49,941 --> 00:00:54,215
At the bottom of the file we're using
an export statement to export only the App

13
00:00:54,215 --> 00:00:55,530
component.

14
00:00:55,530 --> 00:00:58,885
That way it can be imported
into another module.

15
00:00:58,885 --> 00:01:02,380
For example,
index.js is an entry file of the app.

16
00:01:03,440 --> 00:01:07,090
It's importing the parent
App component from App.js.

17
00:01:07,090 --> 00:01:10,950
And it's how we're able to use
the App tag in root.render.

18
00:01:10,950 --> 00:01:15,037
Anything that we don't export from the
App.js file won't be available to other

19
00:01:15,037 --> 00:01:16,550
modules in our application.

20
00:01:16,550 --> 00:01:18,585
It will be private to this module.

21
00:01:18,585 --> 00:01:25,350
index.js is also importing React and
ReactDOM as dependencies.

22
00:01:25,350 --> 00:01:30,330
It is also importing index.css, which
means that the CSS is gonna be processed

23
00:01:30,330 --> 00:01:35,470
with the JavaScript files and
included in our JavaScript bundle file.

24
00:01:35,470 --> 00:01:40,410
Right now, we have all our components
defined in one file, App.js.

25
00:01:40,410 --> 00:01:43,687
Over time, you'll find that
putting all your components and

26
00:01:43,687 --> 00:01:47,730
logic into one monolithic file
can become difficult to manage.

27
00:01:47,730 --> 00:01:52,130
In React, it's common to think of each
component as an independent module.

28
00:01:52,130 --> 00:01:54,397
In order for our app to be truly modular,

29
00:01:54,397 --> 00:01:58,680
let's move each component into their
own file, starting with the header.

30
00:02:00,330 --> 00:02:04,050
The first thing we're gonna do is
add a file to the components folder.

31
00:02:04,050 --> 00:02:09,100
We'll title this file Header,
we'll write Header.js.

32
00:02:09,100 --> 00:02:11,910
Also make sure that there's
a capital H in the file name.

33
00:02:13,220 --> 00:02:15,710
Commonly the first thing
you do is import React.

34
00:02:15,710 --> 00:02:20,190
To do that we'll write
import React from 'react'.

35
00:02:23,240 --> 00:02:29,730
Since each module has its own scope,
you'll need to import React into the file.

36
00:02:29,730 --> 00:02:36,690
As of React version 17, you no longer
need to import React to use JSX.

37
00:02:36,690 --> 00:02:41,757
But you do need to import React to
use other features in React API,

38
00:02:41,757 --> 00:02:45,310
like React.useState for example.

39
00:02:45,310 --> 00:02:49,687
So moving forward, I'll import
React at the top of each file for

40
00:02:49,687 --> 00:02:51,480
the sake of consistency.

41
00:02:52,500 --> 00:02:55,530
Now let's cut the header
component from the App.js file.

42
00:02:55,530 --> 00:02:58,640
So we'll cut this, delete the spaces.

43
00:02:58,640 --> 00:03:03,450
Remember to save the file before
heading over to Header.js.

44
00:03:03,450 --> 00:03:06,560
Okay, let's paste the header
component under import.

45
00:03:06,560 --> 00:03:09,250
The next thing we'll have to
do is export the component.

46
00:03:09,250 --> 00:03:11,560
So write export default Header.

47
00:03:13,020 --> 00:03:14,950
Let's check how our app is
running in the browser.

48
00:03:16,870 --> 00:03:21,321
The app now gives us an error,
Header is not defined at App.js.

49
00:03:21,321 --> 00:03:27,120
That's because App.js is referencing
the Header component with the Header tag.

50
00:03:27,120 --> 00:03:30,685
We have no way of accessing it
because we haven't imported the Header

51
00:03:30,685 --> 00:03:33,170
module containing the React component.

52
00:03:33,170 --> 00:03:33,670
So let's do that.

53
00:03:38,078 --> 00:03:43,641
At the top of App.js, just below
the React import, we'll write import,

54
00:03:43,641 --> 00:03:49,401
followed by the name of the default
export from the module we're importing.

55
00:03:49,401 --> 00:03:54,529
So write Header from, and
the path to the module as a string.

56
00:03:59,103 --> 00:04:01,789
Since the modules are all
in the same folder,

57
00:04:01,789 --> 00:04:05,760
I'm using the relative path to
the JS file containing the module.

58
00:04:05,760 --> 00:04:09,605
We can leave off the .js
file extension here,

59
00:04:09,605 --> 00:04:14,930
because Create React Apps module
bundler called Webpack allows

60
00:04:14,930 --> 00:04:20,620
you to leave off the file extensions for
JavaScript files.

61
00:04:20,620 --> 00:04:23,850
If you're curious about this,
check the teachers notes below.

62
00:04:24,960 --> 00:04:28,468
Import will let us pull the Header
function out of the Header module and

63
00:04:28,468 --> 00:04:30,220
into the App module.

64
00:04:30,220 --> 00:04:32,840
Let's save and check the browser
to see if the error is gone.

65
00:04:34,010 --> 00:04:37,560
Once we reload the page, we can see
the error's gone from the console.

66
00:04:38,950 --> 00:04:43,158
Next, we'll place the Player component in
its own module by following the same steps

67
00:04:43,158 --> 00:04:44,980
we took to create the Header module.

68
00:04:46,710 --> 00:04:47,960
Let's navigate back to the code.

69
00:04:50,190 --> 00:04:52,220
Let's create a new file.

70
00:04:52,220 --> 00:04:54,274
We'll call this Player.js.

71
00:04:56,270 --> 00:04:59,550
We'll import React from "react".

72
00:05:00,890 --> 00:05:02,739
And underneath we'll paste
in the Player component.

73
00:05:07,959 --> 00:05:11,897
We'll save, head over.

74
00:05:11,897 --> 00:05:18,110
Now let's not forget to export it
by writing export default Player.

75
00:05:22,440 --> 00:05:23,350
All right, let's save this.

76
00:05:25,390 --> 00:05:27,060
In the browser we're
getting another error.

77
00:05:28,110 --> 00:05:33,280
Player is not defined at App.js.
Let's import it.

78
00:05:35,720 --> 00:05:39,170
Import Player from player.

79
00:05:40,300 --> 00:05:41,115
Let's click save.

80
00:05:43,712 --> 00:05:45,180
We're still getting another error.

81
00:05:45,180 --> 00:05:47,370
Counter is not defined at Player.

82
00:05:50,788 --> 00:05:55,123
In Player.js,
we're calling the Counter tag, but

83
00:05:55,123 --> 00:05:59,081
we forgot to import Counter,
so let's do that.

84
00:05:59,081 --> 00:06:03,955
We'll create a new file and
name it Counter.js.

85
00:06:06,862 --> 00:06:12,153
We'll import React and now let's cut

86
00:06:12,153 --> 00:06:17,452
the Counter component from App.js.

87
00:06:24,372 --> 00:06:31,082
And of course we'll do export
default Counter.

88
00:06:31,082 --> 00:06:37,299
To fix the error let's import
Counter in the Player component.

89
00:06:37,299 --> 00:06:42,695
Do import Counter from counter.

90
00:06:42,695 --> 00:06:44,130
It looks like I misspelled Counter.

91
00:06:44,130 --> 00:06:45,261
Let me fix that.

92
00:06:49,907 --> 00:06:53,910
One nice feature about Visual Studio Code
is that it gives you a prompt to update

93
00:06:53,910 --> 00:06:54,892
all your imports.

94
00:06:54,892 --> 00:06:58,470
So I'm gonna click that,
and it did it for me.

95
00:06:58,470 --> 00:06:59,560
Nice.

96
00:06:59,560 --> 00:07:01,920
So let's save this and
navigate back to the browser.

97
00:07:01,920 --> 00:07:04,550
Once we reload the page,
we can see the error is gone.

98
00:07:08,370 --> 00:07:11,380
Now we're left with just
the App component in App.js.

99
00:07:12,490 --> 00:07:15,577
This is our main component which
holds the players state and

100
00:07:15,577 --> 00:07:17,530
the handleRemovePlayer function.

101
00:07:19,640 --> 00:07:22,495
As your app grows in complexity and
you create more and

102
00:07:22,495 --> 00:07:26,938
more components, bringing each module
into its own self contained functionality

103
00:07:26,938 --> 00:07:30,880
will help you spend a lot less time
figuring out what the app does.

104
00:07:30,880 --> 00:07:34,934
And letting you focus more on what your
React application should look like at any

105
00:07:34,934 --> 00:07:35,730
given moment.