Please also check the code refactored video with React router v6 and context api - kzfaq.info/get/bejne/kMB_nqajtpjNfJ8.html

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.

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!

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

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

1 hour in and i totally understand everything you are trying to explain. Thank you! - Im subscribing! :)

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

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.

I'm from Russia but I understood every moment. You explains just amazing. Thanks a lot!

after completing this project i am very much confident on my react skills.....

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.

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.

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!

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.

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.

I have been following up with your react tutorials, apparently it been awesome your effort is so much appreciated. kudus

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🎉🎉

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 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

Broo, you almost covered everything, Great work, learnt a lott, big big thanks to you❤❤🙏

This is the most easy to understand and very practical tutorial. I love his presentation. Thank you and love you bro...

If UUID gives an error, try this: import { v4 as uuid } from 'uuid';

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

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 didn't get any better video than this for React. As a beginner I found this as the best resource available. Thanks Bhavya.

I can't help myself than to hit the subscribed button after watching this. Well done.

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 .

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.

@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

Your channel deserves a silver play button :)

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.

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!!!

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🚀🚀🚀

Awesome and mind-blowing. I have recreated everything you said in this video. its pleasure learning. looking forward to see more of your classes.

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.

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!

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 KZfaq.

Your course is really great, the logic is clear, and it's easy to understand.

oh my god!! such brilliant explanation and with such patience really appreciable keep doing such work society needs more educators like u

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 🙏

Your efforts is appreciated. This is a very helpful React Basics Tutorial.

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

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👍

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!

Wow. It is an amazing video. I loved it. Please upload more video like this. I learnt a lot. Thank you so much ☺

this is awesome !!, great content..!! thankx for sharing it, im sure is gonna help many React beginner's devs out there 👍

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..

One small correction. At 35:27 it's spread operator and not rest operator (Both are completely different)

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! 🙏

Was getting error for uuid(). Below change fixed the issue. // import { uuid } from 'uuidv4'; import { v4 as uuid } from 'uuid';

Hi, a suggestion move the heading during the video from center-left to bottom or top-right as its covering the code then..

In Router V6, we are able to use 'element' property instead of 'render props' inside Route. Good content! Keep going! :)

Thanks to Dipesh I am now finally starting to understand REACT !!

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.

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.

I am really like the way you explained all the concepts & you have explained many things in this single video. Thanks for video

Best React JS course ever. Thanks a ton. Keep up the good work.

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

Amazing tutorial, helpful and clears lots of doubts. Kudos to your efforts.

Best tutorial you can find in youtube. Thank you so much Dipesh for this and patience you have to cover every single aspect!!

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

Nice and clearly explained the way to learn to react. Glad to learn to react after watching your videos. Thank 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.

Sir the way u have explain the topic its superb....

Awesome explanation, best react video

video is helpful only if you have some previous knowledge, else it is just like copy pasting the code he is writing

Hats off to you for your Notes on all concepts so far.

This is not for beginners at all, you are just saying what you are typing and not explain most of it , like you used useEffect but didn't even try to explain what it is doing and what it is used for. So if any one who haven't learned react before I will not recommend watching this tutorial at all.

Gran maestro....gracias saludos de los andes Peruanos

what a content man...just loved it 💜

util.js:75 Uncaught RangeError: Maximum call stack size exceeded at exports.deprecate (util.js:75:1)

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

simply amazing..make more videos for beginners for each small topic separately

🎯 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

Thank you so much man nice video I learned a lot in this video

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?

Great bro, Very helpful for me.

Why this channel is so underrated?

Best video!!!!! continue study!!!

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 !!

no bakwass sikha kaam ki baat best video on react js for me ,,. also node wali bbhi best h dipesh bhai

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..

You have a very clear voice and so your explanation is amazing.

i used the same className as "ui container center " still my contact manager heading is not centering.

Feeling after finishing each component of this project and making it all work (ofc not by myself but still) === Epic

U gained a sub😉

BEST video ever on react of youtube

How do we get the trash can icon to be on the right for version 18?

I am happy that I came across your channel. Now I am going to follow all your videos to become a better developer. I am already a front end developer. But I want to brush up my skills from the beginning so my question is, is it enough to just follow your videos alone on HTML, CSS, JS and React ? To become good in front end.

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 ?

This is Java developer best the React course .Cool !!!!!!!! I love you.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.

Thank you so much.....what a content !!! I didn't understand anything about react but after watching this video, everything is clear now....... please make a complete tutorial about node JS 😍😍

complete waste of time u r not explaining the concept how we will be able to learn like this u r just adding this and this but why r u not explaining that why we are doing thhis

This video is very helpful. Thank you so much for sharing your expertise with us. Keep It Up !!

U should show ui first

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??

Should this be done by someone who has never learnt and has no idea of REACT ? BUT has basic knowledge of HTML , CSS and JS and made few projects with respect to these. Please comment