Let's perform CRUD Operations with React and Axios - Tutorial for Beginners

Welcome to my React CRUD Operations video. We will be using Axios for sending requests and Semantic UI for the interface.

⌨️ 0:00 - Part 1: Introduction
⌨️ 0:47 - Part 2: Setting up the Project
⌨️ 2:30 - Part 3: Creating the app
⌨️ 3:35 - Part 4: Creating the CRUD Components
⌨️ 4:06 - Part 5: Installing Axios
⌨️ 4:27 - Part 6: Create a Mock API
⌨️ 5:32 - Part 7: Create Operation
⌨️ 6:48 - Part 8: Creating a Form
⌨️ 7:18 - Part 9: Sending Post Request
⌨️ 12:10 - Part 10: Read Operation
⌨️ 18:00 - Part 11: Adding Update and Delete Buttons
⌨️ 19:12 - Part 12: Adding React Router
⌨️ 19:37 - Part 13: Creating the routes
⌨️ 24:03 - Part 14: Getting the unique ID's
⌨️ 25:09 - Part 15: Storing the ID's into Localstorage
⌨️ 25:46 - Part 16: Creating the Update form
⌨️ 26:18 - Part 17: Auto Populating the Update form
⌨️ 27:41 - Part 18: Update Operation
⌨️ 29:29 - Part 19: Delete Operation
⌨️ 31:21 - Part 20: Final Touch
⌨️ 33:41 - Part 21: Conclusion

If you enjoyed this piece, please do show some love with a like, comment, or just click on subscribe button. Every bit matters :)

[thazinphyoe]

Thank U So Much
I'm an Internship n My Senior told me to build CRUD app I didn't even know how to start
This video helps me to understand and save my life❤

[thimiraakash]

wow what a clear explanation! Bro I think you have missed to add this part in the Read component in the video but it is in the GitHub source code =>
const setData = (id, firstName, lastName) => {
localStorage.setItem('ID', id)
localStorage.setItem('firstName', firstName)
localStorage.setItem('lastName', lastName)
} and set the function from setID to setData(data.id, data.firstName, data.lastName) in the Update Button component.
Thank you very much for your great video!💚

[bkworldmusic]

Congratulations Nishant ! You have done it like a professional. Keep it up

[hackingtricksforgamelovers]

really thankful 😍😍😍finally able to create and send using mock api

[SharadChandraT]

excellent tutorial, great explanation. thank you brother for this useful video.👌👌👌👌👌👌

[prashants]

Sir console me hi submit ni ho rha kyu same code hmne bhi likha hai jaise kuch bhi type kr rhe input box mein vo console me likha rha

[romanticvedios]

You have created Delete component but file not used and you put delete path in App.js that is also not working It is saying 'Delete' is not defined .

[konkan-swarg]

Thanks nishant
You are doing great work.👍

[DrakeHDxgaming]

the router part doesnt seem to work for me

[theo_ch]

Excellent tutorial!
It only needs an update in Router 6
The one in the video is:

let history = useHistory()
history.push('/path')

and now is:
let navigate = useNavigate()
navigate('/path')

[meyyarasupalanisamy]

It was a wonderful explanation brother, Thank's

[asfnobambu]

Nice! Thank you. But that is not the modern way to use Router anymore... Also useHistory was replaced by useNavigation

[luisacavalcanti]

why did you use localstorage instead of updating direct frm the database???

[Tech_Talks]

sir...how to send data in the database from mock API ?

[nanditawaghchoure]

I m not able to see output on my screen

[michaelclarke]

Can anyone help me? At update it's coming undefine name nd last name

[AMITTIWARI-oxvl]

Hi Nishant ..Could you please help me how to add a Select dropdown and bind the data from a external API and post it to our Mockserver and then display the selected input in the table I am complete beginner please help ..For ex table column

Number First Name Last Name Selected Role Update Delete

[jbeliferes]

how resolve this error: eperm: operation not permitted, read

[nmesomasolomon]

This was a wonderful tutorial i learnt a lot

[saicharan-jiuu]

Hey i have watched this video and learned crud operations, i have small doubt regarding the read data, i want to add another button apart from update and delete and this mutton should let me view the particular individual data, can you tell me how i can do it