React Query Tutorial for Beginners vs Redux, Axios with CRUD Example

In this React Query tutorial for beginners, we will build a CRUD example app and compare React Query vs Redux, Axios, and RTK Query as API access layers. React Query is easy to apply to React JS apps.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👀 Compare React Query to RTK Query ➜

React Query Tutorial for Beginners vs Redux, Axios with CRUD Example

(00:00) Intro
(00:34) Welcome
(00:45) React Query vs Axios
(01:02) React Query vs Redux
(01:26) React Query vs RTK Query Part 1
(01:51) Starter Code and Dependencies
(06:19) Axios API instance and methods
(10:04) Queries and Mutations
(15:10) Applying a mutation
(16:22) New item section
(17:12) Conditional rendering values
(19:14) JSON server
(20:10) Checking the app
(21:03) React Query Devtools
(22:01) Update and delete mutations
(23:24) Transform data with a selector
(25:02) Final Verdict: React Query vs RTK Query

📚 Tutorial References:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 General React References:

✅ Follow Me:

Was this tutorial about React Query and building an example CRUD app helpful? If so, please share. Let me know your thoughts in the comments.

#react #query #tutorial

[hamzahahmad]

Absolutely underrated gem of a channel. This was such a brief yet thorough

[VernonSwanepoel]

Brilliant. I've been on a project at work, in a fairly large codebase using react query already, and I'm still learning react itself, so there has been a lot to get my head around. This helped me a lot!

[msgrz]

Thx! I use RQ and Recoil at the moment.

[oortcloud]

What a fantastic video. Everything explained so concisely and clearly. Thank you!

[ramusubbu]

Videos like this will be interesting!! Concentrating on one task! And explaining different methods by which we can achieve the task!

[thecutedreamkostasp.]

Another excellent tutorial! You sir and net ninja are the best out there!! Ty!!!!

[raffaelenicosia]

Dave, you're definetly raising the bar!

[abuhossain]

as your lesson its clear that rtk and react query use case depends on the size of project.

[MrQVeeBoo]

thx. straight to the point and this one is very easy to understand.

[mrbilchalan]

Hello Dave, I have watched almost all of your video tutorials. If you have some time, I am expecting a socket io And a sequalize tutorial from you. Please carry on. Thank you.

[farhanizzaz]

hello, may i know why u used the select meanwhile the docs said that the third parameter is for the cache time? thank you

[AnnieTaylorChen]

I was going to ask you the "fetch" vs. "axios", is it still relevant today to use "axios"? I saw you are using it in React tutorial.

Lately I've been considering React Query and will definitely check out this video too!

[ssj]

Thanks for the video, great intro to react-query.
Quick question if you don't mind. Why do you use a variable with JSX instead of a Component? (e.g. newItemSection), is there any benefits to this or is it personal preference?

[IzharJumadi]

Great stuff! Thanks so much for sharing :)

[permanar_]

freaking awesome dude.
cool!

could you do another video with swr maybe with React/Next.js by any chance tho?

really appreciate this hard work anyway 🎉🎉

[Rafiki]

Really good content, I'm new to react and these videos are a great way to learn.

[laxmiprasanna]

Does components render or update if server state changes in React query ? I mean without maintaining additional client state.

[minijavi]

Great work! Loved your video.
Just one thing I'm not quite understanding... where are we mapping our ./data/db.json to the Todo api? how does the app knows?

[sinhuu.s]

congratulations !! very good. so that I use an add function on another page, for example, just import TodoList and use the addTodoMutation function?

[kishoreandra]

super helpful video yet again Dave ... 💯