So you told me that you wanted a reactive Torrey A ll.

And today I'm going to bring you not some boring to do list application, but a much more fun Pokemon application that allows you to see all the different Pokemon paginated through them using hooks and all of the modern react features starting now.

But before we get started, my react courses launching just one week from today.

So if you haven't already signed up for the email list to get the exclusive discount, today is one of the last days you have.

So make sure you do that if you're interested in the course.

Also, if you're watching this from the future, you can use the same link in the description in order to check out the course.

Since it's already been released for you now, actually, let's get started.

So in order to save us just a little bit of time, I've already gone ahead and run the n p x create react AB script with period at the end.

All this does Is it run to create, racked up and generates all the files that you already see inside this project?

That's the only thing I've done so far.

It just takes a long time to run.

So I figured you didn't want to watch me do that.

And the next thing that we need to do is actually just delete a bunch of the coat that it generates because it generates a bunch of boilerplate placeholder code.

So we don't need this fabric on icon.

We don't need any of these logos manifest robots.

All we want in the public folder is this index dot html and we could just leave this as is.

So the next thing instead of our source folder, we could just remove the CSS, the test files, all the logos and the service workers.

We don't need any of that stuff.

And inside of our app that Jess, we can actually just remove all the code inside this return.

We just want to return.

No, we can also remove these imports up here.

We don't need to stay access for the logo.

And now if we say that all of our code is exactly how we want it, just a very bare bones application that does absolutely nothing, which is perfect to get started with in order to run this, we could just run NPM start and this is going to run the application for us.

And if I just move this over to the side, this is the ape high that we're gonna be using.

And as you can see, our application has opened up on the side over here, and you can see they have an error in our index togs, and that's just because we haven't removed some of the cobra not using, so make sure you remove that CSS file.

This service worker and all this service workers stepped down here.

We just want this single line with these three imports.

Now, if we say that, you should see our app refreshes and it's completely empty, which is exactly what we want for this application.

So we can just start from scratch.

We could head into our app dot Js and this is where our applications going to be built.

But as I mentioned just a little bit earlier, this is the a p I that work.

You're gonna be using this poky a p I.

And essentially, what it allows us to do is Qari Old, the Pokemon that are available as you can see here if we just go https pokey ap i dot co slash a p i v to Pokemon.

We get a list of results down here that have the name of Pokemon and the girl for much more detailed information on them before our cases.

All we're really worried about is this name as well as this next and previous section which allow us to do pagination inside of her application because by default, only 20 results are returned to the time.

And we want to be able to allow our users to go from just the 1st 20 into the 2nd 23rd 20 and so on not to get started.

The first thing that I want to do is think about the different components we're gonna be using in this application and for our cases is actually straightforward.

We're only gonna have two components.

Well, three if you count the app, I guess.

But main two components we have is our list of Pokemon, which are just gonna be the names of the Pokemon and then pagination section, which allows us to hit next and previous buttons to go forward and backward throughout the different pages that we have available.

So let's create those components.

Now we just do that in the source folder crediting file for our case.

We're gonna have a Pokemon list dot Js And if you have the extension installed, which is over here, it's called E GS or not.

I'm sorry, E s seven React re ducks graphic.

You'll wreck native snippets.

It allows you to just type R F C and enter, and that's going to generate the code here for a react functional component.

If you don't have that installed, you can type this all out by hand.

But I find this snippet makes it really easy to work with react components.

So here's our Pokemon list Created Will save bet and will create another file.

We'll call this one pagination dot Js and in here we could do the same thing.

React functional components RFC and hit enter and it'll generate all this boilerplate code for us and that's all the components that we're gonna need for application.

The next thing that we need to worry about is the different state that we're gonna be storing inside of our application so we can do that and are apt of Js.

And in order to store state in a functional components, we need to just import the hook, which is used state, and this will allow us to use state inside of her application.

So we can say that.

And now we can actually use state in her application.

And the main state that you're probably thinking of, that we're gonna need to store is the list of Pokemon that we're showing on the screen.

So the way you state works is we call the function you stayed and we pass it.

Our default state, essentially our initial state, which in our case, there is going to be no initial states.

We're just gonna leave this completely empty.

But what it does, is it extra returns to variables force inside of an array.

So we're gonna destroy nature that by using these brackets here, And if you're not used to a radius structuring, make sure you check out my video that I've done on it.

I'll link it in the cards and the description don't blow for you.

But essentially, the first parameter of the ray is gonna be the first element in the array that's returned, which in our case is going to be just the Pokemon.

It's the current state that we're using.

So this is our current state, which in our case is for our Pokemon, and then the second variable here in our ray is going to be the method we can use to update our state.

So we're gonna call this set Pokemon.

So essentially we have here our actual Pokemon, our data and the 2nd 1 we have our way that allows us to update that data for application.

So when we go to a different page, we can call set Pokemon and update the list of Pokemon that we're showing inside of our application in order to get started and just see what our application will look like.

I'm just gonna add some default state of just two different Pokemon, for example, we can hear have bullets sore, and then we can also just put in here charm andr just that we have two different entities inside this Pokemon variable to play around with.

And as I mentioned, this is the default state.

So the very first time our component renders its going to put this information inside the Pokemon variable over here on the left.

And what we can do inside of our return statement is if we import our Pokemon list component that we created, so put him on a list from and when you're importing a local component, you can use dot slash to get your current directory, and then we see here a Pokemon list so we can import it just like that.

And down here, we can actually render that so it can render our Pokemon list on.

We just want to make sure you pass it here.

The props, which, in our case, all it needs is a list of all the Pokemon to render.

So now we're passing our Kocaman down to our Pokemon list.

Inside of that booking on list, we can actually use those Pokemon and again we're gonna use de structuring.

So we're gonna d structure the props and inside of here we're just know that we're passing it a variable with the name Pokemon.

So we're gonna d structure that from the props argument because right now this is props and we have props dot Pokemon being passed into it so we could just actually take this one step and just d structure it here.

It just makes it easier to work with small parameters that you're getting in from your props.

Then we can come down here and actually render that information inside of this div.

And an easy way to do that is if we use these curly Cray braces here inside of our JSX, we can actually run JavaScript code.

We can just say what we want to do is looped through all these over a map.

So we're gonna say Pokemon dot map and for each Pokemon inside that collection we want to do is return some code.

So we're gonna actually use normal brackets here.

I'm sorry, Parentheses and then everything inside these parentheses will be returned from this function.

So in our case, we're gonna return a single div and inside that if we're gonna put the name of the Pokemon, which in our case is just that p variable because our list is just a list of a raise of names, and then when you're in react, you actually need to have a key for every single thing that's inside of an array.

So every time you have a loop such as like this.

You need to have a key on your top level element.

And this kid needs to be unique to that element.

So in our case, we're just gonna put the name of the Pokemon because we know we're never gonna have any duplicates.

This just allows react to easily render things efficiently.

And so you just need to know to put a key anytime you have some form of loot inside your reactor code.

Now, if we save this and come over here and look at our code, you can see that it's actually printing out both bullets or and charm ender, which is exactly what we wanted to do.

And each one of them is on an individual def.

With the key being set.

Cerak knows when to rear ender individual ones if it needs to.

Now, this is all great that we have this working and react in its rendering, but it's just a static list.

As you can see over here, we wrote this list ourselves we want to do is we want to actually dynamically create this list from the A p I that we have over here.

So what we're going to use as we're gonna use the library called Axios, which just allows us to fetch from AP eyes easier than using the default fetch from the browser.

So it's installed that by just typing in here in P m I Axios and that's going to install the access library force, which is going to allow us to make a synchronous request two and a p I, such as this poky a p i.

And now that's done being installed.

We can actually import Axios from that Axios library.

And now we have access to Axios, which works very similarly to help fetch works.

So if you used effects, you can get used to Axios.

And so, for example, if we want to get something from the a p I weaken, just say Axios dot get and we want to pass it the girl we're gonna be using, which, in our case, we can see over here.

Are you Earl?

Is this https slash last pokey ap i dot co slash FBI such be to slash Pokemon.

So if we just paste this inside of here, this is going to make a fetch request, and it's going to return us a promise so we can do is we could just do a dot then on that promise.

And this promise has essentially the response for our request as the variable that gets returned and as a property and called data, which is going to be all of this Jason that you see inside of here.

So this resident data is all the Jason that we see here and then inside results is in array for all over different Pokemon.

So we can say resident data dot results.

This is going to be our actual Pokemon.

And we just want to get the name from each one, so we can say dot map and we want to do for each one of the Pokemon in this array.

We just want to get the name from them because we're getting an object with a name and a euro, and all we actually want is the name.

So then we can actually come in here and we can set Pokemon looks if I spelled it correctly to that, and now this is going to actually set our Pokemon variable to that value, and this is going to look like it works if we save this and come over here, you can see we're getting an error.

And that's because by default, Pokemon is undefined was just set this to an empty array by default.

And now if we say this, you can see this is actually looking like it's working.

But this is not the correct way to actually make these types of requests and react.

This is what we would call an effect.

It's something we want to happen and then re render application when it does happen.

So we need to use what's called the use effect to make this work.

And this is just a hook that you can import from react so we can import use effect.

And then we can actually run these effects every time we rear ender application or just sometimes based on the props that we pass it.

So let's get started by wrapping this in a use effect, we can just coming out here type in use effect, and this just takes a function.

This function is going to be run every single time.

Based on the props that we passed down here, we essentially pass an array of arguments, and every time one of these arguments change in our ray, it's going to rerun our effect.

So for us right now, we just never want our effect to rear ender itself.

So we're just gonna leave this array empty, so the effect is only ever going to run one single time.

What's bring our code from access up into our use effects section over here?

And now if we say that you should see nothing over here actually changes.

Our code is doing the exact same thing.

But now we actually have this working properly.

Where are youse?

Effect is being hooked up properly with Axios and everything is only going to rear ender once.

So if something else in our app component causes it to rear Ender, we're never gonna re fetch these Pokemon list.

We're only gonna do it that one single time, which is great.

It is so much more efficient now Now, in order to make it so, our application is dynamic and actually can change which one of the pages were on right now, we only ever view the first page, so we can only see the 1st 20 Pokemon.