Infinite Scroll React Example Using React-Infinite-Scroll-Component

[Music] let's create a new react project using create reader tab and open the project go inside the source folder open app.js remove all these default codes now open a new terminal inside vs code and run this program by typing npm start the project is working now close this project let's go to google and type react infinite scroll and you can see the first result is react infinite scroll component click on it you need to install this in our project so copy this and go to the project and paste npm install react infinite scroll component and click enter this will install the react infinite scroll in our project next we need to import infinitive score component from react infinity scroll component so copy this and paste it inside our app.js next we are going to copy this demo example from the documentation go back to our vs code and paste it inside the app.js and now save the project so we can see there are some errors before correcting these errors first we need to remove some unwanted codes all these codes are user for providing pull down function we don't need that so we remove that code next we are going to create a new state the name of the state is items and we set the initial value as an empty array now save this project we resolved the first error item not defined but we forgot to import use state so now import use state from react now we imported a use date from react next we need to add fetch data function this feature data function will get called when user reaches the bottom of the page so we are using the switch data to update our item array and add the new contents without going to the next page so let's create fetch data function we created a new arrow function named fetch data now save this project as you can see all our errors are resolved next we are going to create a fake backend for this project so close this project and go to google and type json server you can see the first result is json server using this npm package we can create a fake rest api server for our project so click on the get to starter and copy this now go back to our vs code and paste it inside the terminal and click enter this will install json server in our project now go back to the documentation the next step is to create a db.json file which will act as an database for our backend we need to create our db.json file inside our project folder now open db.json inside this file we need to add some demo data for that we are going to copy some data from a website go to google and search json placeholder open the first result and scroll down you can see resources click on comments now copy the first 100 comments now go back to our db.json and create a new json object with the key as comments and the value as an empty array inside this array paste the data we copied so we added 100 comments inside our db.json now go back to our documentation next step is to run this server for that we need to run this server in an alternate report so copy this code this will run the server in port 3004 the reason we are using the port 3004 is our react app is already running in port 3000 the default port for json server is 3000 that is why we are using 3004 for the server now go back to your vs code and open a new terminal inside the new terminal paste it and click enter this will run our server in localhost 3004 and this will create a resource localhost 3004 slash commands if we go to this link we can see all the commands in our db.json now copy this link and go to google chrome and paste it inside the address bar and click enter you can see all hundred comments that we added inside db.js file next we are going to split this data into different pages for that go back to the documentation and click on pagination as you can see we just need to add a page parameter to our url by default it will return 10 items we can change the default by adding limit parameter now open a new tab and add a page parameter to our url let's add page is equal to 1 and this will return first 10 commands now let's change page equals to and this will return the next 10 commands that is command 11 to 20 next we are going to change the limit from 10 to 20 by adding a limit parameter and setting its value to 20 now you can see we are getting 20 result from command 21 to command 40. now go back to vs code and open app.js first step is to get the data from the server and insert it into the items for that we are going to use use effect hook everything inside the us effect will get called when users start the application first we need to import use effect from react now you can see reimbursed use effect from react next i am going to create an asynchronous function get the commands inside use effect also inside use effect call this function get commands inside get comments we are going to fetch the data from our server for that we are using factory method this is the url we are going to use let's copy this and paste it inside the browser you can see we are getting the first 20 commands that is because we given the limit equals 20 and the page equals one next we created a new constant data and saved the response to the data constant next step is to update item state using set items function we updated the item state and added the first 20 comments into the items next we are going to console of items now go back to our project and you can see there is some error we will resolve it later go to console here you can see the array which contain the first 20 commands so we are able to update the item state and add the first 20 comments two items now go back to vs code now we are going to resolve that error the reason for the error is these items so i am going to use map method to loop through this array i forgot to add a return on the map function so let's add return now go back to the project we can see all 20 comments are now printed in our project now go back to the project all these comments are coming from item state initially we fetched the first 20 commands from the server and we set the value to item state now the items contain first 20 commands as you know items is nra so we used the map function to loop through each items in that array in react we should use key attribute and give it a unique value here items.id is a unique value so we can use that id next we are going to print the id on the screen so we use the items dot id and also we use the items dot email and items dot body if we look at the json array you can see id name email and body as key value players what we are doing is retrieving each of this value using the mapped function go back to vs code you can see after this return statement we are returning all these values now let's look at the fetch data function firstly let's add something inside fetch.function and see how this data function works we are going to console.log hello and see how this function get called now reload this project then go to the console when we scroll down you can see follow get printed on the console what this means is whenever we reaches the bottom the fetch data function will get called now go back to vs code remove this console log and we are going to create a new function which commands fetching comments is also an asynchronous function and using the fetch method we are going to fetch the second page and which will return the next 20 commands earlier we use the page equals one here we use page equals to so we are getting the next page and this function will return the data constant which contain all the 20 commands next step is to call these fetch comments we are going to call this fetch comments inside fetch data so the fetch comments get called when user scroll down i forgot to add a single in our function whenever we use away you should always make the function asynchronous next we are going to update items array for that we are using set items set item is the method we called when we need to update our state inside set items we are going to combine the old items and the comments from the server comment from server contains all the data from the page two that is comments from 20 to 40. now we are going to use a spread operator and combine both this arrays if you want to know more about spread operator search is adopted in javascript and the first result will be developer.mozilla.org you can learn more about this current operator from this website it contain different examples and explanations it will be very helpful generally developer.mozilla.org is a good website to learn basic javascript now go back to vs code and save the project and now open our project and go to the console now scroll down and you can see the next return the commands are now loaded the id 22 id 40 are loaded from the second page now you can see there are some errors reason for this is our program is loading the second page more than once when we scroll down the fetch data function is again called and the comments from 20 to 40 is again get added to prevent calling fetch data multiple time we need to update attribute as more from true to false after loading our second page for that we are going to create a new state the name of the state is no more and we set the initial value to true now copy this now replace this pro with our newly created state no more next we are going to update this state after loading the second page and selecting it into the items we are going to set the state to false it will prevent the calling fetch data again so reload our project and scroll down you can see the next 20 comments are now loaded you can see that now the error is gone the page was only called once after loading the second page we set the state to false so it will prevent the further coding of future data also it will show the end message here the message is you have seen it all now we will order the first 40 comments we need to load all the comments from the database there are 100 comments in the database for that we need to create a new state called page and set the initial value of page to 2. next we are going to replace this 2 with our newly created state page so copy the page and replace this 2 with our state next we are going to increment this page by one using set to page function we are going to add page plus one this will increment our page by one now go back to our project and reload this project now scroll down you can see the result is same as before we only loaded 40 commands the reason for this is we set no more to false so we should add some condition if the comments from server length is 0 or it is less than 20 then only we are going to set to no more to false this condition only become true if we are loading the last page then we set this state to false go back to your project and reload this project and now we scroll down you can see there are more than one page loading you continue to scroll then you can see more and more pages are loading now all the comments from the database is now loaded next we are going to create components so create a new components folder inside source folder now create a new file comments.js inside our components folder now go back to app.js we are going to place this return elements inside our comments.js before creating comments.js we need to add a css framework to our project i'm going to use bootstrap framework click on get started bootstrap is one of the most popular css framework copy this code and go back to our project open public folder click on index.html remove all these comments and paste the code between the opening head tag and closing head tag now we can use old boot strip classes open comments dot js and type rfc this will create a new react component in new reactive version you don't need to import react we created a new functional component commands now we are going to add some html and css classes all these classes are bootstrap classes i copied the card element from bootstrap that is under these components you can see the cards i copy this code and get some modifications if you like you can use your own css here i am using all bootstrap classes now go to app.js we are going to replace this code with our command component next step is to import the command component go to the top of this page and you can see we imported comment this is done with the help of autoimport extension what we are doing here is we are passing the item state to the comment component next we are going to retrieve this value inside command here we restructure items and retrieve id email body we are going to print all this value first we are using id next we are going to print email so open a curly bracket insert the curly bracket add email next we are going to add comments open a curly bracket inside the curly bracket add body you can see now the design was changed but the alignment was not right you need to add few more classes in app.js these are all bootstrap classes now go back to the project now everything looks fine next we are going to create a new component for loading so go to components and create a new file load up dot js inside loader.js create a new component loader also remove this reactant board here also we are going to replace this with some bootstrap classes i used boost strip spinner for creating this loader if you scroll down you can see spinners i use the glowing spinner now go to app.js replace this loading with our loader component and also import loader component now we imported the loader component next we are going to create another component in the message component so we are going to cut this and create a new component end message inside and message dot js file create a new component also remove this react bot and paste the code now go back to app.js and add nd message component and the next import to end message now we imported end message you don't need to create all these components you can type everything inside app.js but it will be much difficult to understand so if the best practice is to split the code into different components go back to app.js to see the loader in action we need to change the url from localhost to an external website for that we are going to replace this localhost address anything from localhost will load so fast so we cannot see the loader now we replace it with a real website jsonplaceholder.typecode.com here also we are going to replace the localhost with jsonplaceholder.typecode.com reason why we are able to do this is the json placeholder uses the same service json server that we installed in our computer the response from our local host the first page we loaded the first 20 comments is same as what we get from json placeholder you may recall we used the commands from jsonplaceholder to fill our database that is why we are able to use jsonplaceholder instead of our host this contained 500 comments so now we loading 500 comments into our program earlier we are loading 100 comments from our db.json file now save our project go to the browser and scroll down still it is very difficult to see the loader the internet connection is fast also we are loading small amount of data now you can see the three dots that is our loader thank you for watching this video please subscribe like share this video [Music] [Music]

Channel: coderspirit

Views: 24,358

Keywords: Infinite, react js, react, scrolling, React-Infinite-Scroll-Component, npm

Id: bBUOMy6Tugw

Length: 25min 41sec (1541 seconds)

Published: Wed Aug 11 2021