1
00:00:00,910 --> 00:00:06,570
In the last section we generated a new project using create react up after Gendry the project successfully.

2
00:00:06,580 --> 00:00:10,750
We've been schooled up a little bit and saw a message right here that said that we had to install 7500

3
00:00:10,750 --> 00:00:12,730
separate packages in this video.

4
00:00:12,730 --> 00:00:18,130
I want to start to understand why we had to install so many packages just to run a re-act application

5
00:00:18,160 --> 00:00:20,730
and build one on our local computer.

6
00:00:20,730 --> 00:00:24,350
All right so we're going to take a look at a couple of different diagrams really quickly.

7
00:00:24,460 --> 00:00:29,560
So you and I just use create react up to generate a new re-act project inside this track projects are

8
00:00:29,560 --> 00:00:33,920
a ton of different dependencies that are going to help us properly write our application.

9
00:00:34,240 --> 00:00:38,920
I want to focus on one particular dependency because it's going to help you understand why we had to

10
00:00:38,920 --> 00:00:40,330
install so much software.

11
00:00:40,530 --> 00:00:44,590
So the name of the dependency that I want to focus on is Babel right here.

12
00:00:44,590 --> 00:00:47,050
Now the term babbel might be familiar to you.

13
00:00:47,080 --> 00:00:52,420
I'm going to give you a quick overview on what babbel is and why we use it and why it's included inside

14
00:00:52,420 --> 00:00:54,610
of our accrete racked up installation.

15
00:00:55,030 --> 00:00:55,790
All right.

16
00:00:55,900 --> 00:01:02,290
So quick little asides here as you've been learning javascript over the last couple months weeks years

17
00:01:02,290 --> 00:01:07,470
or whatever it might be you've probably been learning a version of javascript called yes 5.

18
00:01:07,590 --> 00:01:13,380
And chances are you've also picked up a couple of features out of something called Yes 2015 as well.

19
00:01:13,830 --> 00:01:19,000
Five and yes 2015 15s are references to a version of javascript.

20
00:01:19,000 --> 00:01:25,040
Each version of Javascript has a very particular set of features and syntax of Able to it.

21
00:01:25,130 --> 00:01:27,100
There are different versions of this.

22
00:01:27,140 --> 00:01:30,180
Yes spec for every year after 2015.

23
00:01:30,380 --> 00:01:33,710
So again chances are you've learned a little bit about yes 2015.

24
00:01:33,720 --> 00:01:40,640
There's also an E.S. 2016 17 18 19 and so on and every one of these different features or different

25
00:01:40,640 --> 00:01:45,590
versions has some number of new features and upgrades to the javascript language.

26
00:01:45,590 --> 00:01:50,570
Now the important thing to understand here is that these updates to the language are generally for the

27
00:01:50,570 --> 00:01:53,050
benefit of developers like you and I.

28
00:01:53,120 --> 00:02:00,500
In other words if we can make use of say yes 20:17 javascript and use all the features in here and previous

29
00:02:00,500 --> 00:02:05,630
years as well we're going to have a really good time because these newer versions of javascript have

30
00:02:05,630 --> 00:02:12,050
new syntax new features available that makes your life in my life as developers a lot easier.

31
00:02:12,290 --> 00:02:17,240
So as much as possible you and I want to run these newer versions of javascript.

32
00:02:17,470 --> 00:02:22,470
However there's a little bit of an issue with this.

33
00:02:22,610 --> 00:02:27,960
So the javascript that you and I write has to eventually be executed on our users browser member.

34
00:02:27,980 --> 00:02:32,390
We shut down a javascript file to they're brought to their browser and the browser has to execute the

35
00:02:32,390 --> 00:02:34,250
javascript inside there.

36
00:02:34,280 --> 00:02:41,240
Now certain browsers are not always held always 100 percent up to date at present just about every single

37
00:02:41,240 --> 00:02:46,020
modern browser out there has excellent support for S-5 javascript and other words.

38
00:02:46,040 --> 00:02:47,170
If you and I write.

39
00:02:47,210 --> 00:02:52,760
Yes five javascript code we can send it out to just about any version of browser and that code is going

40
00:02:52,760 --> 00:02:54,800
to be executed just fine.

41
00:02:54,800 --> 00:02:56,690
The same is almost true of.

42
00:02:56,720 --> 00:02:58,310
Yes 2015 as well.

43
00:02:58,340 --> 00:03:04,130
All the new updates to javascript included in yes 2015 can generally be executed in handled by every

44
00:03:04,130 --> 00:03:11,780
modern browser but as we start to look at later years like 20 16 17 18 19 and 20 not all browsers and

45
00:03:11,780 --> 00:03:17,090
barely any browsers for more recent years have support for the changes to javascript that are included

46
00:03:17,120 --> 00:03:18,350
in those years.

47
00:03:18,440 --> 00:03:20,960
So we're essentially in a little bit of a conflict here.

48
00:03:21,050 --> 00:03:26,690
On the one hand you and I want to use later years or later versions because they make our lives easy

49
00:03:26,690 --> 00:03:27,680
as developers.

50
00:03:27,800 --> 00:03:33,050
But on the flip side our users cannot actually run the code that we're writing because their browsers

51
00:03:33,050 --> 00:03:34,800
do not support it.

52
00:03:34,820 --> 00:03:41,220
So in order to get around this we make use of a tool called Babel babble is a command line tool that

53
00:03:41,220 --> 00:03:46,070
can take any version of javascript and spit out a newer version.

54
00:03:46,110 --> 00:03:51,150
So this right here is a diagram of what might happen if we don't use a tool like Babel you and I might

55
00:03:51,150 --> 00:03:56,520
write some yes 20:15 code inside of some javascript files and then send it down to some browser with

56
00:03:56,520 --> 00:03:57,470
no guaranteed.

57
00:03:57,480 --> 00:03:58,960
Yes 20:15 support.

58
00:03:59,220 --> 00:04:04,380
If we did that our code might completely fail to run on that user's browser and they probably won't

59
00:04:04,380 --> 00:04:07,020
see any content when they visit our Web page.

60
00:04:07,050 --> 00:04:10,930
They'll probably just see a completely blank page or something like that.

61
00:04:10,950 --> 00:04:18,660
So with babbel you and I write our Yes 2015 or 2016 2017 and so on code and then we feed it into this

62
00:04:18,660 --> 00:04:26,350
command line tool called babbel and babbel spits out a E.S. 5 version of our code or a version of our

63
00:04:26,350 --> 00:04:32,360
javascript code that is going to be safely executed on just about any browser in existence.

64
00:04:32,590 --> 00:04:34,400
So that's the job of Babel.

65
00:04:34,600 --> 00:04:37,820
And like I said Babel is included by default.

66
00:04:37,820 --> 00:04:44,290
Anytime that we generate a new re-act project internally Babolat consists of a tremendous number of

67
00:04:44,290 --> 00:04:45,510
different packages.

68
00:04:45,690 --> 00:04:51,400
And so that at least partially explains why we're seeing this very large number of packages installed

69
00:04:51,430 --> 00:04:53,650
when we generated our project.

70
00:04:53,650 --> 00:04:57,130
Now there's definitely other dependencies inside this project as well.

71
00:04:57,220 --> 00:05:02,260
Other things such as web pack and well-packed dev server will talk about the purpose of these other

72
00:05:02,260 --> 00:05:04,790
files over time or these other dependencies over time.

73
00:05:04,840 --> 00:05:09,580
But right now I just want to understand that we have these different dependencies inside of our project

74
00:05:09,730 --> 00:05:14,440
and that's why you're seeing that tremendous number of dependencies or the large count of them when

75
00:05:14,440 --> 00:05:16,410
we've just generated our project.

76
00:05:16,740 --> 00:05:20,740
OK so now that we understand a little bit more about create re-act up well let's continue in the next

77
00:05:20,740 --> 00:05:24,650
section and we're going to start looking at the contents of the project that we just generated.