React JS CRUD Operations using JSON Server REST API | React JS Full Course
Вставка
- Опубліковано 30 вер 2024
- #reactjs #reactcrud #nihiratechiees
This vides explains React JS CRUD Operations using JSON Server REST API
Steps Followed
==================
1, Implement Listing
2, implement Create Employee with validation
3, Implement details page
4, Implement edit employee
5, Implement Delete
Installation steps
=================
1, Create new app
npx create-react-app employee
2, Create routing
npm install react-router-dom
3, Install bootstrap
npm install bootstrap
4, Install Json-Server
npm install -g json-server
GitHub Source code link
---------------------------------------
github.com/nih...
Join this channel to get access to perks:
/ @nihiratechiees
.btn{
display: inline-block;
padding: 10px 20px;
margin-right: 10px;
}
That you want replace?
You have covered maximum scenarios buddy...what a great explanation.....i understand 80%...thanks 🙏.... 💕 From Telangana state...india
Thanks bro. I am really happy receive these kind of appreciations.. It's encouraging me to create more videos
Amazing tutorial, the creator is generous, we don't need to buy coffee to get the code, thank you!
Thanks
I learnt a lot from you today. I can't even begin to explain how useful this was. This was a quick tutorial that covers a variety of topics. I was able to understand everything when I watched the second time. I don't know any frontend technologies, so I had to watch twice. I had a similar project with strict deadline and this video was a lifesaver. Thanks a ton for making this video.
Glad to hear👌 All the best👍
when I pass the id to LoadDetail, LoadEdit, RemoveFunction the id indicated undefined. Can you explain why is that?
Can you put console.log check whether you able to pass and get id
Sir actually json file is not creating by giving this command in terminal
json-server --watch db.json --port 8000
npm install json-server first install then try that command
how to get the serial vise id , getting random id and you its showing serially and futher method to specfiy the id
Please use empty array or in the dummy record use number value in id column... For more details refer json server documents
Hello sir ID is generating like a5b6 not coming in sequence order 1,2,3
Clear the array in json file and try... It's creating based on old record
I have problem in installation of 4)JSON server
Please help me
What error occurs?
Number is not generated it creates some garbage values please explain that also
Can you create one dummy record in json arry (have id value as 1) . Any way it's fake api . We can't use for real time application
I am using video quality 480p but it is not clear visible
Change to 720
Sir how to use fastAPI instead of rest api
Will check and let you know. I don't have much idea in fastapi
Please sir make video on react with express.js
Will plan soon
Hi bayya clear explanation thanks a lot,but the problem is the json file data is not showing in the browser
Can you pls help me what the things are added in the project
Are you getting any error in console?
@@NihiraTechiees I'm getting error in console
Best React CRUD operation video!!!
I begin with no knowledge on React and was able to build a copy of your employee app.
Please upload more React tutorials.
Thanks for your valuable feedback 👍. Will plan for more videos upcoming weeks
I am facing an error 8n creating db.json it shows me db.json file not found what to do
First install json-server then try
Create and open the db.json file manually.
Can anybody help me understand the react router
What you expecting about router?
If you expecting basic info then just check my reactjs playliat
How to solve ID numbering issue?
What was the issue in id?
Bro json server using chesi website live Loki host cheste work avathada
Json server is fake api...only used for development until you not having actual api...for production you cannot use this
Can we use react with express.js?
I believe yes
Why you are reloading the page on delete?
You can only reload the component.
But as the url not changing history.push not working.
Reload the page is not the proper way.
Can you please only reload the component, without reload page?
Is this possible?
Yes possible. Will cover in future videos
Hello sir , im not able to get sequence id number it is displaying random 4 digits numbers like 6a65 ...can you please help me !
Are you using json server api?
plz help me
When i navigate back to the landing page after submiting new info , yes i get the updated ui with newly upadated info
but what i want is if the same website is opened in 2 tabs simuntanousely , if i add info in one of the tab , the landing page of the other tab should get automatically updated with the newly added info
how can i achieve that ??
ua-cam.com/video/Lr0Sy8xE1hY/v-deo.html
Follow redux pattern it will reflect automatically
Hello sir ,thank you for this amazing tutorial for CRUD application. I have one question, we have one button on interface that is AddNew, can we create an another button where we can give the attendance for those employee who is already registerd and How? please respond
Yes we can add multiple buttons and events based on our requirement
I typed all the code as shown in the vedio . upto creating the table everything is good but the db.json data is not displaying in the table.
First check your api is running also check console for any error
one doubt for ex. we have 3 id's those are 1,2,3 then we have to delete 2nd id so remaining 1,3 id's are showing, instead of 1,3 how to show sequence like 1,2.
Brother here id column is unique so we cannot modify like that
if I copy your code and I use the json placeholder instead, will it still work the same way?
Follow the steps it will work.
I can't save a new record. The save button is not working. Do you have any idea why?😢
Check console, for any error?
In this i am not able to fetch json data
I tried many times but it show failed to fetch so what should i do..?
Could you check the console what error is coming
I learn a lot of new things from this tutorial. Very useful. Thank you 🙏
Glad to hear👍
hello nihira my data in payload is correct but api is only given an id
Can you confirm your api working fine?
Plz do more videos react Auth pagination
Ok👍
Great video.
But had one doubt, when trying post with web api it gives bad request with json server it works fine. Can you help me with this.
Please share error details to my email
Also please check your api working in postman
@@NihiraTechiees yes its working with postman
My edit button is not working
There is one error (cannot read properties of undefined (reading 'length'))
Just check the parameter in your function, I think you misspelled
@@NihiraTechieesthanks I will check
Just wondering sir what to do if you want for these codes for example to listen to a different an existing api?
Concept is same for all REST api, you have to change the endpoint
Great video ❤
Thanks
Thank you very much...this video is really help for beginner... ❤️❤️
Welcome bro
This is a great video with easy to understand explanation. but I want to ask, what if I want to set the ID so that it can be displayed in a certain format (example; AB001 or XY123). Can you help me?
You have to pass this Id also from our post method. Make sure the ID value is unique
Hello! when i click submit it automatically refresh and the data didn't save. Should i put some delay or what should be done on this end?
Add console log and verify, I believe you have some syntax issue,
Also cross check the actual source code from GitHub, link I shared in description,
@@NihiraTechiees Big thanks its working now i believe the issue was the e.preventDefault();.
last question please,
when i tried using navigate('/') it just goes to the main page, if i try to add
navigate('/add',)
then it will do nothing.. Any advise?
First you have to define your routing I think you not defined route "add" In the routing
Hi, I have a doubt, when we click delete button and after alert, the page is reloading, if we dont want to get page reloaded, then how? I tried to put e.preventDefault(), but its giving error
Your page refreshed due to other issue. Preventdefault is for post request
It reloads due to window.location.reload(). Remove that instead
Also I have the same query.
Why page reloading on delete?
Only component should reload.
Also if you use history.push it will not gonna work.. because url is same.event will not fire.
I am a beginner in react.
Did you find any solution?
If yes.please help me..
It would be really helpful.
Thank you very much for formation 🤗
Thanks
thank you so much for this project very helpful😃
Glad to hear
Thanks man, your're the best, you saved my life
👍
Thanks🙏
Thank you so much , now i understand how to use API's
Great
@@NihiraTechiees can you pls continue with this video that how to upload multiple image in react
while watching this react tutorial feels peace, thank you sir
Great words 🤝 thanks
json-server not properly connected. throw in 304 error
Reinstall json server and try again
@@NihiraTechiees okay
Excellent video, explained very damn straight....
Thanks
Fantastic Video & lot to learn✅✅
Thank you! Cheers!
which snippets extensions you used ?? for SFC
"Simple React Snippets" in VS Code
@@NihiraTechiees In coding interview, they asked me to build Sicky note with drop down menu which should have color names, color must change, then CRUD operations should happen, and using json. How to do this? can you do video on this.
Sicky note i am not understand, can you provide more info to my email
This is a great video Nihira. Thank you.
However, I cannot get past the err_connection _refused /failed to fetch @localhost. Do you have any idea why?
Is your json server running in the port number of 8000?
he gays or hi guys ?
Appreciate your doubt 👍
@@NihiraTechiees
welcome
Crystal clear explanation. Thank you for this video.
Thanks for the wonderful words👍
how to delete all data by button delete all
That you can handle from api
I refered many tutorials but they were not up to the mark. But you explained well the presentation is good bro👌thank you
Thanks bro for the wonderful feedback
This is the best Reactjs CrUD operations vedio i have found.
Thanks
If its possible please upload Registration and login functionalities
Unable to create db.json file
I hope the command will create the file. Otherwise you can right click and create it's just json file.. .. While executing command you have to mention the file name
Excellent explanation, thank you very much!
👍
Great saved my time , did well , thanks!
Welcome🎉
Informational and straight forward, thanks for the tutorial and the Github repo it helped me to learn in practical way, good luck for future videos, keep coming with more videos !!
Thanks for the wonderful words👍
Great video, thanks so much
🤝👍
Not Working Sir😢😭
Follow the steps and cross check with actual source code, code available in GitHub link in description
Sir edit page is working but it is not updating the table plzzz help...
Edit save updating db.json?
Got my problem sir thank you great Vedio........plzzz make Vedio a e-commerce website using react
Sure, will include my plan
can u help me to fix that i have the same problem bro
Sure
Thank you
You're welcome
thank you!
Welcome
Excellent explanation and very good narration.
Thanks
is there example for login?
Will upload soon
@@NihiraTechiees awesome, thanks 👍
Thank You
Welcome
You are best sir
Thanks
Great video!!!!
👍👍👍
Thanks
please tell how id will auto generated ??
It's default feature in json server
@@NihiraTechiees from the based API it will change right?
Yes bro . First field should be named with id. If you providing some value it will consider but the value should be unique. If you not provided value then it will generate.
Still Json server is fake api used for only study and development. Only
@@NihiraTechiees let me try brother will discard disable attribute input field named with ID and see , will try giving unique value to it
bro I hope that whatever unique value I given to the ID field will store same as given in db.json file right after make above changes ?
cool
👍
This is the best React CRUD operations video have ever found
Thanks
How we use this by check box??
By using checkbox we have to do create, edit, delete operations??
It's based on your requiremrnt
@@NihiraTechiees yes but I don't know how to apply so I asked you to help me with this
👍👍
🙏