All language subtitles for 093 Reviews - Info and React-Icons.en_US

I'm going to start by navigating back to our project so our people then I'm looking for the reviews

project.

So now you can see that I'm in the road, I'm in React project.

So, of course, I go online and more specifically, I'm looking for a sampler.

So I have reviews folder.

And in the reviews I grab the set up one and navigate over there.

And as always, we need to start by installing dependencies and also we would want to open up the dev

server.

So as far as this project, there's two things that I would like to mention first.

Even though we learn how it can fetch data using the use of fact, I will alternate between the project.

So in some projects there's going to be a local data online and some projects we're going to project

data because I didn't see the point of repeating myself where, yes, I could have set it up as an API

and then we fetched data.

But in my opinion, it would be too much repetition once we cover in tutorial how to set up custom hooks.

And more specifically, we'll set up a used fetch hook where essentially we have the frenching functionality

and we can just important then it's a different scenario.

So later on and of course, where we are going to work exclusively with external API project, then

of course we'll use of that custom hook because again, repeating the same seven eight lines of code

seem somewhat redundant.

So in some project, yes, we will fetch just because it is more real world scenarios.

But then in some projects there's just going to be a local data and I'll try to alternate.

So it's a bit interesting.

OK, but that's the first thing.

Now the second thing, if you're looking at a project, you can notice that we have some icons over

here and even though we can technically the font awesome link in our public one.

So, by the way, that isn't also an option if you navigate to the public and if you check the index,

since that is our index file, by the way, here, we can find, of course, our title.

You could technically get the CDN link for the foundation and include it over here.

But my preference is using a library called React Icons for my icons and the way that library works

is fine.

So by the way, we navigate to localhost three thousand, you should see something like this on the

screen.

And before we set up any functionality as far as the project, I mean, just showcase how the library

would work.

So first, of course, we would need to install it now in our project.

Of course, I already install it for you.

So this is what you'll find in the packages on how, if you would want to include it into your own projects

and of course, just run, npm, install react icons and then they advise using the same.

So once you install the library, then in order to use the icon, you would need to import specific

icon from specific library.

So these are all the libraries they provide.

And also, of course, you can check more specifically what icons are in that library.

Now, what I really like is this search option where, for example, I could go and get some.

And this just gives me all the icons that I have from all the libraries here, you can pick whichever

icon you want online, just copy that.

And then, of course, you just need to check, well, which library is it?

So in this case, I can see that it is font awesome.

And if we check out the font, awesome, then we can see that in order to use it, we would need to

go with react icons and then forward slash and FAA.

Now what I really like that this is a component so full blown riak component.

So before we do anything, let me just show you how that would work.

And I think I can do that in the objets, where at the moment I have a review component important.

But I also want to import online since I can already copy that to the clipboard and just copy and paste

from online since I have installed react icons and just go with forwards and F.A.A. and then of course

in I'll return anywhere we can just play our icon.

And what's really cool it is as we do.

And if you want, you can also add classes to it as well.

So this is going to be my component notice once I render their ears my account.

And then, like I said, you can add here a class and it or if you check out the return, you'll be

able to see, by the way, this is the one that I'm looking for.

You'll be able to see that it is the SPG.

So what you could definitely do is, of course, in your styling, use that fact and target the SPG.

So whatever is the container and then style the surgery.

Or like I said before, you can add here a class, so class name and let's say icon, and then in your

index or whichever file you're using, you can just target this class as well.

So my preference most cases is adding class, but sometimes just so I don't add too many classes, I

also use that SPG option.

So in this case, of course, I'll check my class name.

That is an icon.

And if I'm going to go with icon and then font size for arms and color, I don't know red.

You, of course, will see that, first of all, my account is bigger and then also the color as red,

so that's how we can use this library throughout the project, we will use it.

So not every project, but once in a while we'll use this library.

And now hopefully we're all on the same page, how to install it, how to use it and how to add it to

our own project.