Supercharge Your React App: Master CRUD Operations with Axios, Router & JSON Server

In this video, we'll show you how to supercharge your React app with Axios, Router and JSON Server. We'll walk you through how to create, read, update, and delete data using Axios, Router and JSON Server!
By the end of this video, you'll be able to create, read, update, and delete data using Axios, Router, and JSON Server. We'll also show you how to use Axios to send data to a remote server! This is a great video for beginners who want to start building more complex applications with React.
TimeStamp:
0:00 Demo
01:23 Packages
02:17 Setup JSON-Server
02:51 Create All Components
03:42 React-Router-Dom
06:32 Fetch Records and Display
15:47 Add a new Records
22:59 Read a Record
25:58 Update Record
33:42 Delete a Record

[@paschalynukwuani6930]

Thank you for this tutorial. You gave a clear explanation of CRUD operations in Rest API with AXIOS. Kudos!!

[@asafv2707]

thank you very much I was searching for this for so LONG! Works awsome!

[@ZeeshanMRaje]

Learn it within 24 hours , thanks a lot chaudhari sahab ,. Respect from India

[@Alcsie]

Thank you for making this awesome video. This is a very good exam for React CRUD operations. I learned a lot of stuff from this exam.

[@zTechZona]

Thank you Yousaf 👍

[@irabor18]

Great tutorial!

[@anthonynarine5292]

awesome job. thank you

[@viswapentitheprogrammer]

It is great resource for understanding the React, thanks for making this vedio

[@princebabariya-fh2dx]

thank you brother for this video this video is realy very very helpfull for me so thank you so much.

[@user-rt1xi7yw4i]

😍very well explained, you took all my burden off .MAY ALLAH BLESS YOU🥰

[@broken_jail2506]

Thank you very much for the video, you are really good at explaining. Though i really wished you provided the github repo. Like the starter template

[@ihsanzull]

Thank you very much Sir. im not sure on minute @25:21, but I believe we need to initialize data in useState args to avoid never[ ] type in data. For your case, it should be useState({ name: "", email: "", phone: "", })

[@programmingwithnit5308]

Thank you so much.🎉🎉🎉

[@EmployeeItdepartment]

well explained👌

[@anangyoga1381]

thank you dude!

[@Key-yf3ou]

Good job man

[@MrCavid1991]

big thanks to you

[@mariyahadzhiyska7681]

Thank you, thank you, thank you, thank you

[@fzkhan]

nice keep it up.

[@JahirulIslam-hj5xe]

thanks bro

[@ShubhamKumar-gy7oi]

can't we fetch data on different page using ContextApi or redux toolkit and 1)then call the function and values and show it on either model or in another page , 2)preform data editing and then updating it like you did in edit option 3)last delete it in the above project i did tried but can't perform operation 2.

[@codewithyousaf]

I have performed crud operations with React-Redux too try it: kzbin.info/www/bejne/eoDOhIhprsxnrLM

[@sufyan_rasheed]

Very helpful video sir thank you but Can u provide db.json file or other source cod.

[@jhonearvintangonan277]

Hey bro is there a way to delete without refreshing the page?

[@GaneshBhatt-jk6kc]

if u r using location.reload what is the use of react then if page is refreshing

[@subedaraarthi2330]

Thanku

[@user-zu7vj6vg8e]

Why i am not able to get data through id whereas without using id i am getting the data....It show not found error

[@Roozikhan565]

❤

[@myytkn8526]

Hello, can you please make a video with a small React Store app and MongoDB where you save users and products into the mongo database with login and signup? That would be helpful.

[@Dev-Phantom]

cool

[@130panuwatponsa7]

😍

[@tranphuocanhminh73]

Is there any other way to delete the user without having to reload the page? If you reload the page, it's not very ReactJS

[@alen6937]

You can change the state on delete operation.

[@akshintalasurendrakumar2715]

Video content was good. From next time please share the code or github link

[@isaacwekesa8784]

thank you for the great guide. Could you be kind enough to share your code?

[@Marinho2371]

Boa tarde, tenho em um campo da table o formato de data yyyy-mm-dd e não consigo mudar para dd-mm-yyyy. Com backend node js consigo mudar pelo banco de dados mysql, através da instrução SQL e resulta no formato dd-mm-yyy. Ex: 20/05/1996 . Com JSON server isso não acontece. Uso a função no map da tabela: item.datat.toLocaleDataString() . Sabe como resolver ?

[@BabliKumari-cd2sz]

Kya ye sab code mil sakta hai sara

[@bhimanapavankumar9749]

Can u share ur package. json file

[@uyty1204]

hello Code With Yousaf and thanks you so much i want take your code so how i can take it. please

[@sd-fz2ku]

For update id when I'm writing code { '/update/${id}'} something wrong here which is causing error to update data

[@codewithyousaf]

use backtick {`/update/${id}`} remember to have route for update like:

[@sd-fz2ku]

Working

[@sd-fz2ku]

While showing previous values in update boxes we use value={data.name} here I'm getting error can't read name property

[@user-iw1pe9st4v]

Hello my dear friend, I need the source code for the project. Can you give me the link to the source code?

[@codewithyousaf]

When I upload I will share the link with you

[@codewithyousaf]

Source Code link: www.buymeacoffee.com/codewithyousaf/crud-operation-react-js-json-server-axios-router

[@gnanakamireddy7124]

Did the code work? not working for me

[@mohdkhaleeq7468]

bro will you give github code for this project

[@user-xl1eo3qv7b]

Please given a source code

[@user-cd2dw4do9d]

json-server is not working

[@soulxreeperyt4798]

bro i want db.json data please provide it

[@codewithyousaf]

I don't have that data right now because I changes my computer all the files ..... have gone .....

[@draconianyt5174]

But when you deleted your records it reloaded the page its wrong because it’s single page

[@BabliKumari-cd2sz]

Aap code kha se liye

[@draconianyt5174]

@@BabliKumari-cd2sz code nhi lye

[@Vijay-iv8zt]

Bro ,can I get the source code ?

[@sd-fz2ku]

Random id is getting added for me

[@codewithyousaf]

If you don't add id manually it will add automatically.

[@sd-fz2ku]

@@codewithyousaf for you how it's getting added sequentially?

[@ayaayman1598]

I had the same problem but even when I turn the id to a number, it still generates a random string id. Then I have found that in another application, this problem didn't happen. The difference between them: the json-server version. So after I downgraded from "1.0.0-alpha.23" to "^0.17.4", the problem was solved.

[@sd-fz2ku]

@@ayaayman1598 can u please write command here

[@codewithyousaf]

@@sd-fz2ku It was an older version I think the new version has changed.

[@navaneethakrishnan3871]

worst crud without any proper installation

[@thetoxic2823]

You need to improve your English skill sir ana way of teaching also

[@codewithyousaf]

👍👍

[@vampirekabir]

repo