Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

This pagination in React tutorial gives two full examples with React hooks and React Query. You will learn how to display pages of query data, numbered buttons, and create next page, previous page, first page and last page functions for navigation.

⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview

Subscribe https://bit.ly/3nGHmNn

React JS for Beginners full course - 9 hours: https://youtu.be/RVFAyFWO4go

Course Updates https://courses.davegray.codes/

Completed Source Code: https://github.com/gitdagray/react_pagination

Pagination in React Tutorial with React Query, Hooks Examples

(00:00) Intro
(00:33) Welcome
(00:43) Installing dependencies
(01:32) Tutorial Pace
(02:02) Begin Example #1: Axios
(03:50) React hooks only, Basic API
(04:37) Post component
(04:51) useEffect
(05:38) Complete Example1 component
(07:16) Check Example #1 functionality
(08:57) Begin Example #2
(09:17) User component
(09:40) More useful API data
(10:55) Axios instance #2
(11:53) Example #2 imports
(12:37) React Query: useQuery
(14:01) React Query: isPreviousData and keepPreviousData
(15:19) More Example2 component
(18:47) PageButton component
(19:39) Example2 JSX
(20:05) Example #2 functionality
(21:03) Change next & previous to first & last
(21:57) Test the new functions

Buy Me A Coffee: https://www.buymeacoffee.com/davegray

Tutorial References:
React Query: Paginated Queries: https://react-query.tanstack.com/guides/paginated-queries
JSON Placeholder - Posts: https://jsonplaceholder.typicode.com/posts
ReqRes.in - Users: https://reqres.in/api/users?page=1

ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

Was this React Pagination tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #pagination #tutorial