Learn React JS Fundamentals With Project | React Tutorials for Beginners

Поділитися
Вставка
  • Опубліковано 19 вер 2024

КОМЕНТАРІ • 203

  • @DipeshMalvia
    @DipeshMalvia  3 роки тому +41

    Guys, if you feel this video was helpful in any sort than please hit the like button and subscribe channel. Need your support to keep myself motivated😎

    • @masnunahmedsporsho612
      @masnunahmedsporsho612 3 роки тому +1

      bro are u a professional developer?

    • @ramubhukya3238
      @ramubhukya3238 3 роки тому +2

      How to communicate this application to firebase database? Pls explain for this problem👏👏

    • @DaniyalKhan-hk4uf
      @DaniyalKhan-hk4uf 2 роки тому +1

      I have facing a problem when I access props there is nothing shown on my localhost when I run in console.log its show data

    • @TheHelpOfNS
      @TheHelpOfNS 2 роки тому +1

      Bro really awesome... explanation...can you please make a vedio crud operation using functional components........we will support you..plz share your details.... thanks bro 💕💕💕💕💕💕👍

    • @faizanali-gr8yx
      @faizanali-gr8yx 2 роки тому +1

      sir useEffect to retrieve data back from local storage not working when i refresh page

  • @Abogida11
    @Abogida11 3 роки тому +5

    I love this tutorial, clear and to the point, the only Issue is why you need to mix class with functional component, I am trying to change the class comp. to FC butting getting some issues already.

  • @johnherrera5913
    @johnherrera5913 3 роки тому +6

    Master! Great build, so much value condensed into a small amount of time!

  • @sherinfernando2720
    @sherinfernando2720 3 роки тому +7

    Your tutorial is amazing,Way to go !! 🔥 It would be great if you had a project with context API too. Just a suggestion. :)

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому +5

      Noted! I have a whole bunch of videos covering all topics of React. You will see more in coming months. Thanks!

  • @tomasburian6550
    @tomasburian6550 2 роки тому +1

    Bro! I came here to learn how to delete items and refresh the list and you didn't disappoint!
    Thanks a lot.

  • @prasannanaik1023
    @prasannanaik1023 2 роки тому +1

    Really great video so far I found for react js project. From the beginning the way you started by first building basic components and then by using react concepts building functionality one by one really helped a lot for me . Thanks

  • @blosq2673
    @blosq2673 3 роки тому +1

    I'm from Kyrgyzstan , bro you helped me a lot!!! Forward only forward

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому

      Thanks buddy. More videos to come😊

  • @dhanyakrishnan5795
    @dhanyakrishnan5795 3 роки тому +2

    It is great tutorial I could ever see , just a suggestion if you decrease your speed a little bit it will more convenient as it made me pause and do it again but expecting more tutorial for MERN stack too

    • @joe86569
      @joe86569 Рік тому

      evidayum malayalee 😃

  • @ProssCraft
    @ProssCraft Рік тому

    I usually don't comment vidoes on YT, but this time I need to say I really appreciate your content and time given to those projects, they are very helpfull :)

  • @rishabhprabhakar6009
    @rishabhprabhakar6009 2 роки тому +9

    not able retrive the data

    • @abhishekshivgan1884
      @abhishekshivgan1884 Рік тому

      Same here!

    • @ankitapandey8655
      @ankitapandey8655 Рік тому

      Same 😢, can't even figure out why it's not happening

    • @ishaneemandal9783
      @ishaneemandal9783 Рік тому

      Only form is visible in my case .....and when am adding new contacts nothing is added to the contact list !!

  • @sujairsuhaim2769
    @sujairsuhaim2769 4 місяці тому +1

    Useful brother
    do not stop your works❤

  • @vinothkumars7421
    @vinothkumars7421 3 роки тому +3

    To the point explanations .. Love it...Way to go brother

  • @abhimanyuarora9262
    @abhimanyuarora9262 3 роки тому +2

    I am *gonnu* like this video for sure :)

  • @bilalshuja131
    @bilalshuja131 3 роки тому +1

    35:01 you remove &&(and operator) and write ||(or operator) but its still not working and adding empty fields

  • @ambushtunes
    @ambushtunes 2 роки тому +1

    Thank you man...you really helped me out. I was able to merge this with a ruby backend.

  • @narayanankanchipuram1468
    @narayanankanchipuram1468 2 роки тому +1

    Hey Dipesh, your service is so useful, thanks for your videos, please do lot of videos like this, it is most useful people like me,

  • @Redstarcrew
    @Redstarcrew 3 роки тому +3

    Could you please show us how to code Addcontact as a function instead of a class?

  • @ronaldrendessyrealtormba8824
    @ronaldrendessyrealtormba8824 3 роки тому +2

    Hi there!! I look forward to watching your instructional video!!

  • @anubhapant5227
    @anubhapant5227 3 роки тому +2

    Please make more videos on such kinds of projects on React.

  • @pk_officl
    @pk_officl 2 роки тому +1

    You just taught short and sweet all things what I have learnt from 100 videos. You have fulfilled the starting level. This should be a first try for every React beginners.
    I can't import uuid from uuid4. Have anyone faced this issue kindly post the solution.

  • @manishkuswhaha2563
    @manishkuswhaha2563 2 роки тому +1

    Today I tried to implement the same app but the local storage functionality is not working. DATE: 09-07-2022

  • @swethasandeep3025
    @swethasandeep3025 3 роки тому +1

    This video is really helpful to learn react. Its crisp and clear. Thankyou for your effort

  • @LinkEX
    @LinkEX 3 роки тому

    Awesome commentary and great tutorial!
    The only thing that really did grind my nerves was the recurring Microsoft window alert sound.
    It's obnoxious enough by itself, but being so much louder than your voice recording didn't make things better 😅

    • @LinkEX
      @LinkEX 3 роки тому

      You might want to consider either turning it off in the future.
      You can even remove them in post-production by using Audacity - this works pretty nicely by using voice sampling IIRC.

  • @ecemonkol1653
    @ecemonkol1653 Рік тому

    Thank you for the great tutorial. This one is the most helpful I found so far.

  • @hitechofficial
    @hitechofficial 2 роки тому

    please upload tutorial series and project building in next js please thanks. Your way of teaching is awesome

  • @programmer5475
    @programmer5475 2 роки тому +2

    Thank you for theReactJS video series. It makes learning React JS way simpler. But while implementing this application, I was struck in useEffect part. I was not able to restore values on reload. After debugging, I came to know that useEffect was running twice due to React.StrictMode.
    This issue makes me do some research on it and one additional point that has been added to my React knowledge is that for security purposes, StrictMode forces every component to render twice.
    Thank you again!

    • @DipeshMalvia
      @DipeshMalvia  2 роки тому

      This happens in React 18 so I have a video how to make the code work please check - ua-cam.com/video/vApTJpRqyx4/v-deo.html

  • @MohitKumar-tn1cf
    @MohitKumar-tn1cf 3 роки тому +1

    It was going good to learn!! thanks

  • @dineshkumar8893
    @dineshkumar8893 3 роки тому +1

    Best content, your explanation was so easy tp understand the working principles

  • @diwakarsingh68
    @diwakarsingh68 3 роки тому +1

    Hi Dipesh, You are great!!. This video really helpful for me.

  • @jasoncysiu
    @jasoncysiu 7 місяців тому

    Why do we use class component for addContact?

  • @corneliusluka3555
    @corneliusluka3555 Рік тому

    Thanks for this great video, you can make more complex app with React Sir. you are a great instructor

  • @ankitkumar-bg7dr
    @ankitkumar-bg7dr 8 місяців тому

    Could you please share which company and model headphone you are using?

  • @debrad.castleberry2457
    @debrad.castleberry2457 3 роки тому +1

    Nice Explanation. Subscribed. Love from Pakistan 🇵🇰

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому +1

      Thankyou so much! Welcome to the family 🙂

  • @rudragoudapatil5913
    @rudragoudapatil5913 2 роки тому +1

    I needed to install util to run uuidv4
    Later again I am getting error of maximum storage exceeded
    Can you please help me out from this.

  • @felipebatista7469
    @felipebatista7469 3 роки тому

    i am from brazil, thanks for the video bro!! helps a lot!

  • @Ali_Cook20
    @Ali_Cook20 Рік тому

    Hi Dipesh .
    Can you say me about your course ?
    If i do this project and others .
    Will i be a junior or middle react developer?
    Thanks for your reply.

  • @Crickeuzz
    @Crickeuzz 2 роки тому

    You are doing great work i appreciate it ,thanks all about your efforts.

  • @basamalhassan7006
    @basamalhassan7006 3 роки тому +2

    Thanks a lot for this tutorials. Please can you make advance react tutorials. Thanks in advance

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому +1

      Sure, more videos on React are on the way. Publishing React Router on Tuesday. Stay Tuned.😊

  • @sudhakiran8292
    @sudhakiran8292 2 місяці тому

    I have an swetting, when i am same cide write on my laptop ro as weyas understand

  • @hiteshsuthar1097
    @hiteshsuthar1097 3 роки тому +1

    Dil ❤️ maange more 🔥

  • @Redstarcrew
    @Redstarcrew 3 роки тому +1

    Thanks a lot for the video my friend!

  • @drmr_mist
    @drmr_mist 3 роки тому

    Hello Dipesh, great video!
    I am wondering how would u increment id prop without using uuid?

  • @naveenkumarkota2090
    @naveenkumarkota2090 2 роки тому

    @dipesh i think error in contact card saying props.clickhandler is not a function

  • @niravsanepara3934
    @niravsanepara3934 2 роки тому

    props.clickHandler is not function error shows plz help !!!!

  • @KaranKumar-bp4hu
    @KaranKumar-bp4hu Рік тому

    @DipeshMalvia Sir, Please before statring a project clear the flow of data , it would easy to understand the complete code at very efficient time

  • @9a56mahabirjaiswal9
    @9a56mahabirjaiswal9 Рік тому +1

    It becomes difficult to do usestate in class component for those who are engineers .You should atleast also show the usestate with functional component then should move to usestate with class component

  • @TechnicalHeaven
    @TechnicalHeaven 2 роки тому

    Nice tutorial Dipesh, I learn a lot 👌🔥

  • @Avatar-Roku
    @Avatar-Roku Рік тому

    24:48- at this point I am facing some trouble...my jsx component when I copy and paste in ContactCard shows that the map elements are not defined. should I use props and transfer these to this component?

  • @empowercode
    @empowercode 3 роки тому +1

    Hey Dipesh, nice to meet you! I just found your channel and subscribed, love what you're doing!
    I like how clear and detailed your explanations are as well as the depth of knowledge you have surrounding the topic! Since I run a tech education channel as well, I love to see fellow Content Creators sharing, educating, and inspiring a large global audience. I wish you the best of luck on your UA-cam Journey, can't wait to see you succeed! Your content really stands out and you've put so much thought into your videos!
    Cheers, happy holidays, and keep up the great work!

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому

      Glad you enjoyed. Thanks a lot for a such a nice comment. Highly appreciated ☺️

    • @empowercode
      @empowercode 3 роки тому

      @@DipeshMalvia No problem, keep up the great work!

  • @pendhotapavankumar7297
    @pendhotapavankumar7297 2 роки тому

    Thanks for the support 🔥 to us sir, i have a doubt in my project? that is how to add navigation as well as sidebar , here i'm adding navigation but sidebar? please help me, how to do?

  • @nandagopal375
    @nandagopal375 Рік тому

    Thank you for providing valuable information sir 🙏🙏🙏

  • @shivamsingh-ud5hb
    @shivamsingh-ud5hb 2 роки тому +1

    I used ui container center class but the content is not rendered at center

    • @DipeshMalvia
      @DipeshMalvia  2 роки тому

      I think you should refer to semantic UI documentation for classes as the documentation might have changed in last one year.

  • @46aniketchandivkar82
    @46aniketchandivkar82 Рік тому

    I'm just starting react so Can I begin with this?

  • @sai6157
    @sai6157 2 роки тому

    I tried but after deleting webvitals file and other files I am getting error
    .. I am not getting what to do.. please help..

    • @DipeshMalvia
      @DipeshMalvia  2 роки тому

      Please check your errors might be you have deleted the file but their refrences still present in index.js or app.js files

  • @AT-rg4el
    @AT-rg4el 2 роки тому

    great you are bro....keep going on.

  • @darjipavan5112
    @darjipavan5112 3 роки тому +1

    Sir , javascript me interview questions answers ki new series banaiye please ( theory, practical examples )

  • @aniketbond0072
    @aniketbond0072 2 місяці тому

    Sir i followed exact same steps as you but, the trash icon is appearing at bottom of email not at right bottom, please help me with it 🙏

    • @DipeshMalvia
      @DipeshMalvia  2 місяці тому

      @@aniketbond0072 : you can check the codebase and copy the css files.

  • @girishpandey9976
    @girishpandey9976 2 роки тому

    Hey guys you done the good job and keep it up

  • @saitejapendli7036
    @saitejapendli7036 3 роки тому

    Bro,where i can import this delete icon.instead this icon we can put button for this ??

  • @anilkumardas7662
    @anilkumardas7662 2 роки тому

    Sir give me solutions..... how to cheack localstroage is empty or not ? (If the localstroage is empty simple write please add data other wish localstroage data will write )

  • @anrgkdm
    @anrgkdm 3 роки тому

    I created the app and started it, It worked initially, Then I stopped it. And then Deleted the files not required for this application, as said in video from 7:04 to 7:38. But after that the application never ran. It gave errors like "ENOENT: no such file or directory, open "

    • @sai6157
      @sai6157 2 роки тому

      Same issue I am also getting, did u get it ?

    • @rojamanepalli3068
      @rojamanepalli3068 2 роки тому

      @@sai6157 try to navigate to correct directory path then run the application

  • @2784raj
    @2784raj 3 роки тому +1

    hi, Dipesh love they way you explain the code , can you guide where is second part of this contact app ?

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому +1

      Hey Raj, the second part is the next video React Router, after that it's React Axios CRUD and last is Search Filter.
      Playlist link - ua-cam.com/play/PLTP3E5bPW7944Ec1lfXzavqRHzxY5FigD.html

    • @2784raj
      @2784raj 3 роки тому +1

      @@DipeshMalvia thanks you are Legend, I will highly recommend to my colleagues who wants to learn react,

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому

      @@2784raj : Thanks, my channel needs support. Happy Learning 😃

  • @jhunconsole8492
    @jhunconsole8492 3 роки тому +1

    What are the cons and pros of using classbase components vs functional components?

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому

      Hi Jhun, I don't have a straight and small answer for your question but they both have their props and cons. Also function components with React Hooks are getting popular as a modern way of building components. I found an article that would be a good read to understand about both type of components and their pros & cons.
      Article - www.twilio.com/blog/react-choose-functional-components

  • @bhukyaramu7047
    @bhukyaramu7047 3 роки тому +1

    Hii sir,can you explain about Employee details like employee list and employee list item and title of the employee and description of the employees using crud operation.

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому

      I have a CRUD operation video for this contact app you can use it as a reference and but your own Employee project - ua-cam.com/video/59z1_3-vTOk/v-deo.html

  • @aayush9752
    @aayush9752 8 місяців тому

    i don't know basics of react js is it good for me

  • @keerthanachennamsetty2322
    @keerthanachennamsetty2322 Рік тому

    Bro, Can you make a video for showing how real time react project will be

  • @5minupsc723
    @5minupsc723 Рік тому +1

    how to fetch local storage and display it on screen

    • @DipeshMalvia
      @DipeshMalvia  Рік тому

      If you are using react 18 then you can follow this video for fixing the breaking changes - ua-cam.com/video/vApTJpRqyx4/v-deo.html

    • @5minupsc723
      @5minupsc723 Рік тому

      @@DipeshMalvia ok

  • @sarojakulkarni1030
    @sarojakulkarni1030 3 роки тому +1

    LOVELY VIDEO SIR

  • @bankauday7784
    @bankauday7784 2 роки тому

    how to fix the vulenrablities while downaloding packages??

  • @jayprakashsingh6327
    @jayprakashsingh6327 2 роки тому

    Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version.

  • @nitinworldwide
    @nitinworldwide 2 роки тому

    the video was good but bit confusing bcoz of contacts name defining props child to parents it should have more time on this parts

  • @bhoomikasb147
    @bhoomikasb147 2 роки тому

    Can you please also help me to edit the data from local storage....

  • @imprasna2539
    @imprasna2539 Рік тому

    Dipesh, the localstorage is not working for me

  • @SalutTech
    @SalutTech 3 роки тому

    in the trash icon fuction you can say only e.target.parentelement.remove this its coffuse Eng

  • @veeramuthur
    @veeramuthur 2 роки тому +1

    Thanks its very helpful

  • @JustVinayadav
    @JustVinayadav Рік тому

    so easy like a todo application

  • @sindhupoojary3112
    @sindhupoojary3112 Рік тому

    Error: maximum call stack size exceeded
    RangeError: maximum call stack size exceeded. Can u plz give me a solution for this

  • @alionabusuioc5772
    @alionabusuioc5772 3 роки тому

    Hi, it is very great course, but can you please rewrite the AddContact component also on Hooks and leave it in a comment ? Thank you in advance :)

  • @ShubhamSingh-eg6wq
    @ShubhamSingh-eg6wq 2 роки тому

    I'm not able to retrieve the data from the local storage

    • @DipeshMalvia
      @DipeshMalvia  2 роки тому

      As you might be using React 18, so there are some changes I have added a video please check - ua-cam.com/video/vApTJpRqyx4/v-deo.html

  • @inevitableman4159
    @inevitableman4159 2 роки тому

    Unable to store the data in the local storage

  • @ravinorthland
    @ravinorthland 2 роки тому

    Good tutorial 😀

  • @chanelj5072
    @chanelj5072 2 роки тому

    Hello, I keep on getting this error 'Uncaught RangeError: Maximum call stack size exceeded' it is shown in the console when I try and add a contact. How would I fix this?

    • @DipeshMalvia
      @DipeshMalvia  2 роки тому +1

      Please use the reference code for comparison.

  • @ankitanand3216
    @ankitanand3216 Рік тому

    i seen this now , and i implemented but after refreshing data went hide from the document. what might be reason to happen this ?

    • @DipeshMalvia
      @DipeshMalvia  Рік тому

      The reason is you are using React 18 and there were some breaking changes in working of useEffect - You can refer to this video how to fix the issue - ua-cam.com/video/vApTJpRqyx4/v-deo.html

    • @ankitanand3216
      @ankitanand3216 Рік тому

      @@DipeshMalvia thankyou

  • @neets7519
    @neets7519 2 роки тому +1

    Amazing video

  • @ankitrikame336
    @ankitrikame336 3 роки тому

    Great 💯

  • @sandeeppinasimham8000
    @sandeeppinasimham8000 3 роки тому

    Class name not getting applied what is ui class?

  • @sivanagarjuna569
    @sivanagarjuna569 2 роки тому

    Sir icon is not fit properly

  • @flyflor599
    @flyflor599 Рік тому

    Where is the classes ...avatar etc?

  • @busrakara4929
    @busrakara4929 3 роки тому +2

    thank you!

  • @apoapo521
    @apoapo521 2 роки тому

    im beginnner and very good tutorial but i cant start the projekt

  • @dhanyakrishnan5795
    @dhanyakrishnan5795 3 роки тому

    hey brother what is that ui classes? are we importing anything?

    • @bharathbellamkonda
      @bharathbellamkonda 2 роки тому

      yes when we import stylesheets from such semantic ui's we can use classes as such

  • @gkmishra2009
    @gkmishra2009 3 роки тому +1

    Best sir

  • @ankitapandey8655
    @ankitapandey8655 Рік тому

    Can't retrieve contact 😢

  • @dabbarnaresh7791
    @dabbarnaresh7791 2 роки тому

    Hello sir, nice video
    I'm doing same as you
    But when I refresh Page ,
    My get data also not showing

    • @DipeshMalvia
      @DipeshMalvia  2 роки тому

      Yes, because you are using React 18 and the tutorial uses React 17 - please follow this updated video - ua-cam.com/video/vApTJpRqyx4/v-deo.html

    • @dabbarnaresh7791
      @dabbarnaresh7791 2 роки тому

      @@DipeshMalvia
      Sir how can I contact you

  • @krishnatejaAkella
    @krishnatejaAkella 3 роки тому

    How to do reports in react any tutorial bro

  • @rajalekshmir8308
    @rajalekshmir8308 3 роки тому

    I tryed many time .. error occurs in starting. Can't resolve module

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому +1

      This won't be sufficient to provide any solution. Make sure you have NodeJs installed properly and if you are using the reference code than use npm install to install the dependencies.

  • @masnunahmedsporsho612
    @masnunahmedsporsho612 3 роки тому

    good job

  • @davisonyeoguzoro9232
    @davisonyeoguzoro9232 3 роки тому +1

    I’m having error in my code, PLEASE HELP

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому

      Please specify your error or check for github link and take reference from code

  • @yaseenimuhammadraja9461
    @yaseenimuhammadraja9461 3 роки тому

    Can I get Source code for full project
    Not only for this video but all source code for multiple video's related to this crud
    I think you post multiple video's parts of this project

  • @pratosh
    @pratosh Рік тому

    use nanoid if the uuid is not working.....thanks😄