1
00:00:01,220 --> 00:00:03,410
The last video we saw the introduction to our project.

2
00:00:03,800 --> 00:00:09,260
So now here, now I can show you, oh, like, what is the complete record of how the project looks

3
00:00:09,260 --> 00:00:09,560
like?

4
00:00:10,160 --> 00:00:15,080
As you can see, this is that Gorgeous X will be lighting the logic, business logic, and you will

5
00:00:15,080 --> 00:00:16,400
be using the components.

6
00:00:16,820 --> 00:00:17,750
These are the components.

7
00:00:18,020 --> 00:00:19,790
These are the components that we create.

8
00:00:20,000 --> 00:00:24,170
We can see over here in the components for, look, these are like these components are present.

9
00:00:24,740 --> 00:00:30,170
So if I open or create area, you can see the code for create a real component, can see the code for

10
00:00:30,170 --> 00:00:33,350
header component, can see the code for the Node.js component.

11
00:00:33,530 --> 00:00:40,910
Apart from this, we'll also see basic styling of this component so that the final web page should look

12
00:00:41,600 --> 00:00:43,010
as we saw in the last video.

13
00:00:43,820 --> 00:00:45,320
So these are the fancy step by step.

14
00:00:45,500 --> 00:00:52,400
All the components are styling and like the reasons behind writing that logic and everything.

15
00:00:53,000 --> 00:00:58,010
So first thing we'll have to we don't mean this thing will open a new window.

16
00:00:59,470 --> 00:01:01,960
And determinant so that we can get started with the reactor.

17
00:01:02,350 --> 00:01:08,530
So now I am in my drive in a folder called React Projects and a folder meant to do that.

18
00:01:08,860 --> 00:01:11,950
So here I have all my reactor up inside this folder.

19
00:01:12,730 --> 00:01:13,980
So how to create reactor?

20
00:01:14,960 --> 00:01:17,840
One simple line NPCs create.

21
00:01:19,140 --> 00:01:27,420
The act up, so before executing this, I'd explain you what this line of orders actually manually setting

22
00:01:27,420 --> 00:01:29,970
up a React project is a very big task.

23
00:01:30,600 --> 00:01:37,350
We need to write so many lines of code installed, so many node modules installed stop so many dependencies

24
00:01:38,160 --> 00:01:39,840
that this consumes a lot of time.

25
00:01:40,680 --> 00:01:44,850
So what Facebook developers did is they created a script that's good.

26
00:01:45,120 --> 00:01:47,370
That's all the work that we need to do manually.

27
00:01:47,850 --> 00:01:50,700
So that name of the script is create react to.

28
00:01:51,330 --> 00:01:57,180
Subsequently, every up is the name of the script that instructs the React app inside the folder, on

29
00:01:57,180 --> 00:02:02,520
the folder that you want that is created by the Facebook developers and is like tool.

30
00:02:02,670 --> 00:02:05,350
You can use it as a tool that runs the script.

31
00:02:05,370 --> 00:02:08,660
For example, if you want it on a C program, you need a G Plus Plus.

32
00:02:08,880 --> 00:02:12,180
If a C++ Program G Plus Plus or as C.

33
00:02:12,600 --> 00:02:17,490
If you want to run a Java programming on Java, see this are compilers like similarly that can use the

34
00:02:17,490 --> 00:02:18,220
same analogy.

35
00:02:18,240 --> 00:02:23,910
This is not exactly compiler, but you can use that analogy and be a part of npm, nor package manager

36
00:02:24,300 --> 00:02:25,680
that is used to run this script.

37
00:02:26,370 --> 00:02:26,730
OK.

38
00:02:27,120 --> 00:02:30,090
And then this is what this darkness is.

39
00:02:30,450 --> 00:02:33,630
This creates the React project inside the current directory.

40
00:02:34,470 --> 00:02:39,420
If you don't want to create, send the current trend, you want a new folder also inside this territory.

41
00:02:39,660 --> 00:02:43,290
Then you specify the full name since you already created a folder called to the app.

42
00:02:43,500 --> 00:02:48,510
I want to install my React project and said this current folder itself, so I'll be using dark.

43
00:02:49,020 --> 00:02:56,580
So once you write this for this, click on into and one more thing the name of the a folder that you

44
00:02:56,580 --> 00:02:59,430
want to have your React app should be in lowercase.

45
00:02:59,850 --> 00:03:05,130
Everything should be lowercase and I think should be in like not even a single letter should be in uppercase.

46
00:03:05,430 --> 00:03:08,740
These are the convention naming convention rules of React project.

47
00:03:09,660 --> 00:03:12,180
So you can see the package I decided to install.

48
00:03:13,810 --> 00:03:19,210
It will take some time, like a few computers, it might take five minutes, but if you can to three

49
00:03:19,210 --> 00:03:23,890
minutes, if if you are having a very powerful system, it may take only 30 seconds or 20 seconds.

50
00:03:24,550 --> 00:03:29,410
So we'll be back once the installation process like this whole process gets finished.

51
00:03:34,120 --> 00:03:34,810
So we are back.

52
00:03:35,050 --> 00:03:40,660
If you see these kind of messages like happy hacking and people start, if you see these messages,

53
00:03:40,660 --> 00:03:43,930
then that means the reactor has been successfully created.

54
00:03:44,470 --> 00:03:45,980
So know how to run this reactor.

55
00:03:46,090 --> 00:03:50,320
You can also see the all the node modules have been installed and everything.

56
00:03:50,530 --> 00:03:57,910
So how to run this reactor up there, a simple command and beam stop so they can stop the reactor.

57
00:03:58,070 --> 00:04:00,400
You should read that before the well updated the reactor.

58
00:04:00,880 --> 00:04:04,960
So in fact, to the up folder, I'm executing this command and beam stuck.

59
00:04:05,410 --> 00:04:06,220
I click Enter.

60
00:04:06,730 --> 00:04:11,260
This will happen in time like around 10 or 20 seconds, so won't take that much time.

61
00:04:12,100 --> 00:04:15,600
So before that, this will run on a defaulter server.

62
00:04:15,610 --> 00:04:20,740
Port number three thousand will open automatically in your default browser.

63
00:04:21,190 --> 00:04:24,400
So I'll be using Google Chrome so that it has a good developer.

64
00:04:24,400 --> 00:04:31,240
Control tools for editing As you can see, there is some low logo that is having some animations and

65
00:04:31,240 --> 00:04:32,650
texture and some background color.

66
00:04:33,190 --> 00:04:35,080
So why are we having this react?

67
00:04:35,080 --> 00:04:40,870
Developers gave a boilerplate code for this reactor project, so this will install a default date,

68
00:04:41,350 --> 00:04:42,340
but we don't want this.

69
00:04:42,340 --> 00:04:44,710
We want to start with the white screen.

70
00:04:44,980 --> 00:04:45,670
So how to do that?

71
00:04:45,670 --> 00:04:48,430
So I'll do some reprocessing work over here.

72
00:04:49,000 --> 00:04:55,420
So first thing, we have to delete all the unnecessary files.

73
00:04:57,930 --> 00:05:00,570
Does do badly with me so that you won't get lost.

74
00:05:01,790 --> 00:05:02,030
OK.

75
00:05:02,510 --> 00:05:04,520
And then or to public.

76
00:05:08,950 --> 00:05:12,130
All of this, we don't need any of this or more to recycle bin.

77
00:05:13,360 --> 00:05:14,760
Unprepossessing look like of.

78
00:05:15,950 --> 00:05:21,530
Delete all the styles, grabbed our jeans, we don't need this slogans or deleted.

79
00:05:23,470 --> 00:05:26,630
And then we just a hello world, so we'll print all over.

80
00:05:27,860 --> 00:05:28,460
At one.

81
00:05:29,640 --> 00:05:31,320
OK, we'll bring that to Booth.

82
00:05:31,350 --> 00:05:32,580
Welcome to list.

83
00:05:33,640 --> 00:05:36,490
Welcome to to do list.

84
00:05:37,840 --> 00:05:38,230
OK.

85
00:05:39,680 --> 00:05:44,570
So late edition and in the next hour of convergence, we don't need any of this will be more.

86
00:05:46,180 --> 00:05:46,490
Yes.

87
00:05:46,570 --> 00:05:46,820
Yeah.

88
00:05:47,170 --> 00:05:50,110
And I'll go to Yemen any more, I'll just buy that bitcoin.

89
00:05:59,660 --> 00:06:00,200
But would be.

90
00:06:01,320 --> 00:06:03,490
To those most at.

91
00:06:06,980 --> 00:06:13,370
So once we do all this preprocessing now, open collapsed lung cancer like we have got a plain white

92
00:06:13,370 --> 00:06:15,380
page and welcome to do text.

93
00:06:15,860 --> 00:06:16,940
So what's basically happening?

94
00:06:16,940 --> 00:06:19,640
You will get a high level view on what is happening.

95
00:06:20,210 --> 00:06:23,090
So an indication of family, this is the base.

96
00:06:23,510 --> 00:06:24,020
So here we are.

97
00:06:24,020 --> 00:06:29,840
Having a dip with ideas will now go to Abbott and averages.

98
00:06:32,890 --> 00:06:34,710
So we're instead of gorgeous.

99
00:06:35,350 --> 00:06:36,190
You can see.

100
00:06:38,200 --> 00:06:40,450
So Apple doesn't even exist in dark.

101
00:06:41,050 --> 00:06:44,200
You can see it importing the agree on everything.

102
00:06:44,560 --> 00:06:51,010
So what we are doing here is we are running the port of next ADHD a mode, and we are inserting all

103
00:06:51,010 --> 00:06:56,620
the code that the reactors inside this deck, inside the dignitaries who, as you can see here, we're

104
00:06:56,620 --> 00:07:01,000
getting the document get element by adding, we are getting that element with it too.

105
00:07:01,450 --> 00:07:04,270
And then inside that, we are rendering it at component.

106
00:07:04,810 --> 00:07:06,540
So what is app components?

107
00:07:06,820 --> 00:07:08,260
It is a division with page one.

108
00:07:08,440 --> 00:07:09,280
We are returning it.

109
00:07:09,550 --> 00:07:11,230
So basically, this is what we are printing.

110
00:07:11,930 --> 00:07:18,070
So now similarly, in our budget, we can use other components, will create a components folder and

111
00:07:18,070 --> 00:07:23,110
there will be a dollar component like Create Area, Note Dot, Jan. six and all the components and import

112
00:07:23,110 --> 00:07:24,340
them and use in our budget.

113
00:07:24,760 --> 00:07:26,620
But on the business logic board.

114
00:07:26,980 --> 00:07:30,490
So we'll see everything one by one, step by step further reduce.

115
00:07:31,420 --> 00:07:37,030
In this video, we have created the reactor and then we'll start building the original website that

116
00:07:37,030 --> 00:07:38,310
we want to build from the next freedom.