1
00:00:00,330 --> 00:00:00,600
OK.

2
00:00:01,080 --> 00:00:05,820
And the first thing that I want to do is to set up a React application.

3
00:00:06,600 --> 00:00:12,270
And the way we'll do that will create a clean folder in the road here.

4
00:00:12,480 --> 00:00:16,379
So right next to the read me will open up the terminal.

5
00:00:16,680 --> 00:00:22,860
Now, technically, you can do it using your computer terminal, but in my case, I'm going to use the

6
00:00:22,860 --> 00:00:26,670
integrated one, the one that is available in a visual studio code.

7
00:00:27,120 --> 00:00:29,070
We want to navigate to the folder.

8
00:00:29,100 --> 00:00:29,910
We're just grid.

9
00:00:30,270 --> 00:00:37,800
So see the client and that will create a boilerplate React application by running and perks.

10
00:00:38,250 --> 00:00:40,470
And the command is Create React app.

11
00:00:40,740 --> 00:00:46,050
And then we go with Dart, which essentially just means that the name is going to be exactly the same

12
00:00:46,440 --> 00:00:48,750
as the folder where we were working.

13
00:00:48,750 --> 00:00:53,280
And so in our case now it is going to be a client now that will take a little bit of time.

14
00:00:53,610 --> 00:00:57,960
So most likely, I will pass the video while the install takes place.

15
00:00:58,470 --> 00:01:03,450
And then once I'm done, I'm going to set up error and browser side by side.

16
00:01:03,750 --> 00:01:10,560
That is usually my preference as I'm working, so I where I can show you the immediate things on a small

17
00:01:10,560 --> 00:01:16,170
screen and then if I ever need to showcase something on a big screen, I can just navigate here as well.

18
00:01:16,650 --> 00:01:21,480
And then lastly, I'll show you where I want you to copy and paste, and I'll talk about why it's so

19
00:01:21,480 --> 00:01:21,990
important.

20
00:01:22,640 --> 00:01:25,290
The assets from the complete project.

21
00:01:25,590 --> 00:01:29,130
So let's get cracking on the first thing.

22
00:01:29,130 --> 00:01:31,020
Like I said, I want to create a folder.

23
00:01:31,560 --> 00:01:36,660
I'm going to call this client on line open terminal the integrated one.

24
00:01:37,200 --> 00:01:39,870
The shortcut is control and tilde.

25
00:01:40,380 --> 00:01:43,440
And then we want to go here with City Client.

26
00:01:43,440 --> 00:01:46,050
So now we're navigating through that folder.

27
00:01:46,940 --> 00:01:55,220
And once we're here, I said the commanders NPCs create React app, and no, which essentially is going

28
00:01:55,220 --> 00:01:58,850
to set up that boilerplate React application.

29
00:01:59,290 --> 00:02:02,210
And like I mentioned previously, this is going to take a little bit of time.

30
00:02:02,210 --> 00:02:07,850
So I will stop the video on all resume once everything is up and running.

31
00:02:08,150 --> 00:02:14,090
And as a quick side note, if you get this error while running, NPCs create React app.

32
00:02:14,480 --> 00:02:21,890
One of the possible solutions is to add later to the command so the entire command you're looking for

33
00:02:22,280 --> 00:02:33,770
is going to be and B, X or Y create React app and you want to add app and latest and whatever the name

34
00:02:33,770 --> 00:02:34,470
of the project.

35
00:02:34,490 --> 00:02:37,430
So in my case, I'm just going to go with project name.

36
00:02:37,640 --> 00:02:42,840
So if you get this error, try running this command instead.

37
00:02:43,310 --> 00:02:46,760
And once you do that, everything should work as expected.

38
00:02:46,910 --> 00:02:53,180
And once we have our React application, plesch think I forgot to add one more step where essentially

39
00:02:53,180 --> 00:02:55,010
we want to open up the dev server.

40
00:02:55,400 --> 00:03:00,410
And if we take a look at the package JSON, the command is npm start.

41
00:03:00,440 --> 00:03:04,700
So let me add that intrigued me where I'll go with npm start.

42
00:03:04,880 --> 00:03:10,610
And then since I'm already in a client, what I can simply do is just type and PM start.

43
00:03:10,820 --> 00:03:13,640
So now we're spinning up the def server.

44
00:03:13,910 --> 00:03:16,950
And like I said, I'm going to set them up side by side.

45
00:03:16,970 --> 00:03:20,750
Now you don't have to, but I already explained my reasoning for that.

46
00:03:21,140 --> 00:03:24,200
So let me make this one smaller for now.

47
00:03:24,950 --> 00:03:26,780
The same is going to be with this one.

48
00:03:28,190 --> 00:03:31,460
And I'm just going to set them side by side now, this is a Mac thing.

49
00:03:32,000 --> 00:03:36,710
So this has nothing to do with Visual Studio code or anything like that.

50
00:03:37,280 --> 00:03:39,200
So we'll set them side by side.

51
00:03:39,590 --> 00:03:44,630
Now there's a bunch of boilerplate code which will effectively remove in the following videos.

52
00:03:45,170 --> 00:03:49,100
And the last thing that I actually want to do here is get those assets.

53
00:03:49,430 --> 00:03:56,090
Now it's very important that you copy and paste because what you need to keep in mind that the project,

54
00:03:56,090 --> 00:03:59,270
the complete project, is still using those resources.

55
00:03:59,930 --> 00:04:07,130
So if you'll just go here, take the assets, basically remove them and place it in your current project.

56
00:04:07,160 --> 00:04:07,410
Yeah.

57
00:04:07,760 --> 00:04:13,700
Everything is going to work in the current project, but if you ever try to spin up the complete one?

58
00:04:14,210 --> 00:04:15,980
Well, there's going to be some bugs.

59
00:04:16,430 --> 00:04:20,060
So what I want you to do is navigate to the complete project.

60
00:04:20,089 --> 00:04:21,649
Again, we're looking for a client.

61
00:04:22,100 --> 00:04:24,530
Then more specifically, we're looking for source.

62
00:04:24,860 --> 00:04:25,910
And then the assets.

63
00:04:26,180 --> 00:04:32,120
So in my case, I'm going to copy this folder and then we want to navigate back to our current project.

64
00:04:32,390 --> 00:04:36,740
So my guess job for that client and then the source.

65
00:04:37,040 --> 00:04:38,540
And then just based the folder.

66
00:04:39,020 --> 00:04:42,110
So now I have my assets in my project.

67
00:04:42,230 --> 00:04:49,070
Again, very, very important that you leave the assets still in the complete one if you ever want to

68
00:04:49,310 --> 00:04:51,350
spin up the final project.

69
00:04:51,530 --> 00:04:56,540
So in my case, I'm just going to double check now in the source I should have assets.

70
00:04:56,990 --> 00:05:04,340
And if you have everything in place, same as me, then we can move on to the next step, which is going

71
00:05:04,340 --> 00:05:08,750
to be cleaning out of the boilerplate code in our React application.