1
00:00:01,050 --> 00:00:06,240
In the last section we installed no yes on our local machine we're now going to install a tool called

2
00:00:06,270 --> 00:00:09,560
create re-act up that's going to be used to generate a new project.

3
00:00:09,750 --> 00:00:11,500
So let's start that up right away.

4
00:00:11,640 --> 00:00:17,580
I'm going to change on over to my terminal and I'm going to run the command NPM install as she creates

5
00:00:17,670 --> 00:00:20,760
dash re-act dash app like so.

6
00:00:21,000 --> 00:00:25,220
Well go ahead and run it now on my machine it's going to install very quickly on yours.

7
00:00:25,230 --> 00:00:29,400
It might take a couple of seconds if you're installing this for the first time on it.

8
00:00:29,400 --> 00:00:33,570
Take a quick little pause here to tell you a little bit about this command that we just executed because

9
00:00:33,570 --> 00:00:37,740
we're going to run commands like that very frequently throughout this course.

10
00:00:37,740 --> 00:00:38,080
All right.

11
00:00:38,100 --> 00:00:38,650
Here we go.

12
00:00:39,410 --> 00:00:45,780
To the first word on there was NPM technically or I should say officially NPM doesn't actually stand

13
00:00:45,780 --> 00:00:50,100
for anything but you can imagine that it stands for Noad package manager.

14
00:00:50,250 --> 00:00:54,530
When I say officially it's because the project itself says that NPM doesn't stand for anything.

15
00:00:54,530 --> 00:01:00,300
But again it stands for node package manager the node package manager can be used to install tons of

16
00:01:00,300 --> 00:01:05,820
different open source javascript packages on to your local computer to power projects that you are putting

17
00:01:05,820 --> 00:01:06,530
together.

18
00:01:06,900 --> 00:01:12,690
In this case we reached out to NPM to download a package called create re-act up and install it on our

19
00:01:12,690 --> 00:01:19,840
local computer the NPM command or the NPM program has many different sub commands associated with it.

20
00:01:19,900 --> 00:01:26,690
In this case we wanted to install a package so we reference the install subcommand after that.

21
00:01:26,700 --> 00:01:29,250
We then put in the dash g flag.

22
00:01:29,580 --> 00:01:33,910
This flag indicates that we want to install this package globally on our computer.

23
00:01:33,960 --> 00:01:39,750
We will very frequently use the dashi flag anytime that we are installing a command line tool or essentially

24
00:01:39,750 --> 00:01:42,990
some program that we want to build to run from our terminal.

25
00:01:42,990 --> 00:01:47,490
We are going to also see what happens when we install things without the dashi flag later on.

26
00:01:47,550 --> 00:01:50,190
But right now we're just going to use just g.

27
00:01:50,400 --> 00:01:53,430
And then finally we list out the name of the package that we wanted to install.

28
00:01:53,430 --> 00:01:55,360
The name was create up.

29
00:01:55,470 --> 00:02:01,570
This is a very popular package that is used to generate new Riak projects so now that we've installed

30
00:02:01,570 --> 00:02:04,370
this thing we can use it to generate a new project.

31
00:02:04,650 --> 00:02:08,890
I'm going to make sure that I am inside of a workspace directory of sorts and then I'll run the command

32
00:02:08,890 --> 00:02:13,870
to create re-act app and then the name of the project that it wants to generate.

33
00:02:13,870 --> 00:02:17,960
In our case we are going to learn more about exactly how GSX works.

34
00:02:17,980 --> 00:02:23,380
So I'm going to call my project simply GSX and I'll hit enter and that's going to start to generate

35
00:02:23,380 --> 00:02:26,130
my project.

36
00:02:26,170 --> 00:02:30,490
Now before we move on a real quick note I want to mention.

37
00:02:30,490 --> 00:02:35,220
So you're going to find in this course there are many different ways to do just about everything.

38
00:02:35,290 --> 00:02:40,540
We've already seen that we could write a tiny re-act up over on code pen and clearly we can also write

39
00:02:40,570 --> 00:02:44,850
a re-act up on our local machine as well as much as I possibly can throughout this course.

40
00:02:44,860 --> 00:02:49,480
I'm going to highlight some of the different ways that some people choose to go through different steps

41
00:02:49,750 --> 00:02:54,170
and doing that NPM install of create re-act up and then using it to generate a project.

42
00:02:54,220 --> 00:02:58,060
It's already one location where some people do things a little bit differently.

43
00:02:58,060 --> 00:03:02,920
If you go and read the Create react up official documentation they're going to show you a slightly different

44
00:03:02,920 --> 00:03:06,390
process for generating a project than what I just showed you.

45
00:03:06,400 --> 00:03:11,530
So in the official documentation you're going to see that they say that you need to run X create react

46
00:03:11,530 --> 00:03:13,410
up and then the name of the project.

47
00:03:13,570 --> 00:03:18,270
And you can run this command without having to first go through the NPM install.

48
00:03:18,280 --> 00:03:23,810
So essentially if you take this route right here you run one command instead of two.

49
00:03:23,830 --> 00:03:28,540
Now the only reason I didn't show you this alternate fashion even though it's slightly technically easier

50
00:03:28,840 --> 00:03:35,230
is that X is a command line tool that only started to be installed with versions of NPM from version

51
00:03:35,230 --> 00:03:36,830
five point two and higher.

52
00:03:37,030 --> 00:03:44,170
And it is entirely possible and even incredibly likely that you have a version of NPM earlier than 5.2

53
00:03:44,170 --> 00:03:45,200
on your computer.

54
00:03:45,250 --> 00:03:49,390
So I could show you this way but it's very likely that you would have just very quickly ran into an

55
00:03:49,390 --> 00:03:50,410
error.

56
00:03:50,410 --> 00:03:55,150
Now if you want to you can always update your version of NPM and node and then you can generate a project

57
00:03:55,150 --> 00:03:57,350
this way to see you know at the end of the day.

58
00:03:57,440 --> 00:04:02,480
There's absolutely no effective difference between the method I just showed to you and using an.

59
00:04:02,560 --> 00:04:07,000
It's essentially just the difference between running a one command or two.

60
00:04:07,000 --> 00:04:07,440
All right.

61
00:04:07,600 --> 00:04:11,740
So if I flip back or at my terminal it looks like my project has finished installing.

62
00:04:11,860 --> 00:04:13,580
Now you'll notice a bunch of text here.

63
00:04:13,630 --> 00:04:17,720
If I scroll up a little bit you might see something like this right here.

64
00:04:17,720 --> 00:04:22,950
Something that says added seventeen hundred and eighty two packages.

65
00:04:22,980 --> 00:04:27,260
So in order to generate this project and write a time you react application.

66
00:04:27,260 --> 00:04:32,620
We had to install 7500 separate packages onto our local computer.

67
00:04:32,640 --> 00:04:36,610
Now that might immediately seem a little bit shocking if you think about it.

68
00:04:36,620 --> 00:04:45,020
Back on Copen a second ago we created a tiny re-act application after only adding in exactly to library

69
00:04:45,020 --> 00:04:45,410
files.

70
00:04:45,410 --> 00:04:47,730
Remember research for react and react on.

71
00:04:47,750 --> 00:04:49,490
And we added them into our Koeppen.

72
00:04:49,700 --> 00:04:53,300
So why were we able to get away with only two files over there.

73
00:04:53,300 --> 00:04:57,850
But on our local machine we have to install 17:00 Sepher packages.

74
00:04:58,070 --> 00:04:59,770
Well let's take a quick pause right here.

75
00:04:59,810 --> 00:05:03,740
When we come back the next section I'm going to tell you why we had to install so many packages and

76
00:05:03,740 --> 00:05:07,820
we'll help you also understand why we're using this create backed up tool at all.

77
00:05:07,850 --> 00:05:10,040
So a quick pause and I'll see you in just a minute.