1
00:00:01,380 --> 00:00:02,670
Hello and welcome to the new video.

2
00:00:03,120 --> 00:00:06,360
So now in this video, we'll see how we get started with the reactor.

3
00:00:06,990 --> 00:00:13,640
The first thing you have to do is create a folder, so have created a folder now, like you can see

4
00:00:13,980 --> 00:00:16,950
in the drive where I keep all maniac projects.

5
00:00:17,760 --> 00:00:18,630
Once you can.

6
00:00:19,770 --> 00:00:20,580
Click on a less.

7
00:00:21,660 --> 00:00:25,020
You can see, like all the reactor projects that I'm having now.

8
00:00:25,080 --> 00:00:30,660
We have to be able we want to build a reactor inside this folder, so seeding to that folder.

9
00:00:32,720 --> 00:00:37,760
You can know the working they're trailing BWT come in, I'll be clearing the street.

10
00:00:38,400 --> 00:00:41,820
So now you're I'm inside the right project for a little bit.

11
00:00:41,820 --> 00:00:43,130
I want to start medivaced up.

12
00:00:44,020 --> 00:00:47,320
So you can do this with only one line of command and be.

13
00:00:49,490 --> 00:00:50,000
Create.

14
00:00:51,510 --> 00:00:52,740
React app.

15
00:00:53,840 --> 00:00:59,930
So what this does is basically creating React app is a very big process, like we have been told, so

16
00:00:59,930 --> 00:01:03,290
many dependencies, so many modules, node modules and all.

17
00:01:03,890 --> 00:01:10,040
So instead of us doing all those things, what Facebook developers did is they created a script.

18
00:01:10,580 --> 00:01:15,740
So the script actually does all the installation part of all those modules and dependencies.

19
00:01:16,070 --> 00:01:20,570
So the name of the script that they gave to that script is create a reactor.

20
00:01:20,900 --> 00:01:22,220
So this is the name of the script.

21
00:01:22,850 --> 00:01:28,910
So how to run the script running the script is done by that, and then fixes are like you can call it

22
00:01:28,910 --> 00:01:31,340
as a part of npm node package manager.

23
00:01:31,850 --> 00:01:38,060
So we'll be getting this thing from that NPCs and then create React app is the name of the script that

24
00:01:38,060 --> 00:01:42,740
installs all the React app modules and everything that we want to get started with the reactor.

25
00:01:43,100 --> 00:01:48,500
And then the final thing this not what this dog does, is that it will create the reactor in the current

26
00:01:48,530 --> 00:01:52,550
directory like we are in the video sharing app directly to create in the current directory.

27
00:01:52,940 --> 00:01:56,060
Or if you want to create another folder, you can mention the folder name.

28
00:01:56,420 --> 00:02:00,590
But now, as I know, I have created the folder and want to create the reactor up inside this folder

29
00:02:00,590 --> 00:02:00,950
itself.

30
00:02:01,190 --> 00:02:02,060
I'll be using this start.

31
00:02:03,250 --> 00:02:08,500
So when you click on another and also one more thing that you have to note is that the name of the.

32
00:02:09,810 --> 00:02:13,490
And that they are going to create should always be in small caps.

33
00:02:13,800 --> 00:02:19,560
So if you are having a capital letter like the folder name is Radio Ascab Photo-Sharing web app, then

34
00:02:19,560 --> 00:02:20,480
you may get there.

35
00:02:20,940 --> 00:02:24,210
You may get some error not saying that you have to change your name.

36
00:02:24,570 --> 00:02:24,960
That's it.

37
00:02:24,960 --> 00:02:29,160
Keep everything in small caps and then end create react app comment.

38
00:02:29,340 --> 00:02:34,920
Once this is done, that that will take like around two to three minutes time, so we'll get back once

39
00:02:34,920 --> 00:02:36,030
the app is created.

40
00:02:40,950 --> 00:02:45,240
But once it's done, you can see the material such as happy hacking and start.

41
00:02:45,480 --> 00:02:50,550
So once you see this kind of material, that means you have successfully created the reactor, as you

42
00:02:50,550 --> 00:02:56,160
can see in the reactor of the node modules required the default boilerplate code.

43
00:02:56,160 --> 00:02:57,450
Everything has came.

44
00:02:58,550 --> 00:03:03,620
So know how to start the reactor simply, there is one simple command and beam stop.

45
00:03:04,280 --> 00:03:07,940
So this will start to react up on your local host.

46
00:03:08,360 --> 00:03:14,600
The default locale was just three feet and started between 3000 localized frenetically open on and off

47
00:03:14,600 --> 00:03:15,650
us to open it.

48
00:03:16,250 --> 00:03:17,360
So we'll wait for that.

49
00:03:17,840 --> 00:03:24,080
Before that, I want to tell you that what we did is that they have gave a boilerplate code for this

50
00:03:24,080 --> 00:03:27,800
reactor that whenever you open, you'll see a screen with reactor where and all.

51
00:03:28,070 --> 00:03:29,040
So we don't want that.

52
00:03:29,060 --> 00:03:32,090
We want plain pure white screen to start off with.

53
00:03:32,490 --> 00:03:35,030
So for that, we have to do some cleaning process.

54
00:03:35,660 --> 00:03:39,920
So we have to delete all unnecessary files and also the code.

55
00:03:43,800 --> 00:03:52,310
I have been reading all clear that Najarian said that purchases inside that are just not at all destined.

56
00:03:53,890 --> 00:04:01,420
And anything simply basically they wanted to print, had a child printed over, or you can also print

57
00:04:01,420 --> 00:04:02,460
the video sharing.

58
00:04:03,980 --> 00:04:04,730
Application.

59
00:04:11,450 --> 00:04:13,400
Garages, remember these things.

60
00:04:17,470 --> 00:04:18,880
Game network series is fine.

61
00:04:19,990 --> 00:04:21,840
Now, will they move it inside the.

62
00:04:24,840 --> 00:04:27,930
Public fall in all of this, Jim Nicholson, chairman.

63
00:04:32,080 --> 00:04:38,500
So simply, what we're having is in certain actually, or we have to clear this also.

64
00:04:45,540 --> 00:04:46,890
So while we.

65
00:04:48,370 --> 00:04:49,630
Rating this rating.

66
00:04:54,630 --> 00:04:54,910
Could.

67
00:05:01,940 --> 00:05:07,460
So once we have cleared the boilerplate code, like, let me explain you what's happening.

68
00:05:07,880 --> 00:05:11,330
So instead, they admitted they're having a rogue division, right?

69
00:05:11,610 --> 00:05:13,070
The idea of this division is ruled.

70
00:05:14,080 --> 00:05:19,390
So basically, if you're going to inject drugs, you ought to react on that, and that means you are

71
00:05:19,390 --> 00:05:20,550
using a reactor, Dom.

72
00:05:20,800 --> 00:05:25,150
This is a model that we are getting from the act and then we are rendering the page.

73
00:05:25,540 --> 00:05:28,540
We are running the app where this app should be run.

74
00:05:28,750 --> 00:05:35,110
So we had this app component that makes the app not just component inside the document, but get elementary

75
00:05:35,110 --> 00:05:35,500
by root.

76
00:05:35,830 --> 00:05:39,670
So insert element that as this rule, Barrie, we are rendering the whole app.

77
00:05:40,060 --> 00:05:41,170
So what is that element?

78
00:05:41,170 --> 00:05:43,120
We are having issues with having this right?

79
00:05:43,450 --> 00:05:48,190
So everything that we do in said that gorgeous and separate component will get it over here.

80
00:05:49,210 --> 00:05:55,360
So this is basically the basic understanding of how the react outlooks are now entrapped or just simply

81
00:05:55,360 --> 00:05:56,920
having the heading video sharing app.

82
00:05:57,400 --> 00:06:02,590
So once you open your website, as you can see, we are getting a simple, basic video sharing application

83
00:06:02,590 --> 00:06:03,310
hitting each one.

84
00:06:04,150 --> 00:06:10,750
So with this, we have created the reactive one and started with our and and we got to know how it was

85
00:06:10,750 --> 00:06:12,760
doctored the reactor in the next window.

86
00:06:13,000 --> 00:06:18,860
We'll see how to build OpenStack with components, and we'll see what to the data from the YouTube API.

87
00:06:18,870 --> 00:06:24,550
Like knowing more about the YouTube API, working with the Google Developer Tool Control and everything.

88
00:06:24,670 --> 00:06:25,690
We see that from the next we'll.