why have used json server instead of express js server for backend and LLy for routers. is this workflow companies flow or it used to connect frontend to backend.
I already watched so many tutorial videos and already know many things about react but things are not cleared in my mind so i am literally start searching more react js videos on youtube so i found this masterpiece. You are awesome brother. Thank you so much
Hello Anish. Are you a fresher seeking web developer jobs currently? We are a web dev company based in Bangalore and looking for talented freshers to join us! If you are interested, please connect with me using the contact information on my channel.
i'm really glad the yt suggestions brought me to your video. for a rather small youtuber, your video and presentation quality is great. the clear structure, timestamps and flow is super helpful. especially for beginners, i think it is very easy to follow
Watched this first react tutorial as beginner and I am really impressed by the way you explained all the concepts. This tutorial is a great overview of react concepts for beginner to mid level learners. helped a lot. Thanks for great content.
frist of all remove the remove the f**g world {for beginners }.. this is absolutely not for beginners . you are not explaining concept .. you are just telling us and doing code by your self on your own.. Just west my 1 hour..
@@DipeshMalvia m not getting local storage at 36.00 from this video After refreshing data is also fanishing Plz help me out of this I was struck over there Unable to do it
Top class content. Have seen many ReactJS beginners courses and I can say this is the best. After watched this, went through your other courses as well and you are too good. Thanks for all your efforts.
the new version of router takes in element in the place of component, also 'Switch' is changed to 'Routes' and you dont need to use 'exact' prop. there's no need to add an arrow function in the Route, just copy paste the component in the element prop along with the props sent to the child component, and you're good to go
Appreciate max. This is so helpful, specially when you want to revise everything without spending hours on lengthy videos, 2 hours and you already brush up components, router, axios and CRUD, hooks. I really love your videos ever since I went through your redux tutorial.
Thanks, Bro for this beautiful tutorial, I feel comfortable with React now, After going through a lotta React tuts without grasping the concepts and their applications... Thanks.
You'll run into two issues throughout this course. But Dipesh appears to have been working on a new version, so they'll be fixed i guess. But here they are: 1. Switch is no longer is existence. It's now Routes. 2. uuidv4 has been deprecated. So use this import instead: "import { v4 as uuid } from 'uuid';" - You'll just need to install "uuid" with "npm i uuid" Thank you for the video, Dipesh. It was very well done!
@Nik @Dipesh, I am running through the same issue that is uuid error. As you described I tried importing uuid as v4 but that's all we have to do? or need to make any more changes? Please reply it would be of great help to me.
@@devangshah1222 If you tried, "uuid as v4" then that may be your issue. Try "import { v4 as uuid } from 'uuid';" This still works in my code. Also, make sure you 'npm install uuid'. With those two things, you should be up and running.
There will be some in-router 1. The issue you're encountering might stem from changes in React Router v6, where the state property is no longer passed in the same way when using Link or navigate. 2. switch not using 3. Instead of component will use element
Some of the imports in react-router are changed ...Like , can never be used in the version 6 instead we can use: ..... enclosing all the route inside routes everything works as same as used with , and switch and exact prop and also render's syntax is changed to element={ } ---its soo simple than the mentioned in video and for history we need to import useNavigate from react-router history=useNavigate(); and then use as history("/path")
I had started this video at 11 am today and now i had completed this project. I was begineer web-developer and starting my full-stack journey for 3 month as a intern in a software house. there were a lot of bugs and error through out the coding process on my side but i try my best to overcome those issues. Thank you for this video.
Hello, you obviously have a very valuable content here in this video and thank you for that. Not that i don't appriciate your effort, but I would prefer instead of descriptions like "copy this to here", you could easily and a bit slowly show what to do next after each move and most importantly why we do that for, otherwise we're just trying to memorize the code blocks and not understanding the concept behind it. I hope you take this as a constructive critism. Thank you for producing up-to-date videos like this one.
I thought I'm the only one with the same problem) Watchign video several times and still cannot get some moments when we pass props between componentes and this two side relation between components and some other details. Really missing explanation why we do some things. It's the third day I'm struggling with first 40 mins of the video. Will rewatch it again tomorrow). Anyway, I'm thankful to Dipesh for this course.
Ben de ilk başladığımda açmıştım. Bu projeyi yaparsam anlıcam sandım ama olmuyormuş. Biraz ilerleyince konseptlere hakim olunca pekiştirme niteliğinde işe yaradı benim için.
Watched this video. Very helpful. I have followed each and every step as I am new to ReactJS. I have used useEffect to retrieve data from local storage but data is not vanished once I refresh it.
Delete completely the localStorage.getItem lines, found in useEffect function. And edit the useState() line like below: const [contacts, setContacts] = useState(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []);
I think you forgot to mention the difference between a functional component and class component at 13:00 and 15:00, this is actually really important and why
the issue with other courses that they take take long time to teach everything + they teach randomly , but what i found in this vid is application of all fundamental things in react and in simple way !!! thank you .
Just an absolutely amazing tutorial, earned a subscription. While I feel like I have a decent grasp on vanilla JS, I was so confused coming over to React but this video was terrific in explaining everything!!!
I am new to reactjs. I followed your steps, localStorage stores the data but cannot persist data. Below is my code useEffect(() => { const retriveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
Just the right level of depth.. Rather than explaining what is a variable :) Most technical writers and youtubers take on a too wider audience and lose focus. This is crisp. Can't thank you enough.
I had watched videos for react but I see every body focus on single concept in deep so we feel like react is very long but after watching this video I learn major concepts cover in one go and in very simple and incredible/Worth full manner I really Appreciate Dipesh Keep it Man!! Thanks
Bro You're Great I learned alot. I gave interview by showing this project and explain all the functionalities, he's really Impressed.. Keep Making React Project Videos It really helpful for us. A Huge Support From our Community🚀🚀🚀
Thank You for your tutorial - in this world where there are expensive paid courses, you are helping students like us giving high quality content on TH-cam.
@@hiteshsuthar1097 That's great! Can we please connect on LinkedIn or gmail for more details? Just search for Shivani Gaddagimath on LinkedIn and request to connect please. The first profile that pops up is mine.
const removeContactHandler = async (id) => { await api.delete(`/contacts/${id}`); const newContactList = contacts.filter((contact) => { return contact.id !== id; }) setContacts(newContactList) }; above function is firing two api's . One is giving 200 status and another one is giving 204 status
I don't understand the 120 thumbs down for this! This tutorial is really easy to follow and well-taught! You deserve more subs and likes Dipesh, keep sharing your knowledge! cheers!
This is not for React beginners. He is not explaining anything just adding the events. How can a beginner will understand . + We are getting issue while doing this that he is not facing.
@@samsaswat4752 I agree, this is perhaps for intermediate level, for me maybe it's easy to follow because I have watched and learned from other videos specifically Angelu Yu in Udemy and here in YT from Shaun of The Net Ninja.
Got stuck in few places like Switch statement in router, passing state via Link, navigate to pages and with axios I used "then" rather "await" on addContactHandler because of this there was some issue all i could able to fix it and finished the course. Overall very good learning and Kudos to your efforts!
You skip the part of css. You edited the actual css. Its so confusing to see that all icons perfectly position. how they postioned I don't appreciate your video because semantic ui is not working and suddenly all icons perfectly postioned. I spent lot of time to understand how all element of webpage is perfect and finally I use custom css file to positioned elements of webpage but I don't want to use custom css file. I want to use only semantic ui to style the webpage.
Thank you so much.. I wanted to switch my career as Ui developer from ui designer.. your clear explanation gave me interest to go through entire project easily.. really this project boosted up my knowledge 🙏
Hi, at minute 1:16:25, can you demonstrate on how to do that assignment. I want it to be a separate page for confirming a deletion. What props do need to pass to which component??
A very good tutorial from begging to react framework. I actually watching it on phone to see the first hour of the project. In this, I’m really inspired how good method you learn us! 🙏
I never see this type of full subject video in past. so much subject video.. it is very useful for me.. Thank you so much for providing this video to me and all..
I really enjoyed watching your video. Thank you for making a clear learning path and taking us through that path hands on. As mentioned in comments the time stamps, structure, simple and easy to follow explaination made the learning journey rewarding for me.
where have you beeeen before? I watched so many react videos, but it's not explained like on your videos, I really like that there is no CSS or material UI, only functionality. This is exactly what I was looking for for a long time. Thank you a lot
Love ❤ for ur efforts and ur content In future I am expecting videos on Frontend roles and Responsibilities like 1. What actually do frontend developers do in realtime ( different tasks) 2.. How manage 4+ experience ( fake experience) in realtime 3. . How to crack any frontend interviews with 4+ years of experience 4.....Easy way to to crack any angular/reactjs interviews with 4+ experience/10lack package ------) )) 5....Top 20 program's to cover entire angular/reactjs syllabus.----)) 6....Top 10 angular/reactjs concepts with examples
🎯 Key Takeaways for quick navigation: 00:14 🚀 *The video is a two-hour React crash course covering topics such as React basics, components (class and functional), JSX, props, states, React hooks (useState, useEffect), component lifecycle, conditional rendering, lists and keys, form handling, project structure, React routing, JSON server setup, Axios usage, CRUD operations, and implementing a search filter.* 01:54 ⚙️ *Before starting the React project, Node.js needs to be installed on the machine. The video provides guidance on installing Node.js, and the speaker emphasizes checking the Node.js version through the terminal.* 02:49 🛠️ *The process of creating a React app is demonstrated using `npx create-react-app`. The speaker highlights the key commands for starting the development server, building for production, running tests, and ejecting.* 04:13 📁 *The video explains the basic folder structure of a React application, including the `node_modules`, `public`, and `src` folders. It introduces important files like `package.json`, `index.html`, and explores the default contents of the `src` folder.* 06:32 🎨 *Semantic UI is introduced as the CSS library for styling the React application. The speaker demonstrates adding Semantic UI classes to elements in the HTML file to improve styling.* 10:00 🔧 *Components (functional and class) are created for the header, add contact form, and contact list. JSX syntax is used to structure the components, and Semantic UI classes enhance the styling.* 19:04 📋 *An array of contacts is created, and the concept of passing data to components using props is explained. The video demonstrates rendering a list of contacts in the contact list component using the map function.* 23:32 🔄 *The process of refactoring and creating a reusable component (`ContactCard`) for rendering individual contact items is demonstrated. The refactored code enhances modularity and readability* 25:06 🛠️ *Hyphenated JSX attributes are avoided, and camel case is used instead.* 29:00 🔄 *Functional component state is managed using the `useState` hook.* 36:08 📦 *`localStorage` and `useEffect` are used to persist and retrieve data between page refreshes.* 41:05 🆔 *Unique IDs are generated for each contact using the `uuid` package.* 46:16 🌐 *Introduction to implementing routing using `react-router-dom`.* 47:14 🔄 *Importing and using `BrowserRouter`, `Switch`, and `Route` for React routing.* 55:32 🔄 *Navigating between pages programmatically in React Router can be achieved using `history.push` in response to an event, allowing for smoother user experiences.* 01:06:10 🌐 *Creating dynamic routes with React Router, such as `/contact/:id`, allows for the display of unique content based on the specified parameter (in this case, contact ID).* 01:10:34 🔄 *Passing additional data to a route in React Router can be done using the `to` prop of the `Link` component. The data can be accessed in the target component via `props.location.state`.* 01:12:52 🛠️ *Destructuring and extracting data from `props.location.state` enables easy access to information passed between components in React Router. This is useful for rendering dynamic content based on the route's state.* 01:15:17 🔄 *Utilizing React Router for navigation between components, ensuring quick and seamless transitions without page refresh.* 01:17:23 🛠️ *Setting up a JSON server for fake APIs, following RESTful API conventions, and creating a `db.json` file to simulate data.* 01:22:13 📡 *Implementing Axios to fetch data from the JSON server instead of local storage, improving data management in the React application.* 01:28:13 ➕ *Adding functionality to add new contacts, making POST requests to the server and updating the state with the response data.* 01:30:46 ➖ *Enabling the deletion of contacts by making DELETE requests to the server, enhancing the overall CRUD functionality of the application.* 01:35:00 🔄 *Implementing an edit feature, creating an edit route, and updating the contact details through the UI while maintaining synchronization with the server.* 01:37:34 🔄 *When updating a contact in a React app, create an `updateContactHandler` function to handle the PUT API call, passing the contact ID and new values.* 01:39:11 🔄 *After a successful update API call, update the React state with the new contact value to reflect the changes immediately.* 01:41:45 🛠️ *When building a search functionality in React, create a search bar component with a state for the search term and a function to handle changes.* 01:42:40 🔄 *Utilize the `useRef` hook to handle input values in a controlled manner, demonstrating an alternative to `event.target.value`.* 01:49:24 🔄 *Implement search functionality by filtering contacts based onthe search term, considering values like name and email using `Object.values` and string matching.* 01:53:57 🔄 *Update the contact list based on the search results, dynamically switching between displaying all contacts and the filtered results.* Made with HARPA AI
Hello Dipesh, can you make videos on NEXTJS like what are the difference between NEXTJS & REACTJS and scenario when use one over the other. advantage and disadvantage
Hello Vishal, are you a 2021-passout interested in web development ? We are currently looking to hire freshers who have learnt web development. If you are interested, please get in touch using the information on my channel.
Could you please refactor this code by applying actual CSS instead of semantic library . It will really help us. Hoping for a positive response from you :) and thanks for the fantastic tutorial, Grateful to you. 🙏
Learned a lot from this lecture. Easy way of explaining all the topics with clear video and voice. Very helpful for beginners. Please do the video by implementing CSS styling , like creating Cards, Animations etc using CSS.
That local storage thing is not working!!! And it should not work if I'm logically correct as initially state is empty and when we refresh empty state is again get added in local storage when it will fetch during unmount session get printed!!
Hey Rajkumar, we are a software development company based in Bangalore, India. We are looking for 2021-passouts who are tech enthusiasts who have learnt web development. If you are interested, I request you to get in touch with me.
I watched your videos after I thought to start learning react js it would be really useful sessions I can say the way your explain was efficient and very clear.thank you very much Dipesh. You might be created a basic react app in the video but in 2 hrs you have covered so many react topics , that's great point !!
@@DipeshMalvia Hey Dipesh, sorry if I caused a spam on your content. Thank you for the warning. I will stop. I apologize for any inconveniences caused.
Hi Dipesh sir, Thank you for this wonderful tutorial. I have a doubt at 1:27:00 where you are using useEffect to retrieve the contacts from the JSON file which seems not to be working in the latest react update. And you did not attach this part in your recent 'code refactored video'. So can you please help me here?
I've got a problem!! I was following along with you making the app, but i got stuck while retriving contacts from local storage. I can add a contact and it stores in local storage, but if i refresh, there is nothing... Can you help me, i am going along with you, but its been an hour i am stuck here. I have checked everything twice, thrice... I am stuck exactly at 39:10 , if refreshed the added contacts is gone..
Hello.. Can you please let me know JavaScript basics are sufficient to learn React course nor do we need Intermediate/Advanced level of JavaScript ? Kindly can you suggest..
today i started watching your video it's good explanation....in my company i got a chance to work on react project and i am completely freshers don't know how to do sometimes i will be looking html css and sometimes java script and react and redux and confusion with everything can you pls guide me in this it will be a great help.
I tried the assignment task. But I'm still stuck to redirect { history.push("/") } to contact list page once deletion completed. And I have use the DeteleContact method as props to deletion template.
Please also check the code refactored video with React router v6 and context api - th-cam.com/video/ZZOkCrQ2iLk/w-d-xo.html
Thanks Dipesh. All Problems solved. 😎 Now I have my own React.Js CRUD App
how to create state in functional based components rather than class based
@@rohitantil9534 Using Hooks i guess!!
sir please please please make mern-stack video i am waiting
why have used json server instead of express js server for backend and LLy for routers.
is this workflow companies flow or it used to connect frontend to backend.
This is not a react tutorial for a beginner. It's a react project tutorial for those who have little bit of knowledge of react previously.
True they are also kinda beginners
Yes, i know about react but need something to practice, this video is perfect.
I already watched so many tutorial videos and already know many things about react but things are not cleared in my mind so i am literally start searching more react js videos on youtube so i found this masterpiece. You are awesome brother. Thank you so much
Hello Anish. Are you a fresher seeking web developer jobs currently? We are a web dev company based in Bangalore and looking for talented freshers to join us! If you are interested, please connect with me using the contact information on my channel.
i'm really glad the yt suggestions brought me to your video. for a rather small youtuber, your video and presentation quality is great.
the clear structure, timestamps and flow is super helpful. especially for beginners, i think it is very easy to follow
Thanks wonderful to know Alex. I appreciate it!
1 hour in and i totally understand everything you are trying to explain. Thank you! - Im subscribing! :)
Watched this first react tutorial as beginner and I am really impressed by the way you explained all the concepts. This tutorial is a great overview of react concepts for beginner to mid level learners. helped a lot. Thanks for great content.
Thanks 👍
This video is not for the absolute beginner bro and this video definitely impress the revision one's
My all texts inside tags are not appearing on web page although in inspect element i can see it. Please help??
frist of all remove the remove the f**g world {for beginners }.. this is absolutely not for beginners . you are not explaining concept .. you are just telling us and doing code by your self on your own.. Just west my 1 hour..
after completing this project i am very much confident on my react skills.....
Super happy to hear this. Keep it up!
What project do we build after watching this video???
did you got a job yet?
@@DipeshMalvia m not getting local storage at 36.00 from this video
After refreshing data is also fanishing
Plz help me out of this
I was struck over there
Unable to do it
@@mahieerati6505 same error. Did you get the solution for this ?
I'm from Russia but I understood every moment. You explains just amazing. Thanks a lot!
Glad to hear that! Welcome to the channel!
Top class content. Have seen many ReactJS beginners courses and I can say this is the best. After watched this, went through your other courses as well and you are too good. Thanks for all your efforts.
the new version of router takes in element in the place of component, also 'Switch' is changed to 'Routes' and you dont need to use 'exact' prop. there's no need to add an arrow function in the Route, just copy paste the component in the element prop along with the props sent to the child component, and you're good to go
refer this:
Unable to apply routes in new way. Can you please help here with the code changes with respect to new route implementation?
Appreciate max. This is so helpful, specially when you want to revise everything without spending hours on lengthy videos, 2 hours and you already brush up components, router, axios and CRUD, hooks. I really love your videos ever since I went through your redux tutorial.
Glad it was helpful!
his name is Dipesh not max
People are creating 15hrs and 20hrs videos for the react but this is the best short video and through the point.Really a good content.
Thanks a lot for appreciating the content. The channel needs such appreciation.
Thanks, Bro for this beautiful tutorial, I feel comfortable with React now, After going through a lotta React tuts without grasping the concepts and their applications... Thanks.
Glad it helped
You'll run into two issues throughout this course. But Dipesh appears to have been working on a new version, so they'll be fixed i guess.
But here they are:
1. Switch is no longer is existence. It's now Routes.
2. uuidv4 has been deprecated. So use this import instead: "import { v4 as uuid } from 'uuid';"
- You'll just need to install "uuid" with "npm i uuid"
Thank you for the video, Dipesh. It was very well done!
For those who don't want to wait for the video and looking for refactored code the code is available in the GitHub repository with new branch.
Thanks I wanted to ask questions on uuid but I think u have already helped... thanks 😊
@Nik @Dipesh, I am running through the same issue that is uuid error. As you described I tried importing uuid as v4 but that's all we have to do? or need to make any more changes? Please reply it would be of great help to me.
@@devangshah1222 If you tried, "uuid as v4" then that may be your issue. Try "import { v4 as uuid } from 'uuid';"
This still works in my code. Also, make sure you 'npm install uuid'. With those two things, you should be up and running.
@@cgme9535 Hi, I did use "v4 as uuid" but forgot to make a change in the code itself. It's working now thank you so much :)
There will be some in-router
1. The issue you're encountering might stem from changes in React Router v6, where the state property is no longer passed in the same way when using Link or navigate.
2. switch not using
3. Instead of component will use element
Some of the imports in react-router are changed ...Like , can never be used in the version 6 instead we can use:
.....
enclosing all the route inside routes everything works as same as used with , and switch and exact prop
and also render's syntax is changed to element={ } ---its soo simple than the mentioned in video
and for history we need to import useNavigate from react-router
history=useNavigate();
and then use as
history("/path")
If UUID gives an error, try this:
import { v4 as uuid } from 'uuid';
thanks!
hey dude, thanks for that
I have been following up with your react tutorials, apparently it been awesome your effort is so much appreciated. kudus
Thanks Yomi!
@@DipeshMalvia please I am having serious problem with my project can you help me out please
This is the most easy to understand and very practical tutorial.
I love his presentation.
Thank you and love you bro...
You are most welcome
What a humble guy! Even though he is the CEO of Google, he still manages to teach and share his knowledge with us. hats off🎉🎉
He is not CEO of Google. you can Google it.
what a joke go and research about google ceo
😂😂😂😂
🤔
Are you taking a comment serious with that profile @@Car_Fusion
I didn't get any better video than this for React. As a beginner I found this as the best resource available. Thanks Bhavya.
You're most welcome
Broo, you almost covered everything,
Great work, learnt a lott, big big thanks to you❤❤🙏
Glad to hear that
I had started this video at 11 am today and now i had completed this project. I was begineer web-developer and starting my full-stack journey for 3 month as a intern in a software house. there were a lot of bugs and error through out the coding process on my side but i try my best to overcome those issues. Thank you for this video.
Hello, you obviously have a very valuable content here in this video and thank you for that. Not that i don't appriciate your effort, but I would prefer instead of descriptions like "copy this to here", you could easily and a bit slowly show what to do next after each move and most importantly why we do that for, otherwise we're just trying to memorize the code blocks and not understanding the concept behind it. I hope you take this as a constructive critism. Thank you for producing up-to-date videos like this one.
I thought I'm the only one with the same problem) Watchign video several times and still cannot get some moments when we pass props between componentes and this two side relation between components and some other details. Really missing explanation why we do some things. It's the third day I'm struggling with first 40 mins of the video. Will rewatch it again tomorrow). Anyway, I'm thankful to Dipesh for this course.
Ben de ilk başladığımda açmıştım. Bu projeyi yaparsam anlıcam sandım ama olmuyormuş. Biraz ilerleyince konseptlere hakim olunca pekiştirme niteliğinde işe yaradı benim için.
@dipesh thanks form bottom of my heart i got a huge offer as React JS lead in product company jus following all the videos of yours thank you
Congratulations for the offer. Good Luck!
May God bless you and good luck!
I can't help myself than to hit the subscribed button after watching this. Well done.
Watched this video. Very helpful. I have followed each and every step as I am new to ReactJS. I have used useEffect to retrieve data from local storage but data is not vanished once I refresh it.
Delete completely the localStorage.getItem lines, found in useEffect function. And edit the useState() line like below:
const [contacts, setContacts] = useState(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []);
@@omerbasar3576 Nice omer it helped me too Thank you.👍
@@omerbasar3576 it worked for me too
@@omerbasar3576 thanks it works!!
I think you forgot to mention the difference between a functional component and class component at 13:00 and 15:00, this is actually really important and why
yes
the issue with other courses that they take take long time to teach everything + they teach randomly , but what i found in this vid is application of all fundamental things in react and in simple way !!! thank you .
Thanks for appreciating the content 👍
Just an absolutely amazing tutorial, earned a subscription. While I feel like I have a decent grasp on vanilla JS, I was so confused coming over to React but this video was terrific in explaining everything!!!
Awesome, thank you!
Awesome and mind-blowing. I have recreated everything you said in this video. its pleasure learning. looking forward to see more of your classes.
Glad to hear that
I am new to reactjs. I followed your steps, localStorage stores the data but cannot persist data. Below is my code
useEffect(() => {
const retriveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
if (retriveContacts){
setContacts(retriveContacts);
console.log(contacts);
}
}, []);
useEffect(()=>{
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
}, [contacts]);
Just the right level of depth.. Rather than explaining what is a variable :) Most technical writers and youtubers take on a too wider audience and lose focus. This is crisp. Can't thank you enough.
Glad you enjoyed!
Your channel deserves a silver play button :)
diamond
I had watched videos for react but I see every body focus on single concept in deep so we feel like react is very long but after watching this video I learn major concepts cover in one go and in very simple and incredible/Worth full manner I really Appreciate Dipesh Keep it Man!! Thanks
Thanks and welcome! keep watching and keep supporting for more videos 👍
Hello Sir, Can you tell me whether this video will helpful for complete beginner?
Sir the way u have explain the topic its superb....
Bro You're Great I learned alot. I gave interview by showing this project and explain all the functionalities, he's really Impressed..
Keep Making React Project Videos It really helpful for us.
A Huge Support From our Community🚀🚀🚀
plz help, guide me about lhow much projects i should do
Thank You for your tutorial - in this world where there are expensive paid courses, you are helping students like us giving high quality content on TH-cam.
Glad to hear that!
Your efforts is appreciated. This is a very helpful React Basics Tutorial.
Glad it was helpful!
@@DipeshMalvia Wow great timing Dipesh. I just completed your redux saga tutorial. Appreciate your helpful tutorials.
One of the best video to getting start with React. I found CodeWithHarry's react video took 2hr to explain what U explained in 45mins. Thanks👍
Hey Hitesh! Those skills look relevant to what we are looking for. Are you looking out for job opportunities in web development currently?
@@shivanigaddagimath6105 yup!
@@hiteshsuthar1097 That's great! Can we please connect on LinkedIn or gmail for more details? Just search for Shivani Gaddagimath on LinkedIn and request to connect please. The first profile that pops up is mine.
const removeContactHandler = async (id) => {
await api.delete(`/contacts/${id}`);
const newContactList = contacts.filter((contact) => {
return contact.id !== id;
})
setContacts(newContactList)
};
above function is firing two api's . One is giving 200 status and another one is giving 204 status
I follow all process same, but only search and delete is working, add and update not working in my case.
Hi, a suggestion move the heading during the video from center-left to bottom or top-right as its covering the code then..
I don't understand the 120 thumbs down for this! This tutorial is really easy to follow and well-taught! You deserve more subs and likes Dipesh, keep sharing your knowledge! cheers!
only because of u yt removed dislike button
This is not for React beginners. He is not explaining anything just adding the events. How can a beginner will understand . + We are getting issue while doing this that he is not facing.
@@samsaswat4752 I agree, this is perhaps for intermediate level, for me maybe it's easy to follow because I have watched and learned from other videos specifically Angelu Yu in Udemy and here in YT from Shaun of The Net Ninja.
@@STUPIDTH-cam_HIDINGMSGS Thanks for the recommendations.
Got stuck in few places like Switch statement in router, passing state via Link, navigate to pages and with axios I used "then" rather "await" on addContactHandler because of this there was some issue all i could able to fix it and finished the course. Overall very good learning and Kudos to your efforts!
addContactHandler how do you resolve ??
Thanks to Dipesh I am now finally starting to understand REACT !!
That's amazing, welcome!
Your course is really great, the logic is clear, and it's easy to understand.
Thanks Simon 👍
nb
Gran maestro....gracias saludos de los andes Peruanos
You skip the part of css. You edited the actual css. Its so confusing to see that all icons perfectly position. how they postioned I don't appreciate your video because semantic ui is not working and suddenly all icons perfectly postioned. I spent lot of time to understand how all element of webpage is perfect and finally I use custom css file to positioned elements of webpage but I don't want to use custom css file. I want to use only semantic ui to style the webpage.
Wow. It is an amazing video. I loved it. Please upload more video like this. I learnt a lot. Thank you so much ☺
Thank you, I will
Thank you Dipesh for an informative video. It's been a while I have coded in React...this was a quick refresher video for me. Keep up the good job!
Glad to hear that
Nice and clearly explained the way to learn to react. Glad to learn to react after watching your videos. Thank you.
So nice of you! Welcome!
Hey, Can we connect? I'm getting some error in this tutorial, since your comment is the latest one here, hence I'm contacting you.
@@pawanchandrajoshi841 yeah sure tell me?
Thank you so much.. I wanted to switch my career as Ui developer from ui designer.. your clear explanation gave me interest to go through entire project easily.. really this project boosted up my knowledge 🙏
Thanks Wonderful 👍
oh my god!! such brilliant explanation and with such patience really appreciable keep doing such work society needs more educators like u
Thanks a ton
One small correction. At 35:27 it's spread operator and not rest operator (Both are completely different)
Yeah, I was about to say that
Hi, at minute 1:16:25, can you demonstrate on how to do that assignment. I want it to be a separate page for confirming a deletion. What props do need to pass to which component??
this is awesome !!, great content..!! thankx for sharing it, im sure is gonna help many React beginner's devs out there 👍
Glad it was helpful!
Hats off to you for your Notes on all concepts so far.
Why?
I am enjoying the tutorial, this is the best I have ever seen. Thanks Dipesh for your hard work. Looking forward to your other tutorials.
A very good tutorial from begging to react framework. I actually watching it on phone to see the first hour of the project. In this, I’m really inspired how good method you learn us! 🙏
In Router V6, we are able to use 'element' property instead of 'render props' inside Route.
Good content! Keep going! :)
Yes the update code video will be release in coming weeks.
Yep. Gotta love those API changes /s
The updated code is available in the repository under new branch
@@DipeshMalvia Gonna check it out. Thank you ❤️✌️
@@DipeshMalvia can i get the link for the repository of updated code
I never see this type of full subject video in past. so much subject video.. it is very useful for me.. Thank you so much for providing this video to me and all..
Glad to hear that
I really enjoyed watching your video.
Thank you for making a clear learning path and taking us through that path hands on.
As mentioned in comments the time stamps, structure, simple and easy to follow explaination made
the learning journey rewarding for me.
where have you beeeen before? I watched so many react videos, but it's not explained like on your videos, I really like that there is no CSS or material UI, only functionality. This is exactly what I was looking for for a long time. Thank you a lot
Love ❤ for ur efforts and ur content
In future I am expecting
videos on Frontend roles and Responsibilities like
1. What actually do frontend developers do in realtime ( different tasks)
2.. How manage 4+ experience ( fake experience) in realtime
3. . How to crack any frontend interviews with 4+ years of experience
4.....Easy way to to crack any angular/reactjs interviews with 4+ experience/10lack package ------) ))
5....Top 20 program's to cover entire angular/reactjs syllabus.----))
6....Top 10 angular/reactjs concepts with examples
Wonderful I will surely take this into account. thanks!
especially the 4th and the 5th point
video is helpful only if you have some previous knowledge, else it is just like copy pasting the code he is writing
Best React JS course ever. Thanks a ton. Keep up the good work.
Wow, thanks!
Thank you so much man nice video I learned a lot in this video
Glad to hear it!
🎯 Key Takeaways for quick navigation:
00:14 🚀 *The video is a two-hour React crash course covering topics such as React basics, components (class and functional), JSX, props, states, React hooks (useState, useEffect), component lifecycle, conditional rendering, lists and keys, form handling, project structure, React routing, JSON server setup, Axios usage, CRUD operations, and implementing a search filter.*
01:54 ⚙️ *Before starting the React project, Node.js needs to be installed on the machine. The video provides guidance on installing Node.js, and the speaker emphasizes checking the Node.js version through the terminal.*
02:49 🛠️ *The process of creating a React app is demonstrated using `npx create-react-app`. The speaker highlights the key commands for starting the development server, building for production, running tests, and ejecting.*
04:13 📁 *The video explains the basic folder structure of a React application, including the `node_modules`, `public`, and `src` folders. It introduces important files like `package.json`, `index.html`, and explores the default contents of the `src` folder.*
06:32 🎨 *Semantic UI is introduced as the CSS library for styling the React application. The speaker demonstrates adding Semantic UI classes to elements in the HTML file to improve styling.*
10:00 🔧 *Components (functional and class) are created for the header, add contact form, and contact list. JSX syntax is used to structure the components, and Semantic UI classes enhance the styling.*
19:04 📋 *An array of contacts is created, and the concept of passing data to components using props is explained. The video demonstrates rendering a list of contacts in the contact list component using the map function.*
23:32 🔄 *The process of refactoring and creating a reusable component (`ContactCard`) for rendering individual contact items is demonstrated. The refactored code enhances modularity and readability*
25:06 🛠️ *Hyphenated JSX attributes are avoided, and camel case is used instead.*
29:00 🔄 *Functional component state is managed using the `useState` hook.*
36:08 📦 *`localStorage` and `useEffect` are used to persist and retrieve data between page refreshes.*
41:05 🆔 *Unique IDs are generated for each contact using the `uuid` package.*
46:16 🌐 *Introduction to implementing routing using `react-router-dom`.*
47:14 🔄 *Importing and using `BrowserRouter`, `Switch`, and `Route` for React routing.*
55:32 🔄 *Navigating between pages programmatically in React Router can be achieved using `history.push` in response to an event, allowing for smoother user experiences.*
01:06:10 🌐 *Creating dynamic routes with React Router, such as `/contact/:id`, allows for the display of unique content based on the specified parameter (in this case, contact ID).*
01:10:34 🔄 *Passing additional data to a route in React Router can be done using the `to` prop of the `Link` component. The data can be accessed in the target component via `props.location.state`.*
01:12:52 🛠️ *Destructuring and extracting data from `props.location.state` enables easy access to information passed between components in React Router. This is useful for rendering dynamic content based on the route's state.*
01:15:17 🔄 *Utilizing React Router for navigation between components, ensuring quick and seamless transitions without page refresh.*
01:17:23 🛠️ *Setting up a JSON server for fake APIs, following RESTful API conventions, and creating a `db.json` file to simulate data.*
01:22:13 📡 *Implementing Axios to fetch data from the JSON server instead of local storage, improving data management in the React application.*
01:28:13 ➕ *Adding functionality to add new contacts, making POST requests to the server and updating the state with the response data.*
01:30:46 ➖ *Enabling the deletion of contacts by making DELETE requests to the server, enhancing the overall CRUD functionality of the application.*
01:35:00 🔄 *Implementing an edit feature, creating an edit route, and updating the contact details through the UI while maintaining synchronization with the server.*
01:37:34 🔄 *When updating a contact in a React app, create an `updateContactHandler` function to handle the PUT API call, passing the contact ID and new values.*
01:39:11 🔄 *After a successful update API call, update the React state with the new contact value to reflect the changes immediately.*
01:41:45 🛠️ *When building a search functionality in React, create a search bar component with a state for the search term and a function to handle changes.*
01:42:40 🔄 *Utilize the `useRef` hook to handle input values in a controlled manner, demonstrating an alternative to `event.target.value`.*
01:49:24 🔄 *Implement search functionality by filtering contacts based onthe search term, considering values like name and email using `Object.values` and string matching.*
01:53:57 🔄 *Update the contact list based on the search results, dynamically switching between displaying all contacts and the filtered results.*
Made with HARPA AI
I am really like the way you explained all the concepts & you have explained many things in this single video. Thanks for video
Glad it was helpful!
Hey @Dipesh Malvia ......I tried many times but the code of semantic UI is not getting fit in my system.....plz tell me why this is happening
Feeling after finishing each component of this project and making it all work (ofc not by myself but still) === Epic
Wonderful Mrinal, don't forget to Subscribe, like and share with friends.
Hello Dipesh, can you make videos on NEXTJS like what are the difference between NEXTJS & REACTJS and scenario when use one over the other. advantage and disadvantage
At 45:05 why did you add key = {contact.id}? I mean to ask what is the purpose of adding it?
Was getting error for uuid().
Below change fixed the issue.
// import { uuid } from 'uuidv4';
import { v4 as uuid } from 'uuid';
Thanks, this helped.
thanks
thanks , you helped so much
You have a very clear voice and so your explanation is amazing.
Awesome explanation, best react video
Thank you! 😃
Hello Vishal, are you a 2021-passout interested in web development ? We are currently looking to hire freshers who have learnt web development. If you are interested, please get in touch using the information on my channel.
@@shivanigaddagimath5994 thanks for the opportunity, but I am not 2021, paasout, I am currently working in tcs
Could you please refactor this code by applying actual CSS instead of semantic library . It will really help us.
Hoping for a positive response from you :) and thanks for the fantastic tutorial, Grateful to you.
🙏
Amazing tutorial, helpful and clears lots of doubts. Kudos to your efforts.
Glad it was helpful!
Best tutorial you can find in youtube. Thank you so much Dipesh for this and patience you have to cover every single aspect!!
Glad it was helpful!
@@DipeshMalvia sir in this video from starting u havent inform about css files when we are doing it is getting plain??
Learned a lot from this lecture. Easy way of explaining all the topics with clear video and voice. Very helpful for beginners. Please do the video by implementing CSS styling , like creating Cards, Animations etc using CSS.
That local storage thing is not working!!!
And it should not work if I'm logically correct as initially state is empty and when we refresh empty state is again get added in local storage when it will fetch during unmount session get printed!!
i used the same className as "ui container center " still my contact manager heading is not centering.
You Found the answer?
I'm having same issue
App.css
.main {
margin-top: 5em;
}
.center {
justify-content: center;
padding: 10px;
}
@@szolek thanks it worked!
@@szolek bro i m still facing the problem its not coming to centre
@@soumyasantamahalik7617 Check the .css and .js files in src folder. Remove what is not needed and paste the given code. Also add Semantic UI. :)
Great bro,
Very helpful for me.
Glad it helped
Hey Rajkumar, we are a software development company based in Bangalore, India. We are looking for 2021-passouts who are tech enthusiasts who have learnt web development. If you are interested, I request you to get in touch with me.
I watched your videos after I thought to start learning react js it would be really useful sessions I can say the way your explain was efficient and very clear.thank you very much Dipesh.
You might be created a basic react app in the video but in 2 hrs you have covered so many react topics , that's great point !!
Awesome, thank you!
As a receiver point of view,
Kind request,
In the beginning you could explain about the requirement, then you could start proceed,
what a content man...just loved it 💜
Glad you enjoyed!
simply amazing..make more videos for beginners for each small topic separately
Yes, adding as much as possible React videos.
@@shivanigaddagimath5994 : This is not a good way of doing promotions on others content. I will report you as spam if you don't stop.
@@DipeshMalvia Hey Dipesh, sorry if I caused a spam on your content. Thank you for the warning. I will stop. I apologize for any inconveniences caused.
How do we get the trash can icon to be on the right for version 18?
I will publish the video with React upgrade to 18 and fixing localstoage and semantic UI issues
tutorial with good example. Thanks dipesh
Thanks!
Hi Dipesh sir,
Thank you for this wonderful tutorial. I have a doubt at 1:27:00 where you are using useEffect to retrieve the contacts from the JSON file which seems not to be working in the latest react update. And you did not attach this part in your recent 'code refactored video'. So can you please help me here?
Check with his git page
Best video!!!!! continue study!!!
I've got a problem!! I was following along with you making the app, but i got stuck while retriving contacts from local storage. I can add a contact and it stores in local storage, but if i refresh, there is nothing... Can you help me, i am going along with you, but its been an hour i am stuck here. I have checked everything twice, thrice... I am stuck exactly at 39:10 , if refreshed the added contacts is gone..
same problem here have u fixed it yet?
I will publish the new video - on how to fix the issues with React 18 on this Thursday that will resolve your localstorage issue
Hello.. Can you please let me know JavaScript basics are sufficient to learn React course nor do we need Intermediate/Advanced level of JavaScript ? Kindly can you suggest..
Why this channel is so underrated?
This is a new channel and I am not so popular guy in DEV community. Just started sharing what I have learned over the year on youtube.
today i started watching your video it's good explanation....in my company i got a chance to work on react project and i am completely freshers don't know how to do sometimes i will be looking html css and sometimes java script and react and redux and confusion with everything can you pls guide me in this it will be a great help.
Amazing videos ! Love the way you explain each and every step of the way. Could you make videos for React NAV and Formik as well ?
Thanks for the topics Vaishnnavi!
Yeah really amazing video , hope he makes more content thanks a lot brother
Thank you for this course. From Where i can get whole project? In git only fundamental parts.
Please check the branches each section is a part of branch.
@@DipeshMalvia Thank you very much.
U gained a sub😉
Thanks and welcome to channel!
Impressed. Excellent Explanation in 2 hours, you covered most of the topics. Thanks bro.
I tried the assignment task. But I'm still stuck to redirect { history.push("/") } to contact list page once deletion completed. And I have use the DeteleContact method as props to deletion template.
How you have passed the method as prop can you paste the code here