Learn React JS with Project in 2 Hours | React Tutorial for Beginners | React Project Crash Course

แชร์
ฝัง
  • เผยแพร่เมื่อ 10 ก.พ. 2025

ความคิดเห็น • 1.5K

  • @DipeshMalvia
    @DipeshMalvia  2 ปีที่แล้ว +37

    Please also check the code refactored video with React router v6 and context api - th-cam.com/video/ZZOkCrQ2iLk/w-d-xo.html

    • @saadbajwa2443
      @saadbajwa2443 2 ปีที่แล้ว +3

      Thanks Dipesh. All Problems solved. 😎 Now I have my own React.Js CRUD App

    • @rohitantil9534
      @rohitantil9534 2 ปีที่แล้ว

      how to create state in functional based components rather than class based

    • @vsvtarun1383
      @vsvtarun1383 2 ปีที่แล้ว +2

      @@rohitantil9534 Using Hooks i guess!!

    • @bharatkumar-ei6zx
      @bharatkumar-ei6zx ปีที่แล้ว

      sir please please please make mern-stack video i am waiting

    • @amirsohail963
      @amirsohail963 ปีที่แล้ว

      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.

  • @sash2686
    @sash2686 3 ปีที่แล้ว +33

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

  • @riyapandey7767
    @riyapandey7767 7 หลายเดือนก่อน

    00:03 Learn React basics and build a project from scratch
    02:02 Install node.js on your machine and create a React app
    06:19 Created a functional component from a React project
    08:40 Using React and Semantic UI in a web app
    13:08 Created functional components for header and add contact form
    15:19 Create a class component using React
    20:08 Passing and accessing props in the context list
    22:12 Create a contact card component
    26:36 Build the functionality of the components
    28:37 Using React hooks to manage state in functional components
    32:44 Passing data between parent and child components using props
    34:36 Add and process form data using React state and local storage
    38:32 Implemented storing and retrieving of contacts
    40:24 Importing and using uuid to add data and delete contacts
    44:51 The application needs different routes and URLs for different components
    46:51 Use React Router Dome for routing between components
    50:50 Contactless component expecting props
    52:56 The switch statement is causing an issue with the contact list display
    56:54 Passing props to routed components
    58:44 The approach of using an anonymous function to pass props can lead to performance issues.
    1:02:37 Programmatically adding a contact and navigating back to the contact list
    1:04:36 Programmatically navigate between components and display contact details
    1:08:43 Add an image, content, and header to the page
    1:11:04 Passing contact information to contact detail page.
    1:15:07 Demonstration of quick navigation between components.
    1:16:55 Set up a JSON server for fake APIs
    1:20:33 Install Axios to fetch data from JSON server
    1:22:28 Install axios and create axios base file
    1:26:38 Fetching and displaying data from an API
    1:28:27 Add contacts feature is not working properly
    1:32:14 Rename and edit functionality needs to be implemented.
    1:34:18 Initializing state with props
    1:38:16 Update state with new value
    1:40:11 Demonstrating CRUD operations using Axios in React
    1:44:17 Create a search functionality in the contact list component.
    1:46:14 Demonstration of using useRef hook
    1:50:00 Search results will be filtered based on the search term
    1:52:02 Performing a search on contact values
    1:55:47 The video discusses how to update and delete elements in react

  • @anishchaudhary313
    @anishchaudhary313 3 ปีที่แล้ว +54

    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

    • @shivanigaddagimath5994
      @shivanigaddagimath5994 3 ปีที่แล้ว

      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.

  • @bishalkar5614
    @bishalkar5614 ปีที่แล้ว +184

    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.

    • @raki0125
      @raki0125 ปีที่แล้ว +8

      True they are also kinda beginners

    • @saeedhalabi
      @saeedhalabi 7 หลายเดือนก่อน +3

      Yes, i know about react but need something to practice, this video is perfect.

    • @tomriddle3042
      @tomriddle3042 22 วันที่ผ่านมา

      Exactly cz he's just doing what he knows, he's not explaining the code

  • @kangtongmo6895
    @kangtongmo6895 10 หลายเดือนก่อน +1

    This is a great place to start learning React and there is a QA section for this project, attached here. th-cam.com/video/vApTJpRqyx4/w-d-xo.html

  • @AlexSpieslechner
    @AlexSpieslechner 3 ปีที่แล้ว +83

    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

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +3

      Thanks wonderful to know Alex. I appreciate it!

  • @RahulSharma-pd2ce
    @RahulSharma-pd2ce 3 ปีที่แล้ว +13

    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.

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว

      Thanks a lot for appreciating the content. The channel needs such appreciation.

  • @ajaypediredla
    @ajaypediredla 3 ปีที่แล้ว +21

    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.

  • @SecondThoughtwithZaheer
    @SecondThoughtwithZaheer 3 ปีที่แล้ว +113

    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.

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +5

      Thanks 👍

    • @nitishkumargarikapati7767
      @nitishkumargarikapati7767 2 ปีที่แล้ว +9

      This video is not for the absolute beginner bro and this video definitely impress the revision one's

    • @androidx2133
      @androidx2133 2 ปีที่แล้ว +2

      My all texts inside tags are not appearing on web page although in inspect element i can see it. Please help??

    • @vasoyadixit5555
      @vasoyadixit5555 ปีที่แล้ว

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

  • @itwitheugene
    @itwitheugene 3 ปีที่แล้ว +23

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

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +4

      Glad to hear that! Welcome to the channel!

  • @kitchen-e-kausar9105
    @kitchen-e-kausar9105 3 ปีที่แล้ว +37

    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.

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +2

      Glad it was helpful!

    • @vaibhav55592
      @vaibhav55592 2 ปีที่แล้ว +1

      his name is Dipesh not max

  • @gtechlabs7
    @gtechlabs7 3 ปีที่แล้ว +23

    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.

  • @CAPS_AMERICA
    @CAPS_AMERICA 3 ปีที่แล้ว +66

    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!

    • @thefrustratedboyy
      @thefrustratedboyy 3 ปีที่แล้ว +12

      only because of u yt removed dislike button

    • @samsaswat4752
      @samsaswat4752 ปีที่แล้ว +1

      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.

    • @CAPS_AMERICA
      @CAPS_AMERICA ปีที่แล้ว

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

    • @samsaswat4752
      @samsaswat4752 ปีที่แล้ว +1

      @@CAPS_AMERICA Thanks for the recommendations.

  • @mabrurahmed3304
    @mabrurahmed3304 3 ปีที่แล้ว +10

    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

    • @itsniketajn
      @itsniketajn 2 ปีที่แล้ว

      refer this:

    • @srushtidaware7978
      @srushtidaware7978 ปีที่แล้ว

      Unable to apply routes in new way. Can you please help here with the code changes with respect to new route implementation?

  • @IsaacAlcocer
    @IsaacAlcocer 3 ปีที่แล้ว +29

    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

  • @saswatpanda257
    @saswatpanda257 3 ปีที่แล้ว +65

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

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +7

      Super happy to hear this. Keep it up!

    • @anshumanraturi
      @anshumanraturi 2 ปีที่แล้ว +1

      What project do we build after watching this video???

    • @avinash8584
      @avinash8584 2 ปีที่แล้ว

      did you got a job yet?

    • @mahieerati6505
      @mahieerati6505 ปีที่แล้ว

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

    • @Deepaksubi.
      @Deepaksubi. ปีที่แล้ว

      @@mahieerati6505 same error. Did you get the solution for this ?

  • @yourRegularDev
    @yourRegularDev 3 ปีที่แล้ว +9

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

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +1

      Thanks Yomi!

    • @nechetv6268
      @nechetv6268 3 ปีที่แล้ว +1

      @@DipeshMalvia please I am having serious problem with my project can you help me out please

  • @ItsPureLuck27
    @ItsPureLuck27 2 ปีที่แล้ว +6

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

  • @codewithhitesh664
    @codewithhitesh664 3 ปีที่แล้ว +10

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

  • @09ghanshyam
    @09ghanshyam 3 ปีที่แล้ว +10

    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

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +1

      Thanks and welcome! keep watching and keep supporting for more videos 👍

    • @ridoyroy196
      @ridoyroy196 3 ปีที่แล้ว

      Hello Sir, Can you tell me whether this video will helpful for complete beginner?

  • @hasanulgonisohayeb6323
    @hasanulgonisohayeb6323 ปีที่แล้ว +2

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

  • @Nik-rx9rj
    @Nik-rx9rj 3 ปีที่แล้ว +32

    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!

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +3

      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.

    • @mixins_pixie
      @mixins_pixie 3 ปีที่แล้ว +1

      Thanks I wanted to ask questions on uuid but I think u have already helped... thanks 😊

    • @devangshah1222
      @devangshah1222 3 ปีที่แล้ว

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

    • @cgme9535
      @cgme9535 3 ปีที่แล้ว +1

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

    • @devangshah1222
      @devangshah1222 3 ปีที่แล้ว +1

      @@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 :)

  • @ecemozer5713
    @ecemozer5713 3 ปีที่แล้ว +11

    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.

    • @peregrint6054
      @peregrint6054 3 ปีที่แล้ว +5

      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.

    • @mys8091
      @mys8091 3 ปีที่แล้ว

      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.

  • @aditya009er
    @aditya009er 3 ปีที่แล้ว +20

    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.

  • @thewpwing
    @thewpwing 3 ปีที่แล้ว +3

    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.

  • @engr_mark
    @engr_mark 3 ปีที่แล้ว +5

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

  • @Dravish2023
    @Dravish2023 3 ปีที่แล้ว +11

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

  • @simonli8852
    @simonli8852 3 ปีที่แล้ว +9

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

  • @bonishagarwal9315
    @bonishagarwal9315 3 ปีที่แล้ว +9

    I didn't get any better video than this for React. As a beginner I found this as the best resource available. Thanks Bhavya.

  • @KaranSingh-rn2zk
    @KaranSingh-rn2zk 3 ปีที่แล้ว +10

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

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +1

      Glad it was helpful!

    • @KaranSingh-rn2zk
      @KaranSingh-rn2zk 3 ปีที่แล้ว

      @@DipeshMalvia Wow great timing Dipesh. I just completed your redux saga tutorial. Appreciate your helpful tutorials.

  • @sesslynj3718
    @sesslynj3718 ปีที่แล้ว +1

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

  • @viswanathank2551
    @viswanathank2551 3 ปีที่แล้ว +6

    Your channel deserves a silver play button :)

    • @InfoBites22
      @InfoBites22 7 หลายเดือนก่อน

      diamond

  • @ayushikumari4675
    @ayushikumari4675 หลายเดือนก่อน

    i had watch more than 10 video as far from popular youtube to many. but the level of depth in your video is can't be compared. you saved our time for making in 2 hours. srly the level of clarity is can't be touched in any video in entire youtube.

  • @srikkanthank
    @srikkanthank 3 ปีที่แล้ว +3

    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.

  • @josephleoamalraj
    @josephleoamalraj หลายเดือนก่อน

    Excellent Video, Thanks a lot. From this video, am able to gather required knowledge of react js. 👍👍

  • @EYEmaginary
    @EYEmaginary 2 ปีที่แล้ว +10

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

  • @daoudacamara4192
    @daoudacamara4192 2 ปีที่แล้ว +1

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

  • @VeereshPatel15
    @VeereshPatel15 3 ปีที่แล้ว +4

    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

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว

      Wonderful I will surely take this into account. thanks!

    • @kajolkatiyar4923
      @kajolkatiyar4923 2 ปีที่แล้ว

      especially the 4th and the 5th point

  • @thefrustratedboyy
    @thefrustratedboyy 3 ปีที่แล้ว +2

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

  • @romimaximus
    @romimaximus 3 ปีที่แล้ว +5

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

  • @ksm1907
    @ksm1907 2 ปีที่แล้ว +2

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

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Glad it was helpful!

    • @HemuEditZone15
      @HemuEditZone15 2 ปีที่แล้ว

      @@DipeshMalvia sir in this video from starting u havent inform about css files when we are doing it is getting plain??

  • @elizabethr5161
    @elizabethr5161 3 ปีที่แล้ว +4

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

  • @baiai6509
    @baiai6509 3 ปีที่แล้ว

    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

  • @hementhj9904
    @hementhj9904 ปีที่แล้ว +5

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

    • @JayaShivani29
      @JayaShivani29 ปีที่แล้ว

      He is not CEO of Google. you can Google it.

    • @Car_Fusion
      @Car_Fusion ปีที่แล้ว +1

      what a joke go and research about google ceo
      😂😂😂😂

    • @sharath_jonnala
      @sharath_jonnala ปีที่แล้ว +1

      🤔

    • @Santhosh.21_
      @Santhosh.21_ ปีที่แล้ว

      Are you taking a comment serious with that profile ​@@Car_Fusion

  • @hiteshsuthar1097
    @hiteshsuthar1097 3 ปีที่แล้ว +2

    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👍

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 ปีที่แล้ว

      Hey Hitesh! Those skills look relevant to what we are looking for. Are you looking out for job opportunities in web development currently?

    • @hiteshsuthar1097
      @hiteshsuthar1097 3 ปีที่แล้ว +1

      @@shivanigaddagimath6105 yup!

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 ปีที่แล้ว +1

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

  • @Deepa0811
    @Deepa0811 3 ปีที่แล้ว +5

    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!

  • @naresh-gotte
    @naresh-gotte 3 ปีที่แล้ว +1

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

  • @sai6157
    @sai6157 3 ปีที่แล้ว +3

    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 🙏

  • @KishoreBabuThalla
    @KishoreBabuThalla ปีที่แล้ว +2

    Nice and clearly explained the way to learn to react. Glad to learn to react after watching your videos. Thank you.

    • @DipeshMalvia
      @DipeshMalvia  ปีที่แล้ว

      So nice of you! Welcome!

    • @pawanchandrajoshi841
      @pawanchandrajoshi841 ปีที่แล้ว +1

      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.

    • @KishoreBabuThalla
      @KishoreBabuThalla ปีที่แล้ว

      @@pawanchandrajoshi841 yeah sure tell me?

  • @thi_thi_ko
    @thi_thi_ko 3 ปีที่แล้ว +3

    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!

    • @Yash_Parashar
      @Yash_Parashar ปีที่แล้ว

      addContactHandler how do you resolve ??

  • @LegitGamer-ki4bp
    @LegitGamer-ki4bp ปีที่แล้ว

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

  • @kandregularaviteja2499
    @kandregularaviteja2499 3 ปีที่แล้ว +4

    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.

  • @tusharjha3376
    @tusharjha3376 2 ปีที่แล้ว +1

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

  • @shubhamverma2366
    @shubhamverma2366 3 ปีที่แล้ว +5

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

  • @mdtaha8907
    @mdtaha8907 2 ปีที่แล้ว +1

    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 .

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว +1

      Thanks for appreciating the content 👍

  • @strange6092
    @strange6092 3 ปีที่แล้ว +3

    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

    • @nitin267
      @nitin267 3 ปีที่แล้ว

      I follow all process same, but only search and delete is working, add and update not working in my case.

  • @itsayesha4440
    @itsayesha4440 5 หลายเดือนก่อน

    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.

  • @wasimvarshani2686
    @wasimvarshani2686 3 ปีที่แล้ว +9

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

  • @tripphouse8165
    @tripphouse8165 2 ปีที่แล้ว +1

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

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว +1

      That's amazing, welcome!

  • @rajbhatia2784
    @rajbhatia2784 3 ปีที่แล้ว +3

    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

  • @ravindralodhi5450
    @ravindralodhi5450 4 หลายเดือนก่อน +1

    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

  • @omkarbalwade7902
    @omkarbalwade7902 9 วันที่ผ่านมา +1

    Thanks for this tutorial

  • @chetanpatil9917
    @chetanpatil9917 3 ปีที่แล้ว +10

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

  • @rimpysaini4976
    @rimpysaini4976 2 ปีที่แล้ว +1

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

  • @VishalSharma-rn7mt
    @VishalSharma-rn7mt 3 ปีที่แล้ว +3

    Awesome explanation, best react video

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +1

      Thank you! 😃

    • @shivanigaddagimath5994
      @shivanigaddagimath5994 3 ปีที่แล้ว +1

      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.

    • @VishalSharma-rn7mt
      @VishalSharma-rn7mt 3 ปีที่แล้ว

      @@shivanigaddagimath5994 thanks for the opportunity, but I am not 2021, paasout, I am currently working in tcs

  • @kingaustin360
    @kingaustin360 2 หลายเดือนก่อน

    Am Ebuka from Nigeria. and this video has just been the best I've watched on React

  • @devendratoshniwal2077
    @devendratoshniwal2077 3 ปีที่แล้ว +3

    what a content man...just loved it 💜

  • @movocode
    @movocode 2 ปีที่แล้ว +2

    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.

  • @VineetSingh-oc1kl
    @VineetSingh-oc1kl 2 ปีที่แล้ว +3

    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

  • @vimalneha
    @vimalneha 2 ปีที่แล้ว +1

    Dipesh, it is a really very useful video to understand the basics and the scope of the REACT in the first instance. Thanks for making it.

  • @madhavarao.m3178
    @madhavarao.m3178 3 ปีที่แล้ว +8

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

  • @dhanalakshmilakshmi762
    @dhanalakshmilakshmi762 2 ปีที่แล้ว +2

    @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

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Congratulations for the offer. Good Luck!

    • @MonibRashid
      @MonibRashid 2 ปีที่แล้ว

      May God bless you and good luck!

  • @amikgurung4618
    @amikgurung4618 2 ปีที่แล้ว +3

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

    • @sinichakkappan8680
      @sinichakkappan8680 2 ปีที่แล้ว +1

      same problem here have u fixed it yet?

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      I will publish the new video - on how to fix the issues with React 18 on this Thursday that will resolve your localstorage issue

    • @vinayshetty5929
      @vinayshetty5929 2 หลายเดือนก่อน

      @@DipeshMalvia is this issue fixed have you uploaded the video on this please provide some solutions

  • @nadakering1297
    @nadakering1297 2 ปีที่แล้ว +2

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

  • @ashwithtee
    @ashwithtee 3 ปีที่แล้ว +16

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

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +4

      Yes the update code video will be release in coming weeks.

    • @Nik-rx9rj
      @Nik-rx9rj 3 ปีที่แล้ว

      Yep. Gotta love those API changes /s

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +2

      The updated code is available in the repository under new branch

    • @ashwithtee
      @ashwithtee 3 ปีที่แล้ว

      @@DipeshMalvia Gonna check it out. Thank you ❤️✌️

    • @saivivekpatlola2825
      @saivivekpatlola2825 3 ปีที่แล้ว

      @@DipeshMalvia can i get the link for the repository of updated code

  • @aritrachoudhury7997
    @aritrachoudhury7997 2 ปีที่แล้ว +2

    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.

    • @omerbasar3576
      @omerbasar3576 2 ปีที่แล้ว +6

      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)) || []);

    • @javeedakhter324
      @javeedakhter324 2 ปีที่แล้ว +2

      @@omerbasar3576 Nice omer it helped me too Thank you.👍

    • @gaganmeshram1395
      @gaganmeshram1395 2 ปีที่แล้ว +1

      @@omerbasar3576 it worked for me too

    • @aiml5910
      @aiml5910 ปีที่แล้ว +1

      ​@@omerbasar3576 thanks it works!!

  • @vaishnavianand8129
    @vaishnavianand8129 3 ปีที่แล้ว +6

    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 ?

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว

      Thanks for the topics Vaishnnavi!

    • @vijaykrishna4738
      @vijaykrishna4738 3 ปีที่แล้ว

      Yeah really amazing video , hope he makes more content thanks a lot brother

  • @abhilashmajumdar4524
    @abhilashmajumdar4524 3 ปีที่แล้ว +1

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

    • @shivanigaddagimath5994
      @shivanigaddagimath5994 3 ปีที่แล้ว

      Hey Abhilash! Are you a fresher in web development? Are you interested in react js, node js and more technologies in web dev? If yes, please connect with me using the contact information on my channel. We are a software solutions company based in Bangalore and looking for talented developers. We are open to fresher as well as experienced folks. Please connect if interested.

    • @abhilashmajumdar4524
      @abhilashmajumdar4524 3 ปีที่แล้ว

      @@shivanigaddagimath5994 yes I am interested

    • @shivanigaddagimath5994
      @shivanigaddagimath5994 3 ปีที่แล้ว

      @@abhilashmajumdar4524 Thanks for your interest Abhilash! can we please get in touch to discuss more about the opportunity? Kindly connect with me using the contact information on my channel.

    • @shivanigaddagimath5994
      @shivanigaddagimath5994 3 ปีที่แล้ว

      @@abhilashmajumdar4524 Hi Abhilash! Please get in touch with me to explore the opportunity.

    • @abhilashmajumdar4524
      @abhilashmajumdar4524 3 ปีที่แล้ว

      @@shivanigaddagimath5994 actually I can't find your channel....can you give me channel link!!

  • @rohannaidu7596
    @rohannaidu7596 2 ปีที่แล้ว +3

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

    • @sa27ph
      @sa27ph 2 ปีที่แล้ว

      Thanks, this helped.

    • @pepper9559
      @pepper9559 2 ปีที่แล้ว

      thanks

    • @nupur8804
      @nupur8804 ปีที่แล้ว

      thanks , you helped so much

  • @pranjalsrivastava1629
    @pranjalsrivastava1629 3 ปีที่แล้ว +1

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

  • @_AnuragsinghLECE
    @_AnuragsinghLECE 2 ปีที่แล้ว +5

    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.

  • @Lavith_kuttu
    @Lavith_kuttu ปีที่แล้ว

    Thanks for the wonderful video... After completing this task it makes me to feel confidence on my react skills

  • @vigneshwaranvgece7975
    @vigneshwaranvgece7975 ปีที่แล้ว +4

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

  • @conceptualdeveloper
    @conceptualdeveloper 2 ปีที่แล้ว +1

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

  • @joeyorofino101
    @joeyorofino101 2 ปีที่แล้ว +3

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

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      I will publish the video with React upgrade to 18 and fixing localstoage and semantic UI issues

  • @crescencemani7983
    @crescencemani7983 2 ปีที่แล้ว +2

    Good video . I really appreciate the explanation , simple but effective. Thank you !

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Thanks Crescence! don't forget to Subscribe, like and share with friends.

  • @hardikgangani4225
    @hardikgangani4225 3 ปีที่แล้ว +3

    Why this channel is so underrated?

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +2

      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.

  • @reidwilliamson6477
    @reidwilliamson6477 3 ปีที่แล้ว +1

    This is brilliant content. Thanks for taking the time to do this. Cheers from VA, USA =)

  • @ganesh.majety5260
    @ganesh.majety5260 3 ปีที่แล้ว +3

    U gained a sub😉

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว

      Thanks and welcome to channel!

  • @Aman-Verma
    @Aman-Verma 3 ปีที่แล้ว +1

    Amazing content man! but I have one doubt can we use to navigate to home page on click of Add instead of doing programmatic navigation????

  • @anandarajbalu6445
    @anandarajbalu6445 3 ปีที่แล้ว +3

    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.

    • @amankansal9556
      @amankansal9556 3 ปีที่แล้ว

      How you have passed the method as prop can you paste the code here

  • @mohdnasir7023
    @mohdnasir7023 ปีที่แล้ว

    Impressed. Excellent Explanation in 2 hours, you covered most of the topics. Thanks bro.

  • @vishalanthony1529
    @vishalanthony1529 3 ปีที่แล้ว +10

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

    • @bhartiyayoutube377
      @bhartiyayoutube377 3 ปีที่แล้ว

      You Found the answer?
      I'm having same issue

    • @szolek
      @szolek 3 ปีที่แล้ว +5

      App.css
      .main {
      margin-top: 5em;
      }
      .center {
      justify-content: center;
      padding: 10px;
      }

    • @bhartiyayoutube377
      @bhartiyayoutube377 3 ปีที่แล้ว

      @@szolek thanks it worked!

    • @soumyasantamahalik7617
      @soumyasantamahalik7617 3 ปีที่แล้ว

      @@szolek bro i m still facing the problem its not coming to centre

    • @szolek
      @szolek 3 ปีที่แล้ว

      @@soumyasantamahalik7617 Check the .css and .js files in src folder. Remove what is not needed and paste the given code. Also add Semantic UI. :)

  • @monikapant3365
    @monikapant3365 2 ปีที่แล้ว

    This is the best react video i have ever seen or referred, Thanks a lot for sharing the great content

  • @ItCoursesForAll
    @ItCoursesForAll ปีที่แล้ว +4

    U should show ui first

  • @unnatisorathi3566
    @unnatisorathi3566 ปีที่แล้ว +1

    At 45:05 why did you add key = {contact.id}? I mean to ask what is the purpose of adding it?

  • @mohitprajapati9625
    @mohitprajapati9625 2 ปีที่แล้ว +6

    why semantic ui is not working????

    • @prathameshgawade536
      @prathameshgawade536 2 ปีที่แล้ว +1

      Hey did you solve the issue

    • @mrinalb3972
      @mrinalb3972 2 ปีที่แล้ว

      If you found the Add button not working, try this instead Add

    • @Omhange
      @Omhange 2 ปีที่แล้ว

      my add contact is hiding under header we need to scroll down to see Add contact ?? whay should i do

    • @hruthikgowda5551
      @hruthikgowda5551 2 ปีที่แล้ว

      @@Omhangegive

  • @tmq29
    @tmq29 ปีที่แล้ว

    thank u so much for creating this video, very useful for me who want to change technology from angular to react

  • @eloisme2769
    @eloisme2769 3 ปีที่แล้ว +3

    Hi, thank you for the tutorial but you go over the concepts really fast. As a beginner for react its difficult to understand.