WEBVTT

1
00:00:00.360 --> 00:00:01.610
Now that we have GitHub

2
00:00:01.610 --> 00:00:03.870
and our version control all set up,

3
00:00:03.870 --> 00:00:06.640
in this guide, we're gonna start walking through

4
00:00:06.640 --> 00:00:07.970
the file system.

5
00:00:07.970 --> 00:00:12.300
So this is gonna be where we examine and dissect,

6
00:00:12.300 --> 00:00:13.860
hence the name of the course,

7
00:00:13.860 --> 00:00:16.340
each element in the application.

8
00:00:16.340 --> 00:00:21.090
This is a really good foundational way for learning

9
00:00:21.090 --> 00:00:23.690
what makes a React application.

10
00:00:23.690 --> 00:00:26.010
And the more that you understand

11
00:00:26.010 --> 00:00:27.780
what we're gonna walk through,

12
00:00:27.780 --> 00:00:31.760
the easier it's gonna be to actually learn how React works

13
00:00:31.760 --> 00:00:33.740
and how you can build applications.

14
00:00:33.740 --> 00:00:35.410
So let's get started.

15
00:00:35.410 --> 00:00:39.720
I have right here, I have the code editor open,

16
00:00:39.720 --> 00:00:43.850
and I have the browser at localhost 3000.

17
00:00:43.850 --> 00:00:48.600
So right now I'm running the application with our server.

18
00:00:48.600 --> 00:00:51.330
So any changes that I make here

19
00:00:51.330 --> 00:00:54.780
are gonna be reflected on the right hand side.

20
00:00:54.780 --> 00:00:56.770
So I'm gonna open up the file system

21
00:00:56.770 --> 00:01:01.100
and we've already talked a little bit about node modules.

22
00:01:01.100 --> 00:01:03.900
But now we're gonna dive into it much more.

23
00:01:03.900 --> 00:01:06.180
So I'm gonna open this up.

24
00:01:06.180 --> 00:01:10.920
And if you scroll down, you'll see you have a full list,

25
00:01:10.920 --> 00:01:14.060
you might have 1,000 or so directories.

26
00:01:14.060 --> 00:01:16.520
So each one of these

27
00:01:16.520 --> 00:01:17.930
node modules

28
00:01:17.930 --> 00:01:19.940
is essentially

29
00:01:19.940 --> 00:01:22.340
just a set of JavaScript code.

30
00:01:22.340 --> 00:01:25.100
So that's the number one takeaway

31
00:01:25.100 --> 00:01:27.120
I want you to have with this video

32
00:01:27.120 --> 00:01:30.560
is understanding that a node module,

33
00:01:30.560 --> 00:01:34.250
even though it may look massive, and kind of scary,

34
00:01:34.250 --> 00:01:35.140
it's really not.

35
00:01:35.140 --> 00:01:39.460
It's just someone else's JavaScript code that they wrote.

36
00:01:39.460 --> 00:01:43.260
And you have now put it right in your project.

37
00:01:43.260 --> 00:01:46.020
So working with a node module

38
00:01:46.020 --> 00:01:48.620
shouldn't really feel any different

39
00:01:48.620 --> 00:01:53.620
than if you simply copied and pasted somebody's code online,

40
00:01:53.640 --> 00:01:56.280
and you created a file in your project

41
00:01:56.280 --> 00:01:57.740
and you just pasted it in there.

42
00:01:57.740 --> 00:01:59.290
It's the same concept.

43
00:01:59.290 --> 00:02:02.350
The difference is with a node module,

44
00:02:02.350 --> 00:02:05.360
that developer is able to post updates.

45
00:02:05.360 --> 00:02:07.680
And they're able to add new features

46
00:02:07.680 --> 00:02:11.310
and add bug fixes and things like that.

47
00:02:11.310 --> 00:02:13.900
And so every time they do that,

48
00:02:13.900 --> 00:02:17.720
you can actually update your own node module,

49
00:02:17.720 --> 00:02:21.420
or you can update all of the node modules that you have.

50
00:02:21.420 --> 00:02:25.500
So you could move up to the next version of React,

51
00:02:25.500 --> 00:02:28.270
or you can use the new version of React Router

52
00:02:28.270 --> 00:02:31.290
if it has some feature that you want to implement.

53
00:02:31.290 --> 00:02:34.110
So at the end of the day, that's what a node module is.

54
00:02:34.110 --> 00:02:37.310
It is simply someone else's JavaScript code

55
00:02:37.310 --> 00:02:39.640
that you placed in your application,

56
00:02:39.640 --> 00:02:41.410
and that's what helps it run.

57
00:02:41.410 --> 00:02:43.180
So let's scroll down,

58
00:02:43.180 --> 00:02:45.720
I'm gonna go down to the

59
00:02:45.720 --> 00:02:47.800
React Router

60
00:02:48.730 --> 00:02:50.920
file or directory.

61
00:02:50.920 --> 00:02:52.440
So it's quite a bit down here.

62
00:02:52.440 --> 00:02:53.950
And here we go, we have a couple ones.

63
00:02:53.950 --> 00:02:57.280
We have react router and react router dom.

64
00:02:57.280 --> 00:03:00.130
I'm gonna click on one of these react router dom.

65
00:03:00.130 --> 00:03:03.420
And I'm just gonna start clicking on some of these files.

66
00:03:03.420 --> 00:03:08.350
So as you can see, it has a file called Browser Router.

67
00:03:08.350 --> 00:03:11.800
And you can see that it simply is requiring

68
00:03:11.800 --> 00:03:12.930
another piece of code.

69
00:03:12.930 --> 00:03:15.450
It's just requiring this function,

70
00:03:15.450 --> 00:03:19.050
and then it's calling it, that's called Browser Router.

71
00:03:19.050 --> 00:03:20.520
So, you could go

72
00:03:20.520 --> 00:03:23.540
and you could start looking through each one of these.

73
00:03:23.540 --> 00:03:25.010
So you could click on modules.

74
00:03:25.010 --> 00:03:28.690
And you can see we have this Browser Router module here.

75
00:03:28.690 --> 00:03:31.660
And you can go and start looking at the code.

76
00:03:31.660 --> 00:03:36.170
This is simply a React file, it's some React code,

77
00:03:36.170 --> 00:03:38.870
you're gonna be writing code very similar to this

78
00:03:38.870 --> 00:03:40.960
as we start going through the course.

79
00:03:40.960 --> 00:03:45.910
So you can come here and see okay, he created a class

80
00:03:45.910 --> 00:03:50.700
and he's bringing in history, he's using a render function

81
00:03:50.700 --> 00:03:53.060
and then in some of this code may look different

82
00:03:53.060 --> 00:03:54.440
because this is very advanced.

83
00:03:54.440 --> 00:03:56.500
Typically, most node modules

84
00:03:56.500 --> 00:03:59.290
are written by pretty experienced developers.

85
00:03:59.290 --> 00:04:00.450
You're gonna see later on

86
00:04:00.450 --> 00:04:03.410
I'm gonna show you how you can build your own node module,

87
00:04:03.410 --> 00:04:05.400
which will also hopefully help

88
00:04:05.400 --> 00:04:07.980
kind of make it a little bit less scary

89
00:04:07.980 --> 00:04:12.480
to see exactly how it works and how you can create your own.

90
00:04:12.480 --> 00:04:13.830
But for right now,

91
00:04:13.830 --> 00:04:17.900
I really simply want you to walk away from this guide,

92
00:04:17.900 --> 00:04:20.550
realizing that node modules,

93
00:04:20.550 --> 00:04:22.950
they're just someone else's JavaScript code

94
00:04:22.950 --> 00:04:25.170
that gives your own application

95
00:04:25.170 --> 00:04:27.260
some additional functionality.

96
00:04:27.260 --> 00:04:32.160
So I recommend for you to click around in your node modules.

97
00:04:32.160 --> 00:04:35.880
Start to look at some of the ones that are there,

98
00:04:35.880 --> 00:04:37.510
look at some of the JavaScript code.

99
00:04:37.510 --> 00:04:38.600
And it's gonna start

100
00:04:38.600 --> 00:04:41.690
to hopefully make you a little more familiar

101
00:04:41.690 --> 00:04:45.000
with how to write your own code.

102
00:04:45.000 --> 00:04:47.520
Don't worry if it doesn't make a lot of sense right now,

103
00:04:47.520 --> 00:04:49.690
if you're still in the early stages

104
00:04:49.690 --> 00:04:52.330
of learning how JavaScript works,

105
00:04:52.330 --> 00:04:55.040
then it's gonna be very unfamiliar,

106
00:04:55.040 --> 00:05:00.030
but it's gonna start helping you to build your mental model

107
00:05:00.030 --> 00:05:01.880
for how to be a developer.

108
00:05:01.880 --> 00:05:05.820
And it really helps to see the way other people write code.

109
00:05:05.820 --> 00:05:08.580
So I recommend to spend some time

110
00:05:08.580 --> 00:05:11.250
simply going through a few of these.

111
00:05:11.250 --> 00:05:14.670
And then in the next guide, what we're going to do

112
00:05:14.670 --> 00:05:19.670
is we are going to make our way down to the SRC directory.

113
00:05:20.130 --> 00:05:21.290
And that's a really cool

114
00:05:21.290 --> 00:05:23.680
and that's the one we're gonna be working with

115
00:05:23.680 --> 00:05:26.220
probably about 95% of the course.

116
00:05:26.220 --> 00:05:30.113
So that's gonna be what we start covering in the next video.

Resources

• Source code