React Contact Manager App | CRUD | React JS Tutorial 2022 | NAVEEN SAGGAM
HTML-код
- Опубликовано: 2 июн 2024
- #React , #CRUD , #ReactProject
Support Me @ : / uibrainstechnologies
Download Source Code :
Step 1 : GPAY / PayTM/ PhonePe +91 - 98 44 80 45 33 with 100 Indian Rupees
Step 2 : Send WhatsApp message to same number with payment screen shot.
Subscribe Our Channel : ruclips.net/user/UiBrainsTec...
Join Our Facebook Group : / uibrains
My GitHub Page Link : github.com/thenaveensaggam/
Our Website : uibrains.com/
** Chapters **
00:00 Introduction to the Application
05:55 Project Setup & Creation
11:55 Installation of Bootstrap & Font Awesome
20:11 Installation of Axois & React Router Dom
27:33 React Router Configuration
31:30 Navbar Creation
33:10 Contact List Page Development Static Data
48:50 Add Contact Page & Edit Contact Page Development Static Data
57:17 View Contact Page Development Static Data
1:01:06 Backend Server Setup Json-server
1:11:36 Backend API Testing
1:16:50 React Services Creation
1:18:48 Contact List Page with Server Data
1:32:26 View Contact Page with Server Data
1:48:06 Create Contact Page with Server Data
2:06:30 Update Contact Page with Server Data
2:24:33 Delete Contact Page with Server Data
2:28:55 Search Filter on Contacts Data
**Web Development 2022*
HTML5 Tutorial in Telugu : ruclips.net/user/UiBrainsTec...
• 01 Introduction HTML i...
HTML5 Tutorial :ruclips.net/user/UiBrainsTec...
• 01 HTML Tutorial for B...
CSS3 Tutorial : ruclips.net/user/UiBrainsTec...
• 01 Introduction to CSS...
JavaScript Tutorial :ruclips.net/user/UiBrainsTec...
• 02. What is JavaScript...
Bootstrap Tutorial : ruclips.net/user/UiBrainsTec...
• Bootstrap 4 Tutorial f...
AJAX Tutorial :ruclips.net/user/UiBrainsTec...
• 01. Introduction to AJ...
TypeScript Tutorial :ruclips.net/user/UiBrainsTec...
• 01 Introduction to Typ...
Angular Tutorial :ruclips.net/user/UiBrainsTec...
• 01-Introduction to Ang...
MEAN Stack Tutorial : ruclips.net/user/UiBrainsTec...
• 01 Introduction to MEA...
React JS Tutorial :ruclips.net/user/UiBrainsTec...
• 01 React JS Tech Serie...
Node JS with JavaScript Tutorial :ruclips.net/user/UiBrainsTec...
• Angular 8 Online Train...
Node JS with TypeScript Tutorial :ruclips.net/user/UiBrainsTec...
• 01 Introduction Node J...
Node JS Authentication Tutorial :ruclips.net/user/UiBrainsTec...
• 01 EventsNow Introduct...
Coding Practice Examples :ruclips.net/user/UiBrainsTec...
• 07 Codingbat | Warmup ...
** Crash Courses **
Bootstrap 5 Crash Course :ruclips.net/user/UiBrainsTec...
• Bootstrap 5 Crash Cour...
⭐️ Hashtags ⭐️
#HTML #beginners #tutorial
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.
I have a doubt regarding the async await part for getting contacts . I heard using async directly inside useEffect is not a good practice
/ ❌ Don't do this!
useEffect(async () => {
const users = await fetchUsers();
setUsers(users);
return () => {
// this never gets called, hello memory leaks...
};
}, []);
This WORKS, but you should avoid it. Why? Because React’s useEffect hook expects a cleanup function returned from it which is called when the component unmounts. Using an async function here will cause a bug as the cleanup function will never get called.
use this way instead
useEffect(() => {
const getUsers = async () => {
const users = await fetchUsers();
setUsers(users);
};
getUsers(); // run it, run it
return () => {
// this now gets called when the component unmounts
};
}, []);
Thanks
Awesome tutorial, great job
thank you!
you really help newcomers like me ✌
Thank you for this tutorial , I want to ask if there is any configuration if I used asp core api , I mean , is it same as json server? .
Excellent project sir, I love it ,
Hi sir ,thanks for uploading such wonderful content...😍
awesome tutorial, thank you sir
Fantastic tutorial!!
It is a nice tutorial, thank you
Superb! Tutorial 😊
Can anyone tell me how to deploy this project ?? Both server part and src-component. I made delopy using npm build and netlify but contact detail is not displaying..pls help
Awesome Sir.
Thak you for sharing.😍
Hello sir. Please I getting this error when using the POST API function error: Unhandled Runtime Error
TypeError: func.apply is not a function
Call Stack
HTMLUnknownElement.callCallback
Hello everyone. I'm facing an issue while launching my app after intalling firebase. The error message is "Module not found: Error: Package path . is not exported from package". It's asking me to see exports field in package.json
Can someone help me go through this please?
I made the same project with your tutorial it was awesome.
Now can you please make a video on hosting the contact-manager app on anywhere.
Please give your source code as we are finding errors in our code
great sir
Why can't you use this db. Json file inside src. Why we have to go for separate folder
Thank you sir
💻
Sir please deploy it in netlify and show us. Am having error after deployed in netlify. I put separate folder for server. Is this the issue. If i run locally by starting both client and server, it is working properly. But after deployment it is not working it cannot able to get /contacts.please help me
I have a doubt that when we use json-server and json file, when we deploy the app will it works.
how to create a react using node or firebase, pls make one project of it?
Sir Can you please do a tutorial on movie ticket boking with MERN stack ?
You should mention it's a class you are using
ty so much sir
Great tutorial ! I'm stuck in the server side rending part and GITHUB link doesn't have src folder. Can you upload it please?
1:12:28 he had open the o/p of json contacts file in chrome there u can see the data or take a screen shot
dont know what methods you are using but after 1:16:00 nothing is running. This code is shows error where using colon(:) useState(initialState:{ , useEffect(effects: ....... and so many errors.
super bro, bro could u plz share Source Code plz
so there is one problem with the database when u are trying to open it in a new browser so the record u are trying to select for groups so should not accessible so what actually solutions for the same try that once u will get it and nice thing learn
hello sir, you are using useEffect to fetch data from json u are doing wrong async
because useeffect return sybchronous not asynchronous
thank you
Sir please make video on how to deploy this project
thanks alot
sir how do i do this with spring boot please help me
I needed this.. Thanks a lot It's too good
thank you
Felicitaciones y gracias por éste tremendo tutorial, está de lujo, pero el vsc me dá error en el 1:19:00, no me reconoce y no puedo avanzar... nosé cuál es mi error... ayuda por favor.
HELP
@@hakanturan7871 no
not able to get data into console using useEffect
Is search bar. Working
Hi, when I try to use ViewContacts to get single contactId, I get an error 404 not found. What could have been the cause?
a typo maybe?
To correct the useEffect() hook error - async await part for getting contacts - change your code to:
useEffect(() => {
async function handleResp(){
try{}
catch{}
};
handleResp();
}, []);
-------------------------
New version of react throws errors if you use async () => {}
Thank You So Much For This comment bro Bhai Ek din pura gaya Aur dusare din comment dekhne laga to Aapka Comment Dikha Aur Error Fix Huaa Etni Khushi horahi Hai kya Bata U Apko THenk You So Much Once Again Bro
Thnx sir
my pleasure
Bro Git me src file bhi upload kro
Try to used dark black or good theme for vs code because code visibility is not good.
its not visual studio it is web storm default theme is like this.
1:19:15 i am getting syntax error from there. Its showing
Error: The type cast expression is expected to be wrapped with parenthesis when using get function ,Expected ',' etc
Hello
Getting same error
Did you solved it?
same
@@ketanchopade1820 did you solve it?
@@ketanchopade1820 nope
sir while opening this project in new window , created contacts are not synching. can you clarify this
Do you have solution of this?
how come async await work with useEffect, for it was getting error.
yo también estoy teniendo problemas con el useEffect
@@cristhianosoriosuarez4603 useEffect bever return anything we have to create new function for async await
how to solve this
hello sir ,thanks for uploading such wonderful content❤ .just have a doubt ..
what does ...state means in setState function?
... is the spread operator
so he is passing the actual state with "...state" and then making other changes.
@@00xfitx2 do you know at1:19:16 how to get the "initialState:" on line 6?
what extension or plugin is it?
@@jackynewton5735 i don't know, he's using webStorm IDE, it can be from there :)
What are you doing when he explaining such a stupid question
Thanks, already subscribed your channel
at 1:19:16 how do you get the "initialState:" on line 6?
what extension or plugin is it?
Thank you for this awesome tutorial, It's helping me tons!
Hola,yo también tengo ésa pregunta, él vsc me da error justamente en éste momento, no puedo avanzar y no sé lo que es, simplemente me atasqué ahí. Estoy desesperada porque no he podido descubrir la respuesta.
@@gabyzapata9183 use direct object without giving it a name (initialState) your problem will be solved. But then again you will get stuck in contactList page where you will call your data from json-server.
Sir when I use the async based call back i get an error plz solve it
🔥🔥🥰🥰🥰🥰
Stuck at 1:21:08 when I inspect on application it shows error not able to se the array of user
its resolved or not?
Resolved
@@pochankiTuber me to
@@pochankiTuber How did you resolve the issue? I'm getting a "useEffect must not return anything besides a function...instead, write async function inside your effect and call it immediately."
I am getting an error
Failed to compile.
./src/components/contacts/ContactList/ContactList.jsx
Line 6: Parsing error: The type cast expression is expected to be wrapped with parenthesis.
4 |
5 | let ContactList = () => {
> 6 | let [state,setState] = useState(initialState:{
| ^
7 | loading :false,
8 | contacts : [],
9 | errorMessage : ''
Remove the "initialState" word from your code.
@@deepakkadela3056
Src folder bro
Src file..
This should not be called "tutorial", there is plenty of code that is being added by Webstorm itself and you are not showing it at all...
this app so ussles
Deepak Kadela thanks and one more error geeting below code
src/components/contacts/ContactList/ContactList.jsx
Line 11: Parsing error: Unexpected token, expected ","
9 | })
10 |
> 11 | useEffect (effect: async() => {
| ^
12 | try {
13 | let response = await ContactService.getAllContacts();
14 | console.log(response.data)