1
00:00:00,510 --> 00:00:08,740
I'm going to start by navigating back to our project so our people then I'm looking for the reviews

2
00:00:08,790 --> 00:00:09,270
project.

3
00:00:09,580 --> 00:00:13,760
So now you can see that I'm in the road, I'm in React project.

4
00:00:14,070 --> 00:00:20,220
So, of course, I go online and more specifically, I'm looking for a sampler.

5
00:00:20,490 --> 00:00:22,020
So I have reviews folder.

6
00:00:22,380 --> 00:00:26,940
And in the reviews I grab the set up one and navigate over there.

7
00:00:27,180 --> 00:00:34,090
And as always, we need to start by installing dependencies and also we would want to open up the dev

8
00:00:34,140 --> 00:00:34,640
server.

9
00:00:35,100 --> 00:00:39,870
So as far as this project, there's two things that I would like to mention first.

10
00:00:40,900 --> 00:00:48,060
Even though we learn how it can fetch data using the use of fact, I will alternate between the project.

11
00:00:48,520 --> 00:00:54,580
So in some projects there's going to be a local data online and some projects we're going to project

12
00:00:54,580 --> 00:01:01,990
data because I didn't see the point of repeating myself where, yes, I could have set it up as an API

13
00:01:01,990 --> 00:01:03,090
and then we fetched data.

14
00:01:03,370 --> 00:01:10,750
But in my opinion, it would be too much repetition once we cover in tutorial how to set up custom hooks.

15
00:01:11,020 --> 00:01:17,350
And more specifically, we'll set up a used fetch hook where essentially we have the frenching functionality

16
00:01:17,560 --> 00:01:20,820
and we can just important then it's a different scenario.

17
00:01:20,980 --> 00:01:28,210
So later on and of course, where we are going to work exclusively with external API project, then

18
00:01:28,210 --> 00:01:34,600
of course we'll use of that custom hook because again, repeating the same seven eight lines of code

19
00:01:34,900 --> 00:01:36,770
seem somewhat redundant.

20
00:01:37,030 --> 00:01:43,170
So in some project, yes, we will fetch just because it is more real world scenarios.

21
00:01:43,420 --> 00:01:47,970
But then in some projects there's just going to be a local data and I'll try to alternate.

22
00:01:48,190 --> 00:01:50,030
So it's a bit interesting.

23
00:01:50,260 --> 00:01:51,730
OK, but that's the first thing.

24
00:01:51,740 --> 00:01:57,520
Now the second thing, if you're looking at a project, you can notice that we have some icons over

25
00:01:57,520 --> 00:02:04,190
here and even though we can technically the font awesome link in our public one.

26
00:02:04,480 --> 00:02:09,640
So, by the way, that isn't also an option if you navigate to the public and if you check the index,

27
00:02:10,510 --> 00:02:16,000
since that is our index file, by the way, here, we can find, of course, our title.

28
00:02:16,420 --> 00:02:22,000
You could technically get the CDN link for the foundation and include it over here.

29
00:02:22,480 --> 00:02:30,490
But my preference is using a library called React Icons for my icons and the way that library works

30
00:02:30,520 --> 00:02:31,380
is fine.

31
00:02:31,600 --> 00:02:36,550
So by the way, we navigate to localhost three thousand, you should see something like this on the

32
00:02:36,550 --> 00:02:36,910
screen.

33
00:02:37,150 --> 00:02:43,180
And before we set up any functionality as far as the project, I mean, just showcase how the library

34
00:02:43,180 --> 00:02:43,630
would work.

35
00:02:43,660 --> 00:02:47,260
So first, of course, we would need to install it now in our project.

36
00:02:47,270 --> 00:02:49,250
Of course, I already install it for you.

37
00:02:49,930 --> 00:02:56,290
So this is what you'll find in the packages on how, if you would want to include it into your own projects

38
00:02:56,470 --> 00:03:03,070
and of course, just run, npm, install react icons and then they advise using the same.

39
00:03:03,310 --> 00:03:08,980
So once you install the library, then in order to use the icon, you would need to import specific

40
00:03:08,980 --> 00:03:11,230
icon from specific library.

41
00:03:11,590 --> 00:03:14,980
So these are all the libraries they provide.

42
00:03:15,370 --> 00:03:22,300
And also, of course, you can check more specifically what icons are in that library.

43
00:03:22,600 --> 00:03:28,360
Now, what I really like is this search option where, for example, I could go and get some.

44
00:03:29,230 --> 00:03:36,070
And this just gives me all the icons that I have from all the libraries here, you can pick whichever

45
00:03:36,070 --> 00:03:39,220
icon you want online, just copy that.

46
00:03:39,460 --> 00:03:42,670
And then, of course, you just need to check, well, which library is it?

47
00:03:42,910 --> 00:03:45,610
So in this case, I can see that it is font awesome.

48
00:03:45,850 --> 00:03:50,650
And if we check out the font, awesome, then we can see that in order to use it, we would need to

49
00:03:50,650 --> 00:03:54,400
go with react icons and then forward slash and FAA.

50
00:03:54,790 --> 00:03:59,930
Now what I really like that this is a component so full blown riak component.

51
00:04:00,190 --> 00:04:03,700
So before we do anything, let me just show you how that would work.

52
00:04:04,030 --> 00:04:09,640
And I think I can do that in the objets, where at the moment I have a review component important.

53
00:04:10,000 --> 00:04:16,420
But I also want to import online since I can already copy that to the clipboard and just copy and paste

54
00:04:16,420 --> 00:04:24,610
from online since I have installed react icons and just go with forwards and F.A.A. and then of course

55
00:04:24,610 --> 00:04:28,420
in I'll return anywhere we can just play our icon.

56
00:04:28,750 --> 00:04:30,640
And what's really cool it is as we do.

57
00:04:31,460 --> 00:04:34,830
And if you want, you can also add classes to it as well.

58
00:04:35,120 --> 00:04:41,050
So this is going to be my component notice once I render their ears my account.

59
00:04:41,060 --> 00:04:49,670
And then, like I said, you can add here a class and it or if you check out the return, you'll be

60
00:04:49,670 --> 00:04:52,340
able to see, by the way, this is the one that I'm looking for.

61
00:04:52,640 --> 00:04:55,350
You'll be able to see that it is the SPG.

62
00:04:55,700 --> 00:05:02,930
So what you could definitely do is, of course, in your styling, use that fact and target the SPG.

63
00:05:03,080 --> 00:05:06,330
So whatever is the container and then style the surgery.

64
00:05:06,410 --> 00:05:15,740
Or like I said before, you can add here a class, so class name and let's say icon, and then in your

65
00:05:15,750 --> 00:05:21,780
index or whichever file you're using, you can just target this class as well.

66
00:05:22,070 --> 00:05:29,780
So my preference most cases is adding class, but sometimes just so I don't add too many classes, I

67
00:05:29,780 --> 00:05:31,380
also use that SPG option.

68
00:05:31,670 --> 00:05:35,270
So in this case, of course, I'll check my class name.

69
00:05:35,420 --> 00:05:36,410
That is an icon.

70
00:05:36,680 --> 00:05:43,760
And if I'm going to go with icon and then font size for arms and color, I don't know red.

71
00:05:44,880 --> 00:05:49,970
You, of course, will see that, first of all, my account is bigger and then also the color as red,

72
00:05:50,310 --> 00:05:55,810
so that's how we can use this library throughout the project, we will use it.

73
00:05:56,310 --> 00:06:00,300
So not every project, but once in a while we'll use this library.

74
00:06:00,480 --> 00:06:08,100
And now hopefully we're all on the same page, how to install it, how to use it and how to add it to

75
00:06:08,100 --> 00:06:09,330
our own project.