1
00:00:00,710 --> 00:00:05,510
Oh, yeah, it's time to create our first React project now.

2
00:00:05,840 --> 00:00:08,150
I have excellent news for you.

3
00:00:08,960 --> 00:00:12,890
You see, up until now, we've created everything from scratch ourselves.

4
00:00:13,550 --> 00:00:19,640
But you see React is one of the most popular tools out there for a web developer.

5
00:00:20,480 --> 00:00:21,650
So what does that mean?

6
00:00:21,650 --> 00:00:27,950
That means that there's an entire community of developers of really, really smart people that want

7
00:00:27,950 --> 00:00:34,160
to make react, a really good experience, a really good way for you to get started super fast and build

8
00:00:34,160 --> 00:00:36,860
projects, beautiful projects right away.

9
00:00:37,520 --> 00:00:42,170
Let's see how a normal developer would start a React project.

10
00:00:42,470 --> 00:00:50,240
Now we can do what we've been doing up until now, which is to npm install react right.

11
00:00:50,270 --> 00:00:55,970
We create a project folder, we install the React package and we are able to start using it.

12
00:00:56,980 --> 00:00:59,410
But there's something even better than that.

13
00:01:00,010 --> 00:01:02,380
And it's called Create React app.

14
00:01:02,620 --> 00:01:05,379
It's actually on their documentation page for React.

15
00:01:05,920 --> 00:01:11,200
It's a comfortable environment for learning, react and is the best way to start building a new single

16
00:01:11,200 --> 00:01:12,520
page application.

17
00:01:12,850 --> 00:01:15,580
It's the recommended way to start with react.

18
00:01:16,090 --> 00:01:20,860
And we're going to see over the next couple of videos why this is such an awesome tool.

19
00:01:21,930 --> 00:01:28,560
As a matter of fact, it has its own dedicated page, set up a modern web app by running one command.

20
00:01:29,310 --> 00:01:30,180
Sounds pretty nice.

21
00:01:30,660 --> 00:01:36,810
It essentially allows us to install a whole bunch of packages instead of doing npm install a thousand

22
00:01:36,810 --> 00:01:41,070
times instead of sending up our developer environment, setting up our first page.

23
00:01:41,370 --> 00:01:48,030
It does everything for you, and this is created by really, really smart developers that have worked

24
00:01:48,030 --> 00:01:54,540
on React that are on the core React team so that this way, you know you're using the best tools, the

25
00:01:54,540 --> 00:01:59,320
latest tools and using the best practices when creating a React app.

26
00:01:59,730 --> 00:02:05,100
And this gets updated constantly, so you know that you're using the best of the best.

27
00:02:06,130 --> 00:02:12,940
Now, if we go to the documentation, we see that we simply use this command and create React app and

28
00:02:12,940 --> 00:02:14,170
then the name of your app.

29
00:02:14,380 --> 00:02:15,820
So let's copy that.

30
00:02:16,900 --> 00:02:25,040
And let me just explain the command for you now before you might be wondering, what does NPC's NPCs?

31
00:02:25,420 --> 00:02:26,590
We've never seen that before.

32
00:02:26,920 --> 00:02:34,780
I mean, back in the day, what we would do is, say 21:00 Install Dash G, Create, React app, install,

33
00:02:34,780 --> 00:02:41,350
create, React app globally so we can run the Create React app command from our command line.

34
00:02:42,450 --> 00:02:46,890
But doing an npm install DSG is a little messy.

35
00:02:47,190 --> 00:02:52,080
And also, you have that thing where you have to run sudo if you don't have enough access.

36
00:02:52,350 --> 00:02:52,680
Well.

37
00:02:54,010 --> 00:03:00,610
Since 21:00, 5.2 NPCs actually comes out of the box for you.

38
00:03:01,240 --> 00:03:09,970
So, for example, let me just clear this if I do 9pm Dash V, your version should be higher than this.

39
00:03:10,270 --> 00:03:15,670
And if your version is higher than five point two, which trust me, if you're watching this video now

40
00:03:15,670 --> 00:03:18,850
five point two is an old version, you definitely don't have it.

41
00:03:18,930 --> 00:03:25,150
Otherwise, you can always upgrade, so NPCs actually comes out of the box already.

42
00:03:25,330 --> 00:03:28,060
So again, if we copy this oop.

43
00:03:34,030 --> 00:03:37,120
Can use NTPC's, create React app and my app.

44
00:03:37,270 --> 00:03:42,310
Actually, let me cancel that, let's name our project because we want to have a proper project, name

45
00:03:42,700 --> 00:03:46,810
robo friends and I'm going to create the React app.

46
00:03:47,200 --> 00:03:52,240
Now, while this is loading, you can see it's installing React, React, React scripts.

47
00:03:52,570 --> 00:03:53,860
We're going to talk about that later.

48
00:03:54,670 --> 00:04:00,370
For now, you just need to know that NTPC's is a package runner.

49
00:04:00,400 --> 00:04:05,110
I'm going to leave a resource for you in this video that you can read more about NPCs.

50
00:04:05,440 --> 00:04:13,330
Essentially, what it does is it allows us to run this command of ampm installing globally to create

51
00:04:13,330 --> 00:04:16,839
React app without actually having to install something globally.

52
00:04:18,560 --> 00:04:24,050
While we wait for this to download, let's just find out what Ampex is and what is it?

53
00:04:25,420 --> 00:04:29,200
You know, as developers, we're really good at Googling, right?

54
00:04:29,590 --> 00:04:30,250
Oh, there you go.

55
00:04:30,280 --> 00:04:31,570
There's an excellent article.

56
00:04:32,980 --> 00:04:34,780
You have been the no package measure.

57
00:04:35,020 --> 00:04:36,310
The package runner.

58
00:04:38,170 --> 00:04:43,300
So it's a Seelye tool whose purpose is to make it easy to install and manage dependencies hosted in

59
00:04:43,300 --> 00:04:44,620
the npm registry.

60
00:04:45,250 --> 00:04:50,590
So it's now very easy to run any sort of nodes based executable that you would normally install.

61
00:04:50,590 --> 00:04:54,700
Vietnam BPM executable means a package that you can execute.

62
00:04:55,150 --> 00:04:55,930
What does that mean?

63
00:04:56,200 --> 00:05:00,550
Well, it's this thing we can execute, create reactor.

64
00:05:01,030 --> 00:05:04,930
Back in the day, we would have done npm installed DSG create React app.

65
00:05:05,230 --> 00:05:12,180
Well, we can execute this create React app command that we would have been able to execute from here

66
00:05:12,190 --> 00:05:18,160
after doing this now, just by using NPCs, just a simplified way of doing things.

67
00:05:18,670 --> 00:05:24,070
So once that's installed, I then go into my folder and then run npm start.

68
00:05:24,310 --> 00:05:25,420
Sounds pretty easy, right?

69
00:05:25,930 --> 00:05:27,280
Let's go back to a terminal.

70
00:05:28,630 --> 00:05:30,910
You see that everything has installed here.

71
00:05:31,510 --> 00:05:39,460
We have ampm start, ampm run build, ampm test, ampm run, eject that we can use as commands.

72
00:05:39,820 --> 00:05:41,980
Well, we can just run and start, right?

73
00:05:41,980 --> 00:05:43,070
So let's go CD.

74
00:05:44,050 --> 00:05:47,140
Wrobel friends, because we want to go into our new project folder.

75
00:05:47,560 --> 00:05:49,900
If I do else here, check that out.

76
00:05:49,900 --> 00:05:55,300
We already have all these things out of the box created for us by Create React app.

77
00:05:55,600 --> 00:06:01,270
We have a no modules folder rimi package that JSON some public and source files folders.

78
00:06:01,540 --> 00:06:03,370
Again, something we'll go over later on.

79
00:06:03,610 --> 00:06:06,160
For now, let's just do ampm start.

80
00:06:07,720 --> 00:06:08,590
Let's see what happens.

81
00:06:09,250 --> 00:06:10,540
Hey, look at that.

82
00:06:10,960 --> 00:06:15,670
Congratulations, you have your very first React app out of the box.

83
00:06:15,720 --> 00:06:16,960
You didn't really do much.

84
00:06:16,990 --> 00:06:21,220
You just installed Create React app, but there's your first app.

85
00:06:21,490 --> 00:06:22,480
Pretty neat, right?

86
00:06:22,510 --> 00:06:23,800
You now have to set up anything.

87
00:06:24,070 --> 00:06:26,890
Create React app takes care of it for you.

88
00:06:28,260 --> 00:06:33,480
So again, if we go to the career, we act up documentation, you can read more about it here.

89
00:06:33,660 --> 00:06:40,110
But the idea is that the best of the best are creating these tools for reactive helpers so that out

90
00:06:40,110 --> 00:06:45,930
of the box you're going to have limiting tank testing already set up again, things that we'll cover

91
00:06:45,930 --> 00:06:46,410
later on.

92
00:06:46,410 --> 00:06:52,050
In the course, you'll see why create React app is useful more and more as we progress the course.

93
00:06:52,080 --> 00:06:54,780
So don't worry, so we have our app.

94
00:06:55,140 --> 00:06:55,950
What do we do now?

95
00:06:56,280 --> 00:06:59,460
Well, we open up our editor and we start.

96
00:07:00,580 --> 00:07:05,800
Evolving this simple react, tap into what we want into robo friends.

97
00:07:06,370 --> 00:07:08,350
So let's start doing that in the next video.