Full React Tutorial #7 - Click Events

Поделиться
HTML-код
  • Опубликовано: 29 ноя 2024

Комментарии • 169

  • @flamingoodness4923
    @flamingoodness4923 2 года назад +22

    I was struggling A LOT with a different instructor for react. I watch a single video from you and everything just clicks immediately. You helped me through JavaScript, and now you're doing the same with react! Thank you SO MUCH for everything!

  • @KasK6517
    @KasK6517 2 года назад +31

    Thank your for everything that you do for the dev community. I never really understood JavaScript until i took your course and now i am so glad I'm learning ACTUALLY LEARNING React from you. I feel like my career has been delayed by wasting my time on other courses. You are a real Hero Shaun, thank you for making this and future devs. Much Love!

    • @NetNinja
      @NetNinja  2 года назад +3

      Wow, thank you for the kind words Waqas :) very much appreciated and thanks for the support!

  • @touseefghazanfar8487
    @touseefghazanfar8487 3 года назад +19

    I finally understood difference passing function and anonymous function before that I was just writing those functions without complete understanding. Thanks Shaun for elaborating it so perfectly.

  • @Justin-oi2tk
    @Justin-oi2tk 2 года назад +8

    You are the "Organic Chemistry Tutor" of programming. Amazing explanation at 2:20

    • @NetNinja
      @NetNinja  2 года назад +4

      Aha, thank you Justin! :) means a lot

    • @kqvanity
      @kqvanity 2 года назад

      He could've used the bind method too!

  • @BillyLongshot
    @BillyLongshot 2 года назад +1

    before watching this clip: hours and hours of trial-and-error trying to figure out why my function is not 'valid as a React child', or why my event is not automatically passed to the function, or why my event handler fires on the first page render. This was wonderfully explained. And loved that you included the bit at the end on how to see what your event looks like in detail. Been trying to do that for ages as well. A very big thank you!

  • @naseemussehar8118
    @naseemussehar8118 3 года назад +4

    This person explain things that even paid course instructors dont
    keep up great job!!!!!
    Cheers

  • @IIdankII
    @IIdankII 2 года назад +3

    I am 40 hours deep into this react project and I finally understand what this basic functional sequence means. Thank you very much you are a hero.

  • @Amolang991
    @Amolang991 2 года назад +1

    OMG i have watched a tons of REACT tutorials in RUclips and couldn't understand why the event handler works that way. But finally, now I understood. Thank you
    !!

  • @mr.c7411
    @mr.c7411 3 года назад +59

    Can't believe this is for free

  • @thiagoantonioferreira9614
    @thiagoantonioferreira9614 2 года назад +1

    Man, your explanation is very clear and consistent, I'm not a English speaker, and I'm able to understand very easy. Thanks so much for this.

  • @vidyashankargs9634
    @vidyashankargs9634 Год назад +1

    best tutorial for React. You give all the Devs hope that we can build React Apps

    • @NetNinja
      @NetNinja  Год назад

      That means a lot :) thank you!

  • @rajeevbhu
    @rajeevbhu 3 года назад +6

    Last few minutes went above my head but I'll wait for next video and revisit this Event Object later. Thank you so much for great quality videos.

  • @ericzedd
    @ericzedd 3 года назад +3

    Blew my mind with the wrapping functions with an anonymous function to accept an argument.
    So good man!

    • @pieteromt8121
      @pieteromt8121 3 года назад

      A nice example of "All problems in computer science can be solved by another level of indirection." :-)

    • @deki90to
      @deki90to 3 года назад +1

      Yeah, same. And he is explaining it so clear! We are lucky we have him these days

  • @piotrszczesniak
    @piotrszczesniak 2 года назад +8

    Awesome! This is what I was looking for. I didn't know that the object "e" is automatically passed when we call the function by reference! Awesome tutorial Ninja! 🤩

  • @ingeniousgoldie
    @ingeniousgoldie Год назад

    I'm watching this two years later and this course beats Meta's professional React course. I have to rush here to relearn things that the Meta React tutor is complicating. Simplicity is everything.
    Thank you NetNinja, I learnt jQuery from you too. And I'll definitely be watching your other seamless tutorials.

  • @alastairmakesmusic
    @alastairmakesmusic 3 года назад +10

    This is a seriously impressive series. Thank you so much.

  • @tejas8417
    @tejas8417 3 года назад +65

    Loove the series dude!! You are a god sent in these hard times helping people learn with the best resourced ^_^

  • @scanpower8439
    @scanpower8439 2 года назад +2

    Hey man! Just wanted to say THANK YOU! My college course on react was too theoretical and complicated and really intimated it until i watched your videos which are awesome and easy to grasp!

  • @enkhtaivanbyambajav4174
    @enkhtaivanbyambajav4174 2 года назад +1

    GOD I love you so much!! I have already watched the JavaScript course from you! now I'm watching React! I have never learned something so quickly like this before!

    • @NetNinja
      @NetNinja  2 года назад +1

      Great to hear! :) thanks for your support

  • @benjaminjvredevelt
    @benjaminjvredevelt 3 года назад +6

    This is an excellent series my friend! Thank you for you attention to detail and getting straight to the point. Displacement before Distance and Quality before Quantity!✌🏻✌🏻✌🏻

  • @andromilk2634
    @andromilk2634 9 месяцев назад

    Very well done, you don't just explain us how to apply concepts, but you also tell us why they work the way they do. The usual explanation that we must cover our functions having arguments with anonymous functions never made much sense to me, but the fact you provided a reason made it such that I finally understand why. Thanks again for the great pedagogy.

    • @NetNinja
      @NetNinja  9 месяцев назад +1

      That's great to hear :) I'm glad it was helpful for you andro. Thanks for watching!

  • @wanyingli246
    @wanyingli246 3 года назад +1

    omg there is the most useful, clear, easy to understand tutorial I've ever watched!!!

  • @piotrszczesniak
    @piotrszczesniak 2 года назад +1

    Hey the Ninja Master! This video is a live saver for me. I was here 8 days ago, and I am back for reference! Cheerio!

  • @dhanalakshmilic9107
    @dhanalakshmilic9107 Год назад

    I just decided to quit from learning react js but this worked , and
    you saved a programmer thank you !!😊😊

  • @michal3833
    @michal3833 2 года назад +1

    you are the best teacher ever

  • @CheeseHerd152
    @CheeseHerd152 Год назад +1

    My utmost gratitude for all this A+ level content.

  • @janwan
    @janwan 2 года назад +1

    One of the best course on yt, love his teaching

    • @NetNinja
      @NetNinja  2 года назад +1

      Thanks for your support Jae Wan!

  • @syahirdev3193
    @syahirdev3193 3 года назад +8

    Just to share information.
    If you guys want to type the arrow function using custom snippet, just do this
    Ctrl + Shift + P
    Type "snippet"
    Choose "Preferences: Configure User Snippets"
    Choose "New Global Snippet File"
    Enter anything for your new custom snippet file, e.g. "my-custom-snippet"
    Inside the file, insert this so it should be like this:
    { "Arrow Function": { "prefix": "arrf", "body": ["const ${1:functionName} = ($2) => {", " $3", "}"], "description": "Arrow Function" }, "Simple Arrow Function": { "prefix": "arrsf", "body": ["() => ${1:functionName}($2)"], "description": "Simple Arrow Function" }}
    Then you can type "arrf" to output like this :
    const functionName = () => {
    };
    or type "arrsf" to output like this :
    () => functionName()

  • @tGoldenPhoenix
    @tGoldenPhoenix 8 месяцев назад

    These videos save me tons of time reading through the documentation and text-based tutorials on the react official website. Very helpful.

    • @NetNinja
      @NetNinja  8 месяцев назад

      Great to hear! :) thanks for watching

  • @maskman4821
    @maskman4821 3 года назад +4

    Thank you Shaun for this tutirial, I have learned a lot, especially click event with anonomous function, it is a great refresh !!!

  • @CrookzArtwork
    @CrookzArtwork 3 года назад +2

    Thanks for sharing Ninja have been watching your content for ages

  • @emmanuelekpobimi4481
    @emmanuelekpobimi4481 3 года назад +1

    the best teacher on youtube!!!

  • @ChrisPirillo147
    @ChrisPirillo147 3 года назад +1

    So glad I found these series!

  • @beinyourguard
    @beinyourguard 3 года назад +3

    Pretty nice. I'm starting on react and I'm starting to understand the basics thanks to you.
    Really looking forward to using props, super, hooks, and all that stuff

  • @bitetheapple8
    @bitetheapple8 Год назад +2

    Thank you Shaun!! Your videos have been really helpful in my current attempt to change career. It's incredible how you simplify complicated concepts

    • @NetNinja
      @NetNinja  Год назад

      Thanks for your support :)

  • @maskman4821
    @maskman4821 3 года назад +8

    hopefully Shaun create style components tutorial after this series, because styled components are used a lot in reactjs projects !!!

    • @NetNinja
      @NetNinja  3 года назад +13

      I will be dong a separate playlist at some point for styled components :)

  • @dv5870
    @dv5870 3 года назад +2

    Love your videos Shaun! I'm doing the Vue course on Udemy right now and then I'll come and give React a try. Thanks for all these awesome series which you keep putting up back to back

  • @kevintamaki
    @kevintamaki 2 года назад +1

    Your explanations are so clear and concise. Thank you!

  • @subhakantaroul
    @subhakantaroul 2 года назад +1

    You're just awesome. your videos exactly contain that what someone is searching for at the moment.

    • @NetNinja
      @NetNinja  2 года назад +1

      Happy to hear that! Thanks for watching Subhakanta :)

  • @mikolajhenzel
    @mikolajhenzel 3 года назад +3

    Thank you so much for what u do Master. I got my Christmas money so I could join the Gang and became a sponsor! Happy New Year you deserve everything best!

    • @NetNinja
      @NetNinja  3 года назад +1

      Thank you so much Mikolaj, Hope you had a lovely Christmas and Happy New Year to you too 😃

  • @ashokpoudel6314
    @ashokpoudel6314 3 года назад +1

    oh my god what a concept of annonymous function !! thank you brother

  • @usmanhussain923
    @usmanhussain923 3 года назад +1

    Incredible. Can't get better than that.

  • @boultifnidhal2600
    @boultifnidhal2600 2 года назад +1

    Shaun. I love you so much bro, keep up the good work ♥

  • @TheZayzoo
    @TheZayzoo 2 года назад +1

    Could you do a tutorial on clickevent with being returned from a map(), it's not as straightforward as this.

  • @inaamullah7192
    @inaamullah7192 3 года назад +1

    what a perfect explanation, thumbs up man.

  • @adrianayon5513
    @adrianayon5513 Год назад +1

    You are making me a better programmer, thank you sensei!!

    • @NetNinja
      @NetNinja  Год назад

      Happy to hear that! :) thanks for watching

  • @bobokhonrajabov18
    @bobokhonrajabov18 3 года назад +1

    Very awesome. Waiting from many days. Thanks 😊

  • @2ndintelligentWorld
    @2ndintelligentWorld 3 года назад +1

    this is a GREAT explanation. very indepth and intuitive. thank you!

  • @akshaysrivastava4304
    @akshaysrivastava4304 2 года назад +1

    such an amazing explanation!!!

  • @RICO-sr2fn
    @RICO-sr2fn 3 года назад +2

    Thanks for this tutorial. I need to recall react things

  • @RealSLK
    @RealSLK 3 года назад +1

    Very grateful for your help 🙏🏾

  • @dennisgonzales9521
    @dennisgonzales9521 3 года назад +1

    Awesome! So the answer for my question was a anonymous function!

  • @AbhishekJain-pm2jn
    @AbhishekJain-pm2jn 2 года назад +1

    you are Incredible.Thanks for such great tutorial

    • @NetNinja
      @NetNinja  2 года назад

      You're very welcome! Thanks for the support Abhishek :)

  • @skrullmania4808
    @skrullmania4808 Год назад

    Omg that explanation was so clear! Thank you!

  • @ritaravinsky8262
    @ritaravinsky8262 2 года назад +1

    Thanks a lot!!
    I really love your tutorials!

  • @CoffeeDev749
    @CoffeeDev749 3 года назад +1

    Thank you Net Ninja! 🔥

  • @ilhanersoy7775
    @ilhanersoy7775 3 года назад +1

    Amazing explanation !!

  • @alimardan2665
    @alimardan2665 Год назад

    i was having dificulty with {} and () in arrow functions especially in react this video helped me a lot thanks bud

  • @vishwakrantisuryawanshi5594
    @vishwakrantisuryawanshi5594 Год назад

    Very easy and simple to understand....Thank you so much for all the series.

    • @NetNinja
      @NetNinja  Год назад

      That's great to hear, thanks for watching Vishwakranti!

  • @nancyfazal2536
    @nancyfazal2536 3 года назад +1

    You are simply the best :) I have learned alot from you , right from your modern Javascript course on Udemy and React series here. Respect from Pakistan!!

  • @ahmaddawood9691
    @ahmaddawood9691 3 года назад +1

    Excelent as usual ,i have a question,after this tutorial ,shall i need to watch your React Context and hooks tutorials ??
    Thanks

  • @GiancarloCarccamo
    @GiancarloCarccamo 2 года назад +1

    great video man

  • @thegodfatherse7enran
    @thegodfatherse7enran Год назад

    I went through 3 udemy react courses before coming here. I wish I would have found your channels first!

  • @ChandanKumar-of1je
    @ChandanKumar-of1je 3 года назад +2

    Just Loving...it this.tutorial series :)

  • @tarekghosn3648
    @tarekghosn3648 2 года назад +1

    you my man. are awesome.

  • @shashithasandunil9464
    @shashithasandunil9464 2 года назад +1

    Thank you so much.

  • @prashantsingh7507
    @prashantsingh7507 2 года назад

    You solved my big doubt, Thankyou so much

  • @noelthomasbejoy3089
    @noelthomasbejoy3089 3 года назад +1

    Will you be using Context API for this one?

  • @kinstar
    @kinstar 3 года назад +2

    i completely forgot about anonymous functions it never crossed my mind until now, why we had to do it like that now it makes sense xDDDDDD

  • @blizzaroxxx
    @blizzaroxxx 3 года назад +1

    Hey I really like the font you're using. What is it?

  • @guryashzone
    @guryashzone 3 года назад +8

    All the dislikes are from vue js developers..

  • @KaPaTeJIb6a6o4ek
    @KaPaTeJIb6a6o4ek 2 года назад +1

    It was useful, thanks.

  • @richardwilliam7030
    @richardwilliam7030 3 года назад +1

    thank you soo much, im a ninja now

  • @learningit2572
    @learningit2572 2 года назад +1

    number 1 Thanks

  • @Phas0ruk
    @Phas0ruk 3 года назад +1

    genius. Thank you.

  • @hananfadah
    @hananfadah Год назад

    Brilliant explanation. Thank you!

    • @NetNinja
      @NetNinja  Год назад

      You're very welcome! :) thanks for watching

  • @mriganksingh7586
    @mriganksingh7586 3 года назад +1

    Awesome explanation

    • @NetNinja
      @NetNinja  3 года назад +1

      Glad you think so!

  • @shikhar2811
    @shikhar2811 3 года назад +2

    Thanks King 👑

  • @damianodamian7907
    @damianodamian7907 3 года назад +1

    what's the difference between invoking a function and setting a reference to the function?

  • @legendaryknight6462
    @legendaryknight6462 3 года назад +1

    Dear Shaun , I am thankful as always for this amazing tutorial .just wanted to ask a good tutorial like yours for Redux if you please help me about it . Thank you so much as always ❤️😊

  • @gerryjtierney
    @gerryjtierney 3 года назад +2

    Is "this" no longer necessary in React? I've just about gotten used to it, too.

  • @toannew
    @toannew 3 года назад +2

    5:32 how to pass an argument to a function
    click name

  • @AndriusLau
    @AndriusLau 3 года назад +1

    Amazing content.

  • @AkiratheWhite
    @AkiratheWhite 3 года назад +1

    At the risk of asking a really basic question, what is happening when you "pass a reference to a function" vs. invoking the function (i.e. adding the () to the end of the function name)?
    Is the former saying that the event "clicking the button" will execute the function when the event is raised, whereas adding the () to the function executes the code as soon as the function has been defined?
    P.S. Not exactly new to programming but was also never properly taught many of the fundamentals.

    • @ChrisPirillo147
      @ChrisPirillo147 3 года назад +1

      Passing a reference does NOT call the function. But adding the () calls it so the code is executed right away. A reference is best used when you want to call a function under specific condition. Hope that helps!

    • @AkiratheWhite
      @AkiratheWhite 3 года назад +1

      @@ChrisPirillo147 Okay, that makes a lot more sense to me now. Thank you so much!

    • @ChrisPirillo147
      @ChrisPirillo147 3 года назад

      @@AkiratheWhite Glad I helped!

  • @dr.asimali4263
    @dr.asimali4263 3 года назад +2

    Can you make a new series on Django PLEASE!

  • @rusucristina
    @rusucristina 3 года назад +1

    Thank you

  • @anandathawale609
    @anandathawale609 3 года назад +4

    Hey ninga when I tried to buy your merchandise the amount was showing In dollars but in india we use ruppes so what can I do?

    • @mikolajhenzel
      @mikolajhenzel 3 года назад

      pay in dollars

    • @anandathawale609
      @anandathawale609 3 года назад

      @@mikolajhenzel I guess it's not legal

    • @mikolajhenzel
      @mikolajhenzel 3 года назад

      @@anandathawale609 why not bro, your bank exchanges money. You only pay commission for not paying in ur currency

  • @monishmayekar5197
    @monishmayekar5197 Год назад

    Thank You so much, you are a life saver 🤩

    • @NetNinja
      @NetNinja  Год назад

      No problem 😊 thanks for watching!

  • @shankarpubg9413
    @shankarpubg9413 9 месяцев назад

    Dude you really awesome!!!!!!!!!!!!!!!!!❤

    • @NetNinja
      @NetNinja  8 месяцев назад

      Thank you so much 😀

  • @jackpaperhands
    @jackpaperhands 2 года назад +1

    Legend

  • @chathurisilva2892
    @chathurisilva2892 3 года назад +1

    can u do an advanced tutorial on react and redux pleaseeeeeeee :( .... i love your vedioss , very clear....please can you do one

  • @ZenhostPanel
    @ZenhostPanel Год назад

    This helped me a lot thanks ...

    • @NetNinja
      @NetNinja  Год назад

      Great to hear that! :)

  • @Mahmudulhasan-ts5hm
    @Mahmudulhasan-ts5hm 3 года назад +1

    thanks

  • @thinkandthink6879
    @thinkandthink6879 Год назад

    Thanks for the video its so much helpful

    • @NetNinja
      @NetNinja  Год назад

      Glad it was helpful!

  • @eijstech
    @eijstech 2 года назад +1

    I LOVE YOU

  • @NumbBlaze
    @NumbBlaze Год назад

    How does the function know if the first parameter is one I made or the event object? For example why is the name parameter not the event object in this case?

  • @rajibdesai
    @rajibdesai Год назад

    thank you for your helpful vedio.....

    • @NetNinja
      @NetNinja  Год назад

      You're very welcome!

  • @dasithatharinda8503
    @dasithatharinda8503 2 года назад +1

    good

  • @TechnicalOllie
    @TechnicalOllie 7 месяцев назад

    thanks it really worked, tysm

  • @awhitechilliify
    @awhitechilliify 3 года назад +4

    Very interesting!
    This 'onClick' looks like something outdated used before in HTML, too. So it makes me feel that its 'not how it supposed' be. Can you reassure me that it is okay, or is there any other way, a 'cleaner way' rather than adding it directly to the ? :D