Name: Reactで無限スクロール - チュートリアル (Infinite Scrolling With React - Tutorial)
Uploaded: 2021-01-14T10:41:39.000Z
Duration: 25 min 28 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

未来形

In today's video, we're gonna create a react application that has infinite scrolling built into it.

現在進行形

And we're gonna actually use quite a few interesting features of react such as refs and creating our own custom hooks.

It's going to be a ton of fun, So let's get started now.

Have simplified my name's Kyle, and my job is to simple by the Web for you.

Make sure you subscribe to my channel for more videos just like this one.

And to get started on the left hand side, I have visual studio code open, and all I did was run N p x, create react at with a period and this generated all of the bowler employees react code that we're going to need.

I then went around and removed all the files.

We don't need such a CSS files and such a CZ service workers and test files.

So we're just left with her index dot Js and an empty at file to actually put all of our react code inside of also on the right.

I have the finished version of our application.

All we do is search here for some form of book that we want.

So we type and test, for example, and you can see we get a bunch of different results.

And when we get to the bottom of page, you see it says, loading right there and then it'll load in our results and you could just continually scroll down until we get to the very end of all of our results.

This is just infinitely scroll until there's no more books with the name test inside of their title.

Also, something this will do is if we scroll all way back to the top and do a different search.

For example, if you search for tea, you see, it'll reset our pagination so that we start all over with our infinite scroll again from the beginning, and it'll clear out all of our old search results for us.

So in order to get started, let's actually just create the basic JSX template for application.

And we could do that inside of our app here.

The first thing that we're going to have is we're gonna have an input component, so it's creative input is going to be a type of text and this is actually going to be here.

After that, we're going to return some other stuff.

So let's put this inside of fragments so we can return the multiple sets of HTML inside of our JSX.

That we go in here is where we're gonna put our books.

Never gonna have the title was just copy that down a couple of times that we have an example of what this is going to look like.

And then lastly, we're going to have a div which is going to contain loading for when we're loading.

And if we have an error, we're gonna have a diff which is going to contain air.

So let's save that and actually start our application.

And if we let that run for just a little bit, you see, it's going to start up over on the side here and there you go.

You can see that we have our boilerplate html being generated for us and that we can actually work on implementing the AP I and infinite scrolling inside of our application.

And to do that, we're going to use Axios to call or a P I.

I followed by access, and this one stalled the library access for us, which works a lot like the fetch library does.

But it's much easier to use rather than fetch, which can be a bit difficult to use and isn't supported in all browsers.

Now that we have that done, we could do all of our code inside of our app for rendering our books, actually querian them, using Axios and doing all that other stuff.

But with react and hooks, it's a lot easier to break out our logic into a custom hook.

So we're gonna create a custom hook called the Use Book search dot Js.

And inside of here we're gonna create a functional component.

And if you have the extension installed, which is called S seven React Redux graphic, you'll global boss snippets you could just type R F C and hit enter, and it'll generate all the boilerplate code for you for a function component in react, which is also the same boilerplate code for actually generating a custom hook.

We could just remove the JSX because we're not actually going to return JSX.

And we also no longer need to import react.

But we do want to import use effect just like that, which is going to be the hook that we're gonna be using inside of our custom hook because we want to call or a p I.

And that's enough side effect that we want to call every single time Some parameters change.

We also want to make sure that we have the used state hook because we're gonna be storing state inside of this custom hook, which we then expose outside of this custom hook by returning it down here in this return.

For now, we'll just return north and inside of this component.

What we need to do is query that a p I like I mentioned, but we need to take in a few parameters for what we're queen.

The first thing we want to take it is the query.

Essentially, whatever we type into this text box here, we want to send to our search.

We also want to send in here what page number were on because while we are doing infinite scrolling, the way that infinite strolling works is as soon as you get to the bottom of your list of results.

It'll query the next page of results from the A.

P I and dependent on to the bottom of our page.

So we need to know what page number were currently trying to get from the A P I.

And once we have those two pieces of information, we can actually set up access inside of an effect.

This is going to take a function, which is what we're going to do every single time, that the parameters inside of this array, which is the second argument to use effect, change.

And in our case, we want this to happen every time our query or a page number change.

And inside of here we can use access to get our information.

We just want to say axis, and this is just a function which is going to take all the parameters that we need to give it.

So, for example, a method is going to be a get request.

I'm just gonna copy this euro from the a p I were using.

Essentially, this is the open library, a p I.

And we're using the search a p I that they have built in, which has pagination built into it so we can pass that as our parents.

So the first thing is our Cleary and in this case, they call that parameter cue in the a p I.

So we're gonna pass Q as query and we also need to pass page, which is just our page number variable.

And these are things you can find in the A P I documentation for this, a p I.

But for example, of q is our quarry and pages the page number that we're on inside of our quick, Also with Axios, this is going to be a promise based thing.

So we can just use dot Ben And this first stop then here is going to return us our response.

So we have a response variable, and then we can actually do something with that response.

And the data of our response is inside of rez dot data and this data we could just Consul, don't walk this for now.

And we'll take a look at what this looks like so we can actually understand what our data is doing.

So now, back inside of our app Lets import that hook so we can say import use.

We want to import that from hard dot slash used book search.

So now we actually have this hook inside of her application, and we can actually use this hook, for example.

We want to pass it our query, and we want to pass it our page number, which right now we don't have stored anywhere.

So up here we can just import that used state hook, which will allow us to create some state.

And the first thing we can do is set up state for our query.

We're gonna set this here equal to use state, and by default, our crews is gonna be an empty string.

And this use state function returns a query as well as a function to set that query which is going to be render application.

What's copy this down and do the same thing for a page number as well as for setting our page number.

And by default, we're just gonna have page number one for when we load her application.

Now, we actually have these variables being set.

So we can just update that in our input, we can set a non change event to this.

And we could just saying here we want to call a function called handle search.

We can create that function just like this.

So say, handle search, and this is going to take the event.

字幕リスト動画再生

Reactで無限スクロール - チュートリアル (Infinite Scrolling With React - Tutorial)

essentially

access

unique

previous