Placeholder Image

字幕表 動画を再生する

  • Hello, everyone.

  • 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.

  • But if we want a deal to make us the users could go to the next war.

  • Previous page.

  • We need to set up some state to do that.

  • So it's set up of state, which is going to track the current page that were on.

  • And this is just going to be a euro just like this.

  • You are all here, which is going to be our current page so we can just come in here and we could say current.

  • Paige, you are l and we also wanna have set current page euro.

  • I'm gonna set that equal to use state and by default, this current page girl is going to be set to this.

  • You are well down here.

  • Solutions.

  • Copy this up into the U.

  • S.

  • State in here and by default, our current page girl is going to be set to the first initial page.

  • And we also want to make sure we use this current euro inside of our get down here.

  • Also, you may notice that every time we change our current Paige, you are well, we want to re fetch our Pokemon.

  • So we want to pass that as a parameter down here to the EU's effect.

  • So now our use effects says every single time current Paige Orel changes rerun the code inside of it.

  • And if it doesn't change, then don't bother re rendering that coat, which is perfect because we want to re get the Pokemon every time we go to a different page, you'll see this all once we start to get the next and previous buttons hooked up.

  • But if we do save this, you should see everything over here renders Justus before So we haven't broken anything, which is great.

  • Now it's just copied is down and we want to do the same thing.

  • But for our next page, you are Oh, we wanna have set next page girl and by default is just going to be completely blank.

  • And we want to do the same thing.

  • But it's going to be for a previous page.

  • You are Oh, and for setting our previous page tomorrow.

  • And if you remember from our a p I If we scroll down just a little bit, make sure we change this to be just Pokemon hit Submit.

  • You can see we have next and previous at the beginning of our request.

  • So we know that we can actually just take this next variable from our request.

  • And this is the next page inside of our pagination.

  • So down here we can say we want to set our next page euro to our response, not data, which, as we know, is our Jason over here, we just want to set it to the next property, Which is this Your role?

  • For the next page, we're going to do the same exact thing, but this time for the previous page and for previous right here.

  • So now we're setting the next page or all the previous page, or Oh, and the Pokemon every single time we make this fetch request, which is perfect.

  • Another thing that we want to make sure that we do is actually give our application a loading state.

  • Because right now we re render application.

  • It's just starts as a blank page.

  • And then after the AP, I request it renders everything.

  • But to a user, it may look like our site is broken if we just show them a blank page.

  • So instead we want to show them some type of loading screen.

  • So again, we're gonna use some state to set up a loading application.

  • So we can say loading this is just going to store a true or false for if our pages loading and we want set loading And of course, we're gonna use some state and by default, we're gonna put our application in True.

  • We're gonna say by default, our application is loading.

  • And then, instead of our use effect after our request is successful, we can actually set are loading to be false because now we know that we have all of our data, so we're no longer voting anything.

  • And every time we make a request, we want to set the loading to be true.

  • So every time that we need to make a request, we're gonna make it so that our application goes back to the loading state.

  • And every time I request completes, we're gonna go out of the loading state and actually render our application over here and to make our application really simple, we're gonna come down here, we're gonna check if loading is true.

  • And if so, we're gonna return some really basic text that says loading with a few dots at the end.

  • Now, if I say that you should see it had little flash of loading at the top and an easy way to see this is we never set loading to false.

  • We say that, you see, it'll just say loving forever.

  • But we, of course, don't want that.

  • So we're gonna set loading to false, and you just see that quick little flash of loading.

  • But if you're on a slower Internet connection, it'll say loading for longer.

  • So your user knows it's actually working and that your sight isn't broken.

  • The last thing we have left to do is actually set up.

  • What happens if the user calls this use effect multiple times in a row before the request has finished, you're gonna have a race condition and thinks could overwrite each other.

  • We want to make sure we cancel every old request every time we make a new request.

  • And the great thing about use effect is it allows you to return a function, and this function gets called.

  • Every single time use effect gets called again, so essentially it allows you to clean up after the last call.

  • In our case, it's going to allow us to cancel our previous request every time we make a new request and access has a really great way built into it that is going to allow us to do this.

  • We can pass a second argument, which is the options that we want to pass to get.

  • And it has something called a cancel token Takes an object, and this object is a new axis dot Cancel token.

  • And essentially, this cancel token, all it does is take a function, and this function returns here.

  • The cancel token that we need.

  • So all we need to do is set something to the sea variable and the sea variable.

  • We can call si dot cancel, and it allows us to cancel our request.

  • So it's just create a variable called Cancel defaulted to nothing and then inside of here, we want to set, cancel equal to see.

  • So now, every single time our access makes a call, it's going to set our cancel variable here to this new cancel token.

  • And then down here, we can just say, cancel dot cancel, just like just like this.

  • And we could just put this on one line to make it easier to read.

  • And now this is going to cancel our request.

  • Every single time we make a new one, just in case we have an old request.

  • It just make sure application never loads old data in case the old request finishes after a new request.

  • Just cancels it.

  • So we never have that problem.

  • And actually, instead of saying cancel that cancel, this cancels just a function itself.

  • We just call Cancel.

  • That was my bed.

  • Always do is just call canceled and it'll cancel that forest if there's a current request going on and if we save, you'll see everything over here still works is before, so we haven't broken anything, which is great.

  • The next thing we want to do is set up the pagination, which is really the thing that's going to allow us to make this a very dynamic web page.

  • And to do that, we need to create two functions, one for going to the next page and one for going to the previous page.

  • So we just scroll down here a little ways.

  • It will create a function which is called go to next page, and this function is going to be very simple.

  • We're gonna set the current Paige, you are l to the next page where Oh, super Straight Ford.

  • Same exact thing.

  • But we want to go to previous page and you guessed it.

  • We're gonna set the current paid euro to the previous page.

  • Laurel, he's a really basic functions, and our pagination component is actually going to use these functions in order to go next or previous, depending on the button we hit.

  • So let's make sure we put our pagination component down here.

  • And of course, we want to make sure we passed those different components to it.

  • So what we can do is we could just say our go to next page is going to be equal to that go to next page function and the exact same thing with previous.

  • So now our pagination component has both the next page function and the previous page function being passed to it, and in order to make it so that we can return both of these elements, we need to put them inside of a fragment, essentially just a empty HTML element that we know that we're rendering both these because if you don't do that and you save, we're gonna get an error because it's trying to return to things.

  • And in Java script, you can only return one object.

  • So we could you return this empty object, which is going to wrap both the objects we actually want to return.

  • And of course, nothing's changed over here because our pagination component is completely empty.

  • So let's actually come in here.

  • We know that we're going to get a go to next page function and go to previous page function just like that.

  • And we can use these inside of its div on two different buttons.

  • This button is going to say, previous, we're gonna have another button which says Next, and our previous button is going to have a non click, which is just going to call that function go to previous page, and our next button is going to happen on Click, which is going to call Go to next page just like that.

  • Now, if we save, you should see we have a previous and next button, and when we click next, it'll load and render the next section previous.

  • It'll load and go back the page ground before, but you'll notice that if we click previous now, there's nothing to load.

  • So just gonna load forever.

  • We were already on the first page, so we actually want to hide this previous button we have no other page to go to.

  • And a really easy way to do that is to just make a check here.

  • We can say if go to previous page and then we want to render button.

  • And this is a really tricky way to do an if statement inside of react.

  • What we do is we put the variable you wanna check.

  • So we're saying If we have a go to previous page function, then render everything after the and and this works because in Java script, if you have an and statement and the first section is false, it'll never run the second section because it knows false and anything is always false.

  • So it just quits out.

  • It says, Okay, this is false.

  • I'm done.

  • Continue on.

  • But if this first section is true, true and true could be true.

  • So it needs to check the second argument to see if it's true.

  • So, essentially, it'll say, OK, render this button.

  • This is just a tricky way to do an if statement and react and you'll see this all the time in react code.

  • We can come down here, do the exact same thing with our previous page and put the bracket over here and we save and you'll notice that both our previous and next button are still being shown up.

  • And that's because instead of rap were always passing these functions, no matter what we want to do a quick check in here.

  • What we can do is we can say, if next page neuro this is going to be a turn ERI.

  • So essentially, what it's saying is if the next page or l was true, then passed something here which, in our case, we want to pass the go to next page function.

  • Otherwise, anything after the corn is what we want to pass if this is false.

  • So if we don't have an ex page, we're passing notes.

  • We could do the same exact thing over here.

  • We can say previous page euro.

  • If that's true past that function and if it's not just passed, No.

  • Now we save.

  • You'll see down here neither of our buttons, they're showing up.

  • So obviously we have some form of problem going on with our application.

  • This code right here looks fine.

  • So it's looking are pagination and you'll notice right here is the air I put go to previous button on both of these while this bottom one should say Go to next page.

  • Now if we say that we should hopefully see our next button, we click it.

  • It leads our next page, and now our previous button shows up because we have a previous page to go to weaken.

  • Click next.

  • A few more times you can see our loading screen is working, and this will go all the way until we get to the last page.

  • There's a lot of punky wants, so obviously I'm not gonna click this button all the way till we get to the end.

  • And that's all it takes to make a simple react application.

  • If you enjoy this video and want to learn a ton more about react, make sure you check out the rack course linked in description.

  • I go over so many features of modern rack, and by the time you're done with that course, you'll know everything you need to know about react in order to start building any project you can think of So with that out of the way, Thank you very much for watching this video and have a good day.

Hello, everyone.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

ポケモンアプリをReactで構築する - チュートリアル (Build A Pokémon Application With React - Tutorial)

  • 4 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語