1
00:00:01,840 --> 00:00:03,430
Welcome to the first round of the project.

2
00:00:03,970 --> 00:00:08,740
So now in this video, we'll see how to get started with the reactor setting up the project.

3
00:00:08,740 --> 00:00:15,220
Basically, the first thing you have to do is to create a folder where you want your reactor to reside.

4
00:00:15,670 --> 00:00:21,460
So here I've created a folder in my drive called reactor projects, and we're inside this reactor projects.

5
00:00:21,460 --> 00:00:23,440
I have my folder called resume website.

6
00:00:24,160 --> 00:00:27,760
If you want to know where you are currently, there's a command called pWt.

7
00:00:28,120 --> 00:00:31,690
It will give you the location of your current net activity are located in.

8
00:00:32,440 --> 00:00:32,680
OK.

9
00:00:33,900 --> 00:00:39,480
So this resume website is the name of the folder where I want to keep my reactor project.

10
00:00:40,020 --> 00:00:42,870
So know how to create a reactor project is the question.

11
00:00:43,830 --> 00:00:46,710
There is a simple one line command for that be.

12
00:00:48,350 --> 00:00:48,860
Create.

13
00:00:50,060 --> 00:00:51,170
Racked up.

14
00:00:52,970 --> 00:00:53,810
Space docked.

15
00:00:55,190 --> 00:00:55,580
So.

16
00:00:56,930 --> 00:01:01,490
This will drag around some three to four minutes for running, so I'll click enter and then explain

17
00:01:01,490 --> 00:01:07,130
what this code that basically and B X and B X is a part of npm.

18
00:01:07,460 --> 00:01:10,490
What is and b um, it is known the package manager, right?

19
00:01:11,060 --> 00:01:18,080
So creating the React app means we have to install so many dependencies, so many packages, so many

20
00:01:18,080 --> 00:01:19,580
node modules, every bit.

21
00:01:20,210 --> 00:01:26,600
So instead of installing everything like using multiple codes, we can install all of them with this

22
00:01:26,600 --> 00:01:27,710
single code.

23
00:01:27,980 --> 00:01:29,450
So this is basically a script.

24
00:01:30,170 --> 00:01:36,140
So Create React App is a script developed by Facebook developers, so Facebook is actually working to

25
00:01:36,500 --> 00:01:42,980
develop this react so they don't have this script, which will be helpful to create the project.

26
00:01:43,160 --> 00:01:48,620
So instead of manually installing all the packages and all modules with the help of the script, we

27
00:01:48,620 --> 00:01:54,230
can download everything using a single line and then we access the command that will run the script.

28
00:01:54,230 --> 00:01:56,150
Create React app is the name of the script.

29
00:01:57,510 --> 00:02:00,020
So now what does this doubt means?

30
00:02:00,630 --> 00:02:05,700
So that means we have we want to create the reactor inside the facility itself.

31
00:02:06,180 --> 00:02:09,870
If you want to create another folder instead of all, then you can give the name of the project and

32
00:02:10,140 --> 00:02:11,360
create reactor, presumably.

33
00:02:12,320 --> 00:02:18,290
So since I already have a director here, so to create React app inside the current directory, I'm

34
00:02:18,290 --> 00:02:23,180
giving this dot dot dot first to create this simple, create the product and say, Look, I don't get

35
00:02:23,180 --> 00:02:23,300
it.

36
00:02:23,480 --> 00:02:23,840
That's it.

37
00:02:24,740 --> 00:02:28,910
So now this command will create the React app, which will take a couple of minutes more.

38
00:02:29,300 --> 00:02:33,200
So let's wait for it and we'll come back once the app is created.

39
00:02:38,080 --> 00:02:44,020
So if you get this kind of messages, that means the creation of the reactor, this project is completed,

40
00:02:44,530 --> 00:02:50,260
this happy acting and then some blue kind of text, they're giving a manual to work with the project.

41
00:02:50,980 --> 00:02:58,360
So this will be some widening like deprecated involvement because every time the reactor, people will

42
00:02:58,450 --> 00:03:00,490
keep on adding some new plug ins and everything.

43
00:03:00,490 --> 00:03:01,850
So this is deprecated wanting.

44
00:03:01,850 --> 00:03:02,800
No need to worry about it.

45
00:03:04,330 --> 00:03:10,480
So once you create React app, you can see here inside that incentive directive, you can see the node

46
00:03:10,480 --> 00:03:16,630
modules, all of the known modules on the packages here in the dependencies you can see on the packages

47
00:03:16,870 --> 00:03:21,700
installed and then the main node model package propagation.

48
00:03:22,480 --> 00:03:25,270
So with this, we are installing all the reactor projects.

49
00:03:25,630 --> 00:03:26,740
But how to run it?

50
00:03:27,790 --> 00:03:32,170
So basically to run this project, the command base and stop.

51
00:03:34,120 --> 00:03:43,120
So this NBN stock, when you run the React project on your local post for number three thousand, the

52
00:03:43,120 --> 00:03:46,990
default port number for the local was just three thousand three trained on this project on that three

53
00:03:46,990 --> 00:03:48,490
thousand localhost port number.

54
00:03:49,090 --> 00:03:51,100
So now one thing before it runs.

55
00:03:53,090 --> 00:03:58,760
This the what this reactor developers did is they created a boilerplate template for the reactor project,

56
00:03:58,770 --> 00:04:03,470
so I never trust it will give you some low blow off reactor and then some text and some with background

57
00:04:03,470 --> 00:04:04,730
and some some styling.

58
00:04:05,450 --> 00:04:07,040
So basically, we don't want that right?

59
00:04:07,730 --> 00:04:12,500
See if you can see there is a logo that is revolting and then some text and then some background with

60
00:04:12,500 --> 00:04:13,430
some cases and all.

61
00:04:13,910 --> 00:04:17,600
But we want to start off with the plain white color background.

62
00:04:17,810 --> 00:04:22,100
Nothing, nothing on that line back like simply white paper kind of stuff.

63
00:04:22,890 --> 00:04:29,150
But to do that, we have to basically delete some boilerplate cool and everything right that we have

64
00:04:29,150 --> 00:04:29,450
to delete.

65
00:04:29,450 --> 00:04:36,620
We have to do the cleaning process like the employer starting cleaning process and everything we do

66
00:04:36,620 --> 00:04:36,860
that.

67
00:04:38,820 --> 00:04:39,600
So for that.

68
00:04:40,720 --> 00:04:42,390
You delete these files.

69
00:04:44,380 --> 00:04:45,170
Oh, yeah.

70
00:04:45,370 --> 00:04:47,980
These four friends, you know, one of them.

71
00:04:51,790 --> 00:04:54,910
OK, be careful, otherwise you'll be deleting this public for lots.

72
00:04:57,920 --> 00:05:05,390
So you want to delete only set up Rogers logo report and then build a wall that is actually.

73
00:05:06,500 --> 00:05:10,220
And then he added, and maybe not just you can delete all this boilerplate code.

74
00:05:11,670 --> 00:05:12,810
No need of this stuff.

75
00:05:14,870 --> 00:05:15,820
Yep, of.

76
00:05:17,760 --> 00:05:24,300
And then you need the stylings, Vincent Adaptogens, who can basically deliver this, and then if you

77
00:05:24,300 --> 00:05:30,360
want to see whether you are caught is working or not, then should be some like welcome to.

78
00:05:33,030 --> 00:05:34,020
Resume website.

79
00:05:37,120 --> 00:05:38,200
Can give this text.

80
00:05:39,880 --> 00:05:42,490
And then once it is done, you can now go to the public.

81
00:05:43,580 --> 00:05:45,530
And said public you can relate to.

82
00:05:47,020 --> 00:05:49,180
This things all of this stuff.

83
00:05:50,200 --> 00:05:55,540
Able to recycle bin Laden and digital conditioner, do this cleaning process.

84
00:06:07,900 --> 00:06:09,130
No need of this line.

85
00:06:13,420 --> 00:06:16,210
So now, once you're done with this, if you open this project.

86
00:06:19,400 --> 00:06:20,780
There's a smaller number or.

87
00:06:22,500 --> 00:06:24,660
If this were an existing.

88
00:06:26,630 --> 00:06:29,540
Because we have deleted the logo file, so we are not importing it.

89
00:06:31,040 --> 00:06:31,280
Yeah.

90
00:06:31,640 --> 00:06:33,710
So once this is done, a new refresher can see.

91
00:06:34,160 --> 00:06:35,080
Welcome to resume.

92
00:06:35,660 --> 00:06:40,730
We are getting this bold styling because if you can see it in later cases, we have given some styling

93
00:06:40,730 --> 00:06:43,280
to the body and the like fun family and everything.

94
00:06:43,880 --> 00:06:48,260
If you comment this out, then you're going to see it is going to some different style.

95
00:06:48,710 --> 00:06:52,370
So because of this word itself, they are getting some styling audio.

96
00:06:54,340 --> 00:06:59,950
So with this, we have basically created the act up and running then and did all the cleaning process

97
00:06:59,950 --> 00:07:01,960
and then we are good to go now.

98
00:07:02,200 --> 00:07:07,750
We can start to react project from our bodies and see what's happening like what is happening it after

99
00:07:07,750 --> 00:07:09,790
our jazz and in our next hour.

100
00:07:10,870 --> 00:07:16,420
And in fact, today is like we are using this reactor dome and everything, these things and starting

101
00:07:16,420 --> 00:07:22,030
with the components and then then avoiding that by building this project will continue from the next

102
00:07:22,030 --> 00:07:22,330
freedom.

103
00:07:22,510 --> 00:07:22,840
Thank.