1
00:00:00,900 --> 00:00:02,160
In this video.

2
00:00:02,640 --> 00:00:06,870
Let's see how to create a React component.

3
00:00:07,630 --> 00:00:18,220
We have two ways of creating React component and one is functional component and class based component.

4
00:00:18,490 --> 00:00:22,960
So what is the differences between these two?

5
00:00:23,170 --> 00:00:32,619
Well, if we have experience with React, you we see that before the current version of React, we normally

6
00:00:32,619 --> 00:00:35,750
go by what is called class based component.

7
00:00:35,770 --> 00:00:43,510
For example, if we want to use some lifecycle lifecycle method, but with the current version of React,

8
00:00:44,110 --> 00:00:50,920
where they introduce hooks, where we are sticking to functional component and that is what React is

9
00:00:50,920 --> 00:00:54,270
moving towards using functional component.

10
00:00:54,280 --> 00:01:01,750
So I can say that class based component is deprecated and everything are going to use functional component.

11
00:01:02,260 --> 00:01:11,110
So to demonstrate that, let's go ahead and create Fresh React app and then we start from scratch.

12
00:01:11,530 --> 00:01:20,260
So I'm going to create a folder on my index top and I'll call it as React Components.

13
00:01:20,260 --> 00:01:22,960
You can name it wherever you want.

14
00:01:22,960 --> 00:01:26,080
React that component.

15
00:01:27,950 --> 00:01:34,700
Like that and then have open mind terminal or better still, you can use the built in terminal that

16
00:01:34,700 --> 00:01:36,620
came with Visual Studio code.

17
00:01:37,550 --> 00:01:39,500
There are a couple of ways of doing this.

18
00:01:39,530 --> 00:01:45,740
One is I can see in I can drag and drop my folder onto my terminal and then I'm good to go.

19
00:01:45,770 --> 00:01:47,240
Let me clear the console.

20
00:01:47,660 --> 00:01:58,790
Well, remember guys, how can we create React app making use of PNP X Create Dash React Dash app and

21
00:01:58,790 --> 00:02:06,560
the name of your app React component and then you are good to go.

22
00:02:07,070 --> 00:02:09,110
But let me show you one code trick here.

23
00:02:09,139 --> 00:02:12,200
Remember that we can go by this way.

24
00:02:12,500 --> 00:02:17,330
It means that I'm going to create this folder inside this folder here.

25
00:02:17,780 --> 00:02:19,790
But I already have my folder.

26
00:02:19,790 --> 00:02:23,390
Well, I don't want to have some folder inside this one.

27
00:02:23,660 --> 00:02:30,680
So if you have your folder being already created, all you need to do is you don't need to bring the

28
00:02:30,680 --> 00:02:36,380
name of your project, but instead space and period and hit enter.

29
00:02:37,250 --> 00:02:43,530
So it's going to install React into the folder that we have created.

30
00:02:43,550 --> 00:02:47,720
So let's have some patience and then sit back and wait.

31
00:02:47,720 --> 00:02:50,150
Why React is doing it thing.

32
00:02:54,330 --> 00:03:03,260
Well React has finished installing and it says that first is we have already segued into that summit

33
00:03:03,270 --> 00:03:11,490
kinds of and PM start and then I'm good to go because I'm already inside my project folder so let me

34
00:03:11,490 --> 00:03:17,640
click the console and make use of NPM start or better.

35
00:03:17,640 --> 00:03:28,020
So let me open the folder inside my preferred cool editor I can drag and drop or mechanics of this script

36
00:03:28,020 --> 00:03:32,460
code dot and then it's going to open for me.

37
00:03:32,550 --> 00:03:40,830
So let make it large and then let me run my React application, click the console again and then MP

38
00:03:40,830 --> 00:03:46,200
and start and I'm starting my React app.