1
00:00:07,590 --> 00:00:09,090
Welcome back.

2
00:00:09,120 --> 00:00:15,720
Now it's time for us to get started with the front end part of our application.

3
00:00:16,079 --> 00:00:23,160
And I have already created Fresh React application and it's running on Port 3000.

4
00:00:23,310 --> 00:00:29,060
And I added a folder called Client Inside the Project folder.

5
00:00:29,070 --> 00:00:33,330
Now this is my client folder and then this is my server folder.

6
00:00:33,540 --> 00:00:39,340
All right, so let's go ahead and then install the packages that we need.

7
00:00:39,360 --> 00:00:47,520
We are going to use pairing cases for the UI and then we're going to use React router down version six

8
00:00:47,520 --> 00:00:49,230
for navigation.

9
00:00:49,350 --> 00:00:52,970
So let's go ahead and then install tearing CSS.

10
00:00:52,980 --> 00:01:01,440
So if you click on the documentation or docs for short, we have the installation guide and we are going

11
00:01:01,440 --> 00:01:03,410
to use the framework guide.

12
00:01:03,420 --> 00:01:09,540
So let's click on the framework and let's select the framework that we are going to use.

13
00:01:09,570 --> 00:01:15,540
We are going to use a library but not a framework because React is a library.

14
00:01:15,540 --> 00:01:21,570
So let's click on the Create React app and let's look at the installation.

15
00:01:21,600 --> 00:01:27,450
First step is that we need to create Fresh React application and we have done it.

16
00:01:27,600 --> 00:01:33,240
The next step is that we need to install tearing CSS and this is the command.

17
00:01:33,240 --> 00:01:40,290
So let's click on this icon here to copied to clipboard and let's go to our project.

18
00:01:40,590 --> 00:01:45,840
Let's open our terminal and I have open instance of my terminal.

19
00:01:45,840 --> 00:01:48,210
So here is for installation.

20
00:01:48,210 --> 00:01:56,040
So our paste that so for this installation is going to install tearing CSS processes and then auto prefix

21
00:01:56,460 --> 00:02:03,840
and after that it's going to create a new file called tearing CSS and we are going to install this one

22
00:02:03,840 --> 00:02:05,220
as dev dependency.

23
00:02:05,220 --> 00:02:06,870
So let's hit enter.

24
00:02:11,110 --> 00:02:13,240
Ain't finished installing.

25
00:02:13,270 --> 00:02:23,380
If we check our folder, we can see a new file called tearing dot config dot js dns packet that we need

26
00:02:23,380 --> 00:02:27,310
to install a react router dom.

27
00:02:27,490 --> 00:02:33,550
If you go to the website, that is a re act router dot com and this is the page.

28
00:02:33,760 --> 00:02:42,760
The next step is that let's click on New to React Router and let's look at the installation we are going

29
00:02:42,760 --> 00:02:50,320
to install using John so we can use NPM to install or we can use John.

30
00:02:50,320 --> 00:02:56,050
So let's copy this snippet and let's go ahead and then copy that.

31
00:02:56,140 --> 00:03:02,500
So make sure that you add the same version as at version six and let's hit enter.

32
00:03:02,860 --> 00:03:09,280
Now we are done with the installation, so let's finish up with the configuration of CSS.

33
00:03:09,280 --> 00:03:10,540
So here we go.

34
00:03:10,780 --> 00:03:13,200
After that, let's look at the steps here.

35
00:03:13,240 --> 00:03:18,790
We need to include this file, so let's copy this one.

36
00:03:18,790 --> 00:03:24,130
And now back to the file that is tearing dot config the JS.

37
00:03:24,130 --> 00:03:26,740
Let's replace that one with this.

38
00:03:26,740 --> 00:03:28,840
And there we go.

39
00:03:28,990 --> 00:03:37,180
The next step is that we need to include this snippet inside our main CSS file.

40
00:03:37,180 --> 00:03:47,110
So let's copy this one and now let's locate our index dot CSS file and it is inside of C and then index

41
00:03:47,110 --> 00:03:48,670
dot C as S.

42
00:03:48,670 --> 00:03:56,740
So for this one, let's move everything and let's paste the Haven CSS configuration code and now we

43
00:03:56,740 --> 00:03:59,050
are done with the table in CSS.

44
00:03:59,050 --> 00:04:06,460
So next step is that let's try to use a simple table in this class to make sure that everything is correct.

45
00:04:11,980 --> 00:04:15,940
Let's give each one and our call this one as.

46
00:04:21,810 --> 00:04:31,870
And let me add one class as class name is equal to text dash green and then 200.

47
00:04:31,890 --> 00:04:33,030
So let's save it.

48
00:04:33,030 --> 00:04:34,440
And now let's check it out.

49
00:04:34,440 --> 00:04:37,110
And you can see that I have the green.

50
00:04:37,350 --> 00:04:41,660
Let's change the opacity to 800.

51
00:04:41,670 --> 00:04:45,870
So this means that access has been configured correctly.