Full React Tutorial #7 - Click Events
HTML-код
- Опубликовано: 11 сен 2024
- In this React tutorial we'll talk about events & how to react to them in our components - specifically, we'll look at click events.
🐱💻 🐱💻 Course Files:
+ github.com/iam...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninj...
+ D3.js & Firebase - www.thenetninj...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstu...
🐱💻 🐱💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja
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!
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!
Wow, thank you for the kind words Waqas :) very much appreciated and thanks for the support!
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.
You are the "Organic Chemistry Tutor" of programming. Amazing explanation at 2:20
Aha, thank you Justin! :) means a lot
He could've used the bind method too!
This person explain things that even paid course instructors dont
keep up great job!!!!!
Cheers
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.
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.
Can't believe this is for free
same
Totally agree
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! 🤩
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!
Loove the series dude!! You are a god sent in these hard times helping people learn with the best resourced ^_^
He saved my dream!
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!
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
!!
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.
Thanks for sharing Ninja have been watching your content for ages
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!✌🏻✌🏻✌🏻
This is a seriously impressive series. Thank you so much.
Thank you Shaun for this tutirial, I have learned a lot, especially click event with anonomous function, it is a great refresh !!!
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!
Great to hear! :) thanks for your support
Blew my mind with the wrapping functions with an anonymous function to accept an argument.
So good man!
A nice example of "All problems in computer science can be solved by another level of indirection." :-)
Yeah, same. And he is explaining it so clear! We are lucky we have him these days
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!
best tutorial for React. You give all the Devs hope that we can build React Apps
That means a lot :) thank you!
Thank you Shaun!! Your videos have been really helpful in my current attempt to change career. It's incredible how you simplify complicated concepts
Thanks for your support :)
omg there is the most useful, clear, easy to understand tutorial I've ever watched!!!
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.
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
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
Shaun. I love you so much bro, keep up the good work ♥
you are the best teacher ever
hopefully Shaun create style components tutorial after this series, because styled components are used a lot in reactjs projects !!!
I will be dong a separate playlist at some point for styled components :)
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!
Thank you so much Mikolaj, Hope you had a lovely Christmas and Happy New Year to you too 😃
Your explanations are so clear and concise. Thank you!
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.
That's great to hear :) I'm glad it was helpful for you andro. Thanks for watching!
These videos save me tons of time reading through the documentation and text-based tutorials on the react official website. Very helpful.
Great to hear! :) thanks for watching
My utmost gratitude for all this A+ level content.
One of the best course on yt, love his teaching
Thanks for your support Jae Wan!
You're just awesome. your videos exactly contain that what someone is searching for at the moment.
Happy to hear that! Thanks for watching Subhakanta :)
So glad I found these series!
the best teacher on youtube!!!
this is a GREAT explanation. very indepth and intuitive. thank you!
oh my god what a concept of annonymous function !! thank you brother
Very grateful for your help 🙏🏾
Thank you Net Ninja! 🔥
Could you do a tutorial on clickevent with being returned from a map(), it's not as straightforward as this.
Thanks a lot!!
I really love your tutorials!
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()
Thanks for this tutorial. I need to recall react things
such an amazing explanation!!!
Incredible. Can't get better than that.
Very awesome. Waiting from many days. Thanks 😊
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!!
Thanks so much :)
@@NetNinja 👼🌼🌼
what a perfect explanation, thumbs up man.
It was useful, thanks.
Excelent as usual ,i have a question,after this tutorial ,shall i need to watch your React Context and hooks tutorials ??
Thanks
Amazing explanation !!
Hey I really like the font you're using. What is it?
Very easy and simple to understand....Thank you so much for all the series.
That's great to hear, thanks for watching Vishwakranti!
i was having dificulty with {} and () in arrow functions especially in react this video helped me a lot thanks bud
You are making me a better programmer, thank you sensei!!
Happy to hear that! :) thanks for watching
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
Awesome! So the answer for my question was a anonymous function!
I just decided to quit from learning react js but this worked , and
you saved a programmer thank you !!😊😊
That's great! :D
Just Loving...it this.tutorial series :)
genius. Thank you.
Can you make a new series on Django PLEASE!
5:32 how to pass an argument to a function
click name
Omg that explanation was so clear! Thank you!
I went through 3 udemy react courses before coming here. I wish I would have found your channels first!
Welcome aboard! :)
Thanks King 👑
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 ❤️😊
great video man
you are Incredible.Thanks for such great tutorial
You're very welcome! Thanks for the support Abhishek :)
You solved my big doubt, Thankyou so much
what's the difference between invoking a function and setting a reference to the function?
All the dislikes are from vue js developers..
thank you soo much, im a ninja now
Will you be using Context API for this one?
Is "this" no longer necessary in React? I've just about gotten used to it, too.
Amazing content.
you my man. are awesome.
can u do an advanced tutorial on react and redux pleaseeeeeeee :( .... i love your vedioss , very clear....please can you do one
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.
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!
@@ChrisPirillo147 Okay, that makes a lot more sense to me now. Thank you so much!
@@AkiratheWhite Glad I helped!
Awesome explanation
Glad you think so!
Thank you so much.
number 1 Thanks
Brilliant explanation. Thank you!
You're very welcome! :) thanks for watching
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?
pay in dollars
@@mikolajhenzel I guess it's not legal
@@anandathawale609 why not bro, your bank exchanges money. You only pay commission for not paying in ur currency
ty.
Dam thats so confusing the anonymous function, cause you have a function handleClickAgain and it takes in a name parama and then your making it into another function with no name and calling it inside the anom function its so confusing nested functions. Will always have to search this one up haha
Thank you
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
Have u found the answer?
Legend
Thanks
I LOVE YOU
Dude you really awesome!!!!!!!!!!!!!!!!!❤
Thank you so much 😀
Thank You so much, you are a life saver 🤩
No problem 😊 thanks for watching!
thanks it really worked, tysm
what a perfect content!!
Thanks for the video its so much helpful
Glad it was helpful!
This helped me a lot thanks ...
Great to hear that! :)