title
Simple Frontend Pagination | React

description
In this video we will implement some custom pagination in React to get a certain number of fetched posts per page. We will be using the useState and useEffect hooks as well. Code: https://github.com/bradtraversy/simple_react_pagination Sponsor: Freelancer Bundle (Use "brad25" for 25% off) https://studywebdevelopment.com/freelancing.html 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Simple Frontend Pagination | React', 'heatmap': [{'end': 568.201, 'start': 550.07, 'weight': 0.793}, {'end': 625.034, 'start': 599.402, 'weight': 0.862}, {'end': 715.528, 'start': 673.717, 'weight': 0.89}, {'end': 915.886, 'start': 886.743, 'weight': 0.798}, {'end': 949.18, 'start': 917.56, 'weight': 0.758}, {'end': 1085.385, 'start': 1038.641, 'weight': 0.701}], 'summary': 'Learn how to implement front-end pagination, hooks, and axios in a react application to display 5 or 10 posts per page, use useeffect to prevent infinite loops, build post components to display 100 posts, implement pagination logic, create separate pagination components, and handle acf using bootstrap, with a mention of a helpful resource for starting a freelance business.', 'chapters': [{'end': 363.827, 'segs': [{'end': 32.795, 'src': 'embed', 'start': 7.165, 'weight': 1, 'content': [{'end': 11.727, 'text': 'This video is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com,', 'start': 7.165, 'duration': 4.562}, {'end': 17.49, 'text': 'which gives you everything you need to start your own freelancing business, including a 130-page in-depth guide,', 'start': 11.727, 'duration': 5.763}, {'end': 22.812, 'text': 'invoicing and client proposal templates, website templates, an SEO checklist and much more.', 'start': 17.49, 'duration': 5.322}, {'end': 25.893, 'text': 'Visit the link in the description and use the code BRAD25 to get 25% off.', 'start': 23.132, 'duration': 2.761}, {'end': 32.795, 'text': "Hey, what's going on guys? So in the last video, I got a comment that was pretty popular.", 'start': 28.092, 'duration': 4.703}], 'summary': 'Ultimate freelancing bundle offers 130-page guide, templates, and seo checklist. use code brad25 for 25% off.', 'duration': 25.63, 'max_score': 7.165, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk7165.jpg'}, {'end': 135.776, 'src': 'embed', 'start': 111.079, 'weight': 0, 'content': [{'end': 120.526, 'text': 'but make it so we can show five per page or 10 per page and then have some nice pagination numbers at the bottom that we can scroll through.', 'start': 111.079, 'duration': 9.447}, {'end': 123.349, 'text': "And we're going to be using Bootstrap for the styling.", 'start': 120.867, 'duration': 2.482}, {'end': 124.189, 'text': 'All right.', 'start': 123.849, 'duration': 0.34}, {'end': 125.55, 'text': "So let's jump in.", 'start': 124.369, 'duration': 1.181}, {'end': 127.611, 'text': 'I just have my create react app.', 'start': 125.57, 'duration': 2.041}, {'end': 129.352, 'text': 'I did clean it up a little bit.', 'start': 128.031, 'duration': 1.321}, {'end': 135.776, 'text': 'As you can see, I just deleted some of the files, just have a simple app component, functional component.', 'start': 129.491, 'duration': 6.285}], 'summary': 'Using bootstrap for styling, created a simple app component in create react app.', 'duration': 24.697, 'max_score': 111.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk111079.jpg'}, {'end': 197.453, 'src': 'embed', 'start': 171.636, 'weight': 2, 'content': [{'end': 179.461, 'text': 'and then use effect allows us to basically mimic some of the lifecycle methods within a class based component.', 'start': 171.636, 'duration': 7.825}, {'end': 186.005, 'text': 'And what we want to do is when the component mounts, we want to fire off the request to get the posts.', 'start': 180.061, 'duration': 5.944}, {'end': 188.047, 'text': "So we'll use use effect for that.", 'start': 186.566, 'duration': 1.481}, {'end': 194.431, 'text': "So inside our app component above the return, let's create our state values using use state.", 'start': 188.807, 'duration': 5.624}, {'end': 197.453, 'text': "So we're going to go ahead and set posts.", 'start': 195.032, 'duration': 2.421}], 'summary': 'Demonstrating use of use effect and state values for fetching posts.', 'duration': 25.817, 'max_score': 171.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk171636.jpg'}, {'end': 323.509, 'src': 'embed', 'start': 295.408, 'weight': 3, 'content': [{'end': 301.993, 'text': 'Now, we could do axios.get and do .then, the standard promise syntax, but I want to use async await.', 'start': 295.408, 'duration': 6.585}, {'end': 308.438, 'text': "Now, you shouldn't put async onto useEffect whatsoever, so you want to create a new function.", 'start': 302.733, 'duration': 5.705}, {'end': 313.621, 'text': "So we're going to say const fetchPosts equals async.", 'start': 308.458, 'duration': 5.163}, {'end': 323.509, 'text': "And in here, we'll go ahead and first of all set loading to true because we're in the process of fetching.", 'start': 316.944, 'duration': 6.565}], 'summary': 'Using async await for axios.get instead of standard promise syntax.', 'duration': 28.101, 'max_score': 295.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk295408.jpg'}], 'start': 7.165, 'title': 'React pagination tutorial', 'summary': 'Provides a tutorial on implementing front-end pagination, hooks, and axios in a react application to display 5 or 10 posts per page. it also includes a 25% discount on the ultimate freelancing bundle by studywebdevelopment.com.', 'chapters': [{'end': 363.827, 'start': 7.165, 'title': 'React pagination tutorial', 'summary': 'Illustrates a tutorial on creating a pagination feature in a react application using front-end pagination, hooks, and axios, with a goal to display 5 or 10 posts per page and includes a brief introduction to the ultimate freelancing bundle by studywebdevelopment.com with a 25% discount.', 'duration': 356.662, 'highlights': ['Introduction to Ultimate Freelancing Bundle The video is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com, offering a 130-page in-depth guide, invoicing and client proposal templates, website templates, and an SEO checklist, with a 25% discount using the code BRAD25.', 'Tutorial on React Pagination The tutorial covers creating a pagination feature in a React application using front-end pagination, hooks, and Axios, aiming to display 5 or 10 posts per page, and includes a brief introduction to the Ultimate Freelancing Bundle by StudyWebDevelopment.com with a 25% discount.', 'Setting up State and Hooks The chapter explains setting up state values using useState and mimicking lifecycle methods within a functional component using useEffect, along with creating state values for posts, loading, current page, and posts per page.', 'Fetching Posts using Axios The tutorial demonstrates fetching posts from a fake REST API using Axios, setting loading to true during the fetching process, and utilizing async/await for making the request.']}], 'duration': 356.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk7165.jpg', 'highlights': ['Tutorial on React Pagination covers creating a pagination feature in a React application using front-end pagination, hooks, and Axios, aiming to display 5 or 10 posts per page.', 'Introduction to Ultimate Freelancing Bundle offering a 130-page in-depth guide, invoicing and client proposal templates, website templates, and an SEO checklist, with a 25% discount using the code BRAD25.', 'Setting up State and Hooks explains setting up state values using useState and mimicking lifecycle methods within a functional component using useEffect, along with creating state values for posts, loading, current page, and posts per page.', 'Fetching Posts using Axios demonstrates fetching posts from a fake REST API using Axios, setting loading to true during the fetching process, and utilizing async/await for making the request.']}, {'end': 754.366, 'segs': [{'end': 447.755, 'src': 'embed', 'start': 388.942, 'weight': 0, 'content': [{'end': 392.785, 'text': 'Now to stop that, we simply pass in an empty set of brackets.', 'start': 388.942, 'duration': 3.843}, {'end': 397.869, 'text': 'Okay, This is where you would put dependencies where you know if you wanted it to run.', 'start': 392.805, 'duration': 5.064}, {'end': 404.313, 'text': "when something specific change, you could put that in here, but we're just going to leave this blank, which makes it kind of mimic.", 'start': 397.869, 'duration': 6.444}, {'end': 406.555, 'text': 'the component did mount lifecycle method.', 'start': 404.313, 'duration': 2.242}, {'end': 409.337, 'text': "So it'll only run when it mounts, which is what we want.", 'start': 406.815, 'duration': 2.522}, {'end': 417.84, 'text': "Okay So now let's, uh, Let's just let's console.", 'start': 410.338, 'duration': 7.502}, {'end': 419.701, 'text': "Let's make sure we're getting these actually.", 'start': 417.86, 'duration': 1.841}, {'end': 422.163, 'text': "So we'll just do a console log of posts.", 'start': 419.781, 'duration': 2.382}, {'end': 430.809, 'text': "And if we go back to our application, you can see that we're getting these posts right here.", 'start': 424.765, 'duration': 6.044}, {'end': 435.421, 'text': "Yeah So it's 100 posts, I believe.", 'start': 433.058, 'duration': 2.363}, {'end': 437.123, 'text': 'All right.', 'start': 435.441, 'duration': 1.682}, {'end': 443.17, 'text': "So let's try to think here.", 'start': 437.343, 'duration': 5.827}, {'end': 447.755, 'text': "We're going to have a separate post component that we're going to pass them into.", 'start': 443.49, 'duration': 4.265}], 'summary': 'Using an empty set of brackets mimics component did mount lifecycle method, retrieving 100 posts.', 'duration': 58.813, 'max_score': 388.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk388942.jpg'}, {'end': 578.563, 'src': 'heatmap', 'start': 550.07, 'weight': 0.793, 'content': [{'end': 553.974, 'text': "here we're just simply going to put the post title.", 'start': 550.07, 'duration': 3.904}, {'end': 556.196, 'text': 'okay, so that should be it for our post component.', 'start': 553.974, 'duration': 2.222}, {'end': 561.962, 'text': "now let's go back to app.js and let's, let's first of all change this.", 'start': 556.196, 'duration': 5.766}, {'end': 568.201, 'text': "we'll say, Let's say, my blog, but I want to make it look a little decent.", 'start': 561.962, 'duration': 6.239}, {'end': 574.562, 'text': "So we'll give this a class name of text primary and let's do margin bottom.", 'start': 568.261, 'duration': 6.301}, {'end': 578.563, 'text': "We'll see margin bottom three.", 'start': 574.582, 'duration': 3.981}], 'summary': "Updating post title in app.js to 'my blog' with text primary class and margin bottom of 3.", 'duration': 28.493, 'max_score': 550.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk550070.jpg'}, {'end': 635.724, 'src': 'heatmap', 'start': 599.402, 'weight': 2, 'content': [{'end': 611.448, 'text': "post is not defined, we didn't bring it in, okay, so now let's go back and there we go.", 'start': 599.402, 'duration': 12.046}, {'end': 615.089, 'text': 'so we have a hundred posts which you know, this is too much.', 'start': 611.448, 'duration': 3.641}, {'end': 619.831, 'text': 'we want to narrow this down and implement our pagination.', 'start': 615.089, 'duration': 4.742}, {'end': 625.034, 'text': "so we're going to add some extra logic here and i'm going to do it right above the return.", 'start': 619.831, 'duration': 5.203}, {'end': 632.4, 'text': "So we'll say get current post and we're going to have three lines of code here.", 'start': 626.134, 'duration': 6.266}, {'end': 635.724, 'text': 'First thing we want to do is get the index of the last post.', 'start': 632.841, 'duration': 2.883}], 'summary': 'Implement pagination for a hundred posts to narrow down and improve logic.', 'duration': 20.635, 'max_score': 599.402, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk599402.jpg'}, {'end': 727.899, 'src': 'heatmap', 'start': 673.717, 'weight': 3, 'content': [{'end': 682.582, 'text': 'But we want to slice and then pass in the index of the first post and the index of the last post.', 'start': 673.717, 'duration': 8.865}, {'end': 689.066, 'text': "So that'll slice out the number of posts that we want, which should be 10.", 'start': 683.023, 'duration': 6.043}, {'end': 697.291, 'text': "Now, instead of passing in posts that's in our state, we're going to go ahead and pass in current posts.", 'start': 689.066, 'duration': 8.225}, {'end': 700.426, 'text': 'Like that.', 'start': 699.986, 'duration': 0.44}, {'end': 702.507, 'text': 'All right.', 'start': 702.147, 'duration': 0.36}, {'end': 706.029, 'text': 'So if I save and we go back now, we only get ten posts.', 'start': 702.567, 'duration': 3.462}, {'end': 709.59, 'text': 'OK And if we want to change this to five.', 'start': 706.769, 'duration': 2.821}, {'end': 713.106, 'text': 'Now we only get five.', 'start': 712.085, 'duration': 1.021}, {'end': 715.528, 'text': 'OK, so that part is done.', 'start': 713.126, 'duration': 2.402}, {'end': 716.829, 'text': "I'm going to change it back to ten.", 'start': 715.548, 'duration': 1.281}, {'end': 722.454, 'text': "That part's done, but we have no way to actually get to page two or three or any other page.", 'start': 717.21, 'duration': 5.244}, {'end': 724.536, 'text': "So that's where the pagination comes in.", 'start': 722.835, 'duration': 1.701}, {'end': 727.899, 'text': 'Now I want to create a separate component for it.', 'start': 725.577, 'duration': 2.322}], 'summary': 'Implemented post pagination with 10 posts per page, allowing dynamic adjustment to 5 posts as well and planning to add separate pagination component.', 'duration': 25.332, 'max_score': 673.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk673717.jpg'}], 'start': 363.907, 'title': 'Using useeffect and building post component for pagination', 'summary': 'Explains how to use the useeffect hook in react to prevent infinite loops and discusses building a post component to display 100 posts, implementing pagination logic to display a specified number of posts per page, and creating a separate pagination component to navigate through the pages.', 'chapters': [{'end': 409.337, 'start': 363.907, 'title': 'Using useeffect in react', 'summary': 'Explains how to use the useeffect hook in react to prevent infinite loops, by passing an empty set of brackets to mimic the component did mount lifecycle method.', 'duration': 45.43, 'highlights': ['The useEffect hook runs whenever the component mounts and updates, potentially leading to a never-ending loop.', 'Passing in an empty set of brackets prevents the useEffect hook from running continuously, mimicking the component did mount lifecycle method.']}, {'end': 754.366, 'start': 410.338, 'title': 'Building post component for pagination', 'summary': 'Discusses building a post component to display 100 posts, implementing pagination logic to display a specified number of posts per page, and creating a separate pagination component to navigate through the pages.', 'duration': 344.028, 'highlights': ['The chapter discusses building a post component to display 100 posts The speaker mentions displaying 100 posts and creating a post component to handle the display of these posts.', 'implementing pagination logic to display a specified number of posts per page The speaker explains the implementation of pagination logic to display a specific number of posts per page, demonstrating the functionality by changing the number of posts displayed.', 'creating a separate pagination component to navigate through the pages The chapter covers the creation of a separate pagination component and emphasizes the importance of reducing the reliance on external packages by building the pagination functionality from scratch.']}], 'duration': 390.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk363907.jpg', 'highlights': ['Passing in an empty set of brackets prevents the useEffect hook from running continuously, mimicking the component did mount lifecycle method.', 'The chapter discusses building a post component to display 100 posts.', 'implementing pagination logic to display a specified number of posts per page.', 'creating a separate pagination component to navigate through the pages.']}, {'end': 1150.494, 'segs': [{'end': 818.825, 'src': 'embed', 'start': 755.598, 'weight': 2, 'content': [{'end': 756.979, 'text': "So let's do our ACF.", 'start': 755.598, 'duration': 1.381}, {'end': 758.5, 'text': "We'll create a functional component.", 'start': 757.019, 'duration': 1.481}, {'end': 761.321, 'text': 'This is going to take in a couple props.', 'start': 759.02, 'duration': 2.301}, {'end': 770.006, 'text': "It's going to take in a couple props, going to take in posts per page and total posts.", 'start': 763.122, 'duration': 6.884}, {'end': 775.809, 'text': "And then let's see, we're going to go right here and create a variable called.", 'start': 771.447, 'duration': 4.362}, {'end': 781.521, 'text': 'page numbers, which is going to be at first just an empty array.', 'start': 777.5, 'duration': 4.021}, {'end': 784.282, 'text': "And then we're going to do a for loop here.", 'start': 782.201, 'duration': 2.081}, {'end': 791.223, 'text': "And let's set let's set our index to one.", 'start': 785.422, 'duration': 5.801}, {'end': 800.906, 'text': 'And then what we want to do is say if index is less than or equal to the total post divided by the post per page.', 'start': 791.243, 'duration': 9.663}, {'end': 802.546, 'text': 'But we want to round that up.', 'start': 801.366, 'duration': 1.18}, {'end': 804.927, 'text': "So we're going to wrap it in math dot seal.", 'start': 802.586, 'duration': 2.341}, {'end': 811.943, 'text': 'And then total posts divided by post per page.', 'start': 806.081, 'duration': 5.862}, {'end': 813.724, 'text': 'So the two props that were passed in.', 'start': 812.003, 'duration': 1.721}, {'end': 818.825, 'text': 'And then, of course, we need to increment I.', 'start': 814.344, 'duration': 4.481}], 'summary': 'Creating a functional component to calculate page numbers based on posts per page and total posts.', 'duration': 63.227, 'max_score': 755.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk755598.jpg'}, {'end': 915.886, 'src': 'heatmap', 'start': 872.476, 'weight': 1, 'content': [{'end': 877.818, 'text': "I'm just going to set it to exclamation number sign because we're going to have a click event here.", 'start': 872.476, 'duration': 5.342}, {'end': 882.421, 'text': "And then let's give this a class name of page link.", 'start': 878.459, 'duration': 3.962}, {'end': 886.162, 'text': 'Again, just bootstrap syntax.', 'start': 884.061, 'duration': 2.101}, {'end': 888.964, 'text': 'And then in here we just want the number, the page number.', 'start': 886.743, 'duration': 2.221}, {'end': 891.663, 'text': 'All right.', 'start': 891.363, 'duration': 0.3}, {'end': 893.785, 'text': "So let's save that.", 'start': 892.124, 'duration': 1.661}, {'end': 897.709, 'text': 'And now we just need to bring in pagination into our app JS.', 'start': 894.666, 'duration': 3.043}, {'end': 900.211, 'text': 'And we also need to pass this stuff in as props.', 'start': 897.749, 'duration': 2.462}, {'end': 902.974, 'text': "So let's go to app JS.", 'start': 901.072, 'duration': 1.902}, {'end': 907.679, 'text': "Let's bring in pagination.", 'start': 903.074, 'duration': 4.605}, {'end': 915.886, 'text': "And down here, let's say right below posts.", 'start': 911.602, 'duration': 4.284}], 'summary': 'Adding pagination functionality and passing props in app js.', 'duration': 27.735, 'max_score': 872.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk872476.jpg'}, {'end': 949.18, 'src': 'heatmap', 'start': 917.56, 'weight': 0.758, 'content': [{'end': 922.942, 'text': 'pagination and we want to pass in the posts per page.', 'start': 917.56, 'duration': 5.382}, {'end': 935.727, 'text': 'And then we also want the total posts and we can get that simply by taking the posts that we get from the API and just getting the length.', 'start': 925.743, 'duration': 9.984}, {'end': 936.95, 'text': 'All right.', 'start': 936.71, 'duration': 0.24}, {'end': 937.871, 'text': "So let's save that.", 'start': 936.99, 'duration': 0.881}, {'end': 938.792, 'text': "Let's go back.", 'start': 938.091, 'duration': 0.701}, {'end': 939.792, 'text': 'And there we go.', 'start': 939.232, 'duration': 0.56}, {'end': 944.256, 'text': "So if I click if I click nothing, you notice that nothing's happening.", 'start': 939.812, 'duration': 4.444}, {'end': 949.18, 'text': "We haven't added that yet, but we're getting the correct number of pages here.", 'start': 944.276, 'duration': 4.904}], 'summary': 'Configuring pagination with posts per page and total posts for correct page count.', 'duration': 31.62, 'max_score': 917.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk917560.jpg'}, {'end': 1085.385, 'src': 'heatmap', 'start': 1038.641, 'weight': 0.701, 'content': [{'end': 1041.181, 'text': 'And this is actually going to be very, very simple.', 'start': 1038.641, 'duration': 2.54}, {'end': 1043.061, 'text': "We're just going to call set current page.", 'start': 1041.221, 'duration': 1.84}, {'end': 1047.292, 'text': "And we're going to pass in page number.", 'start': 1044.17, 'duration': 3.122}, {'end': 1051.236, 'text': 'Now this page number is just coming from this right here.', 'start': 1047.393, 'duration': 3.843}, {'end': 1054.879, 'text': 'I called it number here because we called it number here.', 'start': 1051.296, 'duration': 3.583}, {'end': 1059.763, 'text': "So we're passing that in as an argument and we're catching it.", 'start': 1055.259, 'duration': 4.504}, {'end': 1065.548, 'text': 'Actually, we need to pass that in here with that.', 'start': 1061.244, 'duration': 4.304}, {'end': 1068.831, 'text': 'OK, so that should work.', 'start': 1067.19, 'duration': 1.641}, {'end': 1069.532, 'text': "Let's save it.", 'start': 1068.891, 'duration': 0.641}, {'end': 1072.935, 'text': "And we're actually not using the set post per page right here.", 'start': 1070.112, 'duration': 2.823}, {'end': 1074.816, 'text': 'So we can actually get rid of that.', 'start': 1073.275, 'duration': 1.541}, {'end': 1078.599, 'text': "OK, so let's go back to our browser here.", 'start': 1074.836, 'duration': 3.763}, {'end': 1085.385, 'text': 'And if I click on two, you can see it changes three shows us the next 10.', 'start': 1079.42, 'duration': 5.965}], 'summary': 'Simple function to set current page with page number argument, removing unnecessary set post per page.', 'duration': 46.744, 'max_score': 1038.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk1038641.jpg'}, {'end': 1150.494, 'src': 'embed', 'start': 1129.758, 'weight': 0, 'content': [{'end': 1130.899, 'text': 'slash freelancing.', 'start': 1129.758, 'duration': 1.141}, {'end': 1135.422, 'text': 'The creator Kyle shared it with me and I can personally vouch that this bundle is well worth it.', 'start': 1131.219, 'duration': 4.203}, {'end': 1144.049, 'text': 'You get a 130 page guide to freelancing and it comes with things like invoice templates, client proposals, HTML and CSS templates,', 'start': 1135.702, 'duration': 8.347}, {'end': 1148.392, 'text': 'a portfolio website, access to a private Facebook community and much more.', 'start': 1144.049, 'duration': 4.343}, {'end': 1150.494, 'text': 'So use the code Brad25 to get 25% off today.', 'start': 1148.672, 'duration': 1.822}], 'summary': 'Get 25% off a comprehensive freelancing bundle with 130-page guide, templates, and community access using code brad25.', 'duration': 20.736, 'max_score': 1129.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk1129758.jpg'}], 'start': 755.598, 'title': 'Creating functional components and implementing pagination', 'summary': 'Discusses creating a functional component to handle acf and implementing pagination using bootstrap. it includes details on handling posts per page, total posts, click events, and provides a simple and adaptable pagination system. additionally, it mentions a helpful resource for starting a freelance business.', 'chapters': [{'end': 818.825, 'start': 755.598, 'title': 'Creating acf functional component', 'summary': 'Discusses creating a functional component to handle acf, taking in posts per page and total posts, using a for loop to calculate page numbers based on the given props.', 'duration': 63.227, 'highlights': ['Creating a functional component to handle ACF, taking in posts per page and total posts.', 'Using a for loop to calculate page numbers based on the given props.', 'Rounding up the total post divided by the post per page using math dot seal.']}, {'end': 1150.494, 'start': 818.825, 'title': 'Implementing pagination with bootstrap', 'summary': 'Discusses implementing pagination using bootstrap, passing props, and handling click events, resulting in a simple and adaptable pagination system. it also mentions the availability of a helpful resource for starting a freelance business.', 'duration': 331.669, 'highlights': ['The implementation of pagination using Bootstrap and props, resulting in a simple and adaptable pagination system. Demonstrates using Bootstrap markup for pagination, passing props for posts per page and total posts, and handling click events to change the page.', 'Mention of a helpful resource for starting a freelance business, offering a 130-page guide, invoice templates, client proposals, HTML and CSS templates, a portfolio website, access to a private Facebook community, and a discount code. Promotion of studywebdevelopment.com/freelancing, offering a comprehensive bundle for starting a freelance business, including a guide, templates, access to a community, and a discount code.']}], 'duration': 394.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IYCa1F-OWmk/pics/IYCa1F-OWmk755598.jpg', 'highlights': ['Mention of a helpful resource for starting a freelance business, offering a 130-page guide, invoice templates, client proposals, HTML and CSS templates, a portfolio website, access to a private Facebook community, and a discount code.', 'The implementation of pagination using Bootstrap and props, resulting in a simple and adaptable pagination system. Demonstrates using Bootstrap markup for pagination, passing props for posts per page and total posts, and handling click events to change the page.', 'Creating a functional component to handle ACF, taking in posts per page and total posts.', 'Using a for loop to calculate page numbers based on the given props.', 'Rounding up the total post divided by the post per page using math dot seal.']}], 'highlights': ['Tutorial on React Pagination covers creating a pagination feature in a React application using front-end pagination, hooks, and Axios, aiming to display 5 or 10 posts per page.', 'Introduction to Ultimate Freelancing Bundle offering a 130-page in-depth guide, invoicing and client proposal templates, website templates, and an SEO checklist, with a 25% discount using the code BRAD25.', 'Setting up State and Hooks explains setting up state values using useState and mimicking lifecycle methods within a functional component using useEffect, along with creating state values for posts, loading, current page, and posts per page.', 'Fetching Posts using Axios demonstrates fetching posts from a fake REST API using Axios, setting loading to true during the fetching process, and utilizing async/await for making the request.', 'Passing in an empty set of brackets prevents the useEffect hook from running continuously, mimicking the component did mount lifecycle method.', 'The chapter discusses building a post component to display 100 posts.', 'Implementing pagination logic to display a specified number of posts per page.', 'Creating a separate pagination component to navigate through the pages.', 'Mention of a helpful resource for starting a freelance business, offering a 130-page guide, invoice templates, client proposals, HTML and CSS templates, a portfolio website, access to a private Facebook community, and a discount code.', 'The implementation of pagination using Bootstrap and props, resulting in a simple and adaptable pagination system. Demonstrates using Bootstrap markup for pagination, passing props for posts per page and total posts, and handling click events to change the page.', 'Creating a functional component to handle ACF, taking in posts per page and total posts.', 'Using a for loop to calculate page numbers based on the given props.', 'Rounding up the total post divided by the post per page using math dot seal.']}