React Tutorial In Hindi #9: React Click Event And Function | React JS Tutorial for Beginners | React

Hello everyone welcome to the another new video, this is a part-9 of the ReactJS series we will see Click event and Function inside this video, will cover theory and practical I told you in every video series of ReactJS tutorial is going on if you miss any video then playlist You will get the link of the description box, you can also watch the video by going there and if you have any doubt related to any of my videos, then you can ask your doubt by commenting and you will also find the link of a

ll the social media platforms in the description. go and follow and source code, you will also find a link of our website and GitHub in the description, that too you can follow, so let's see here how we keep the events, so here, What are event handlers in React ? This is the most important topic and this is where the entire React is done, the related to functionality will try to understand it very well, so here I have kept its introduction, Event handlers determine what action is to be taken whe

never an event is fired. This could be a button click or a change in a text input. declare any function inside java script like we used to get click on there and get on change, so in the same way here also things go on for us. But its a little bit of scenery and a little bit changes like I had taught you in the previous video, it is because of JSX that here you have to get the function done in a different way ok after that see the next Essentially, event handlers are what make it possible for us

ers to interact with your React app. Handling events with React elements is similar to handling events on DOM elements, with a few minor exceptions. If you’re familiar with how events work in standard HTML and JavaScript, it should be easy for you to learn how to handle events in React. like I told you that whenever I will take series of react then before that i will give you java I will give series of JavaScript and Advance JavaScript because it will give you better understanding of how react w

ill work that's why I completed both those series first guys ok after that let's see ,What are OnClick handlers in React ? for this also i have placed here, The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app. as a user if I'm clicking on a button, then the functionality will work here Event names are written in camelCase, so the onclick event is written as onClick in a React app. In addition, React eve

nt handlers appear inside curly braces. they will have to be call inside the {}, now I consider you a small example here, how we had to write the function in HTML till now, on click, see your capital is not yours, onClick is not in a small case and {} is also not here we will call the function inside the squire by usning the () but is we see inside the ReactJS, you will get to see that the C is a capital in onClick in which I am talking about how camel case, and give you, you will get the functi

on call here these type of questions can also be asked in Interview the part of your theory let's go here to do practical on our editor so this is our editor and after coming on editor first of all here what we have done to your app.js We have opened it ok its output is something like this we are getting here in the name of hello everyone ok here we are going to see and we have created this new branch in the name of new part 9 your click event, on GitHub you will get its complete source code, it

s link will also be available at a description box, now what I have to do here, here first of all, what we do is make a button, see, I am going to make a button I am going make its name click me and here what we do let's declare a function in which way it is run your event inside this so I am here I suppose I am taking and demo arrow function is making I am here ok let's take an alert Here, inside this alert, what do I do, here I write hello everyone, see here, okay, we have made a function, you

are seeing the function here. But I have taught all this, inside the Advance JS, before doing this, I will have to will call the function here also, so how will we call it? will write onClick C will be capital, then we will use {}, will write the demo and () in side the curly braces I save it and from here and take it to you on the browser, then see this, your function is automatically coming on onload, if I show you here, see as many times also you will pay here refresh if i will refresh it if

see if your function is is called automatically it should not happen automatically because we have made click here with click event that your function should be performed only when you click why this is happening this is happening because of you we are declaring () here Won't call () on the function, I do it from here I will remove and after removing I will go here after doing from and from here after walking here you will see see your hello everyone now I will click on this so after clicking Y

ou will also have a trigger here, okay, so you are seeing how your function is running here, until I click here, until your function is not triggering here, okay, this is yours. here how you can do with the function now one more thing that you believe here like I have call ok and in () now you want i can get this print in console or in alert you get this done, how can you get it done, you will not have to do anything here, you will have to create a fat function here, I have already taught you in

advance how the fat function works, and here I am hello. Everyone will write here now I am not going to get the function call so now what is work here I will go here and save it and see here I already refresh even then your function call is not happening as soon as I will do it after clicking here you will see then hello everyone is also visible here ok see this so this is your format in which way you for inline whenever you want to inline Will you do things for us, then you can do these thin

gs on time, now you will have one more question that whenever we take fat arrow function and on time we have fat arrow function, then we can use fat arrow function. I can get our function call yes we can get it done you don't have to do anything you will remove the alert from here I have removed or deleted, you have to take the name of your function I will apply here I will write the demo here and will save it will refresh here then see after refresh now even with demo() your on load here and on

alert and function automatically not calling here, until I click, as soon as I do, click here, after clicking, you will see that your function is here, it is done, see this and the code will be visible to you here, so this is also one of yours. method here now after this if you want I have a variable in let's say what I do variable I take a variable here okay let's take let and create data and inside data let's say I have string I see this first ok now what I have to do is that first of all I w

ant to check this data inside the alert that what is the value of the data then I will put it here inside the alert ok now I will go I will I have save this, after doing this, what will we do now, we will go here, we will refresh here, we will see after refreshing, even then our on load is not running, now I will do ok, after clicking here, you will see the value. What are we getting here, on the variable's education, on your code, OK, I will go back, now you have seen that here, what is the val

ue of your data, after the value of the data, what should you do now that you want to It is okay to change the value of its data, how can you change, you can accept the change, if I took the data here, OK, and I changed its value here, Bhaskar Gupta, and what I did, I got the data printed here, I validated it, braces. Got your variable printed inside something like this you can also get the variable printed in your file will do from and after doing will go here after coming here you will see the

Code4Education It is also visible, but we had changed the data, what should be the value of the data, if I click on it, then after clicking here, you are getting the value change Bhaskar Gupta, but you must be seeing it here. What we have printed your yes one inside there you have not been updated here so why is it not updated because here we do not update the variables here to get it printed anytime here we get with this state we can get the state updated ok so with that our value which is abs

olutely dynamic way in this way we can do state management so in the next video i will teach you Inside the video was only that how you can control the click event here, how to declare the function, how you can print the variable here, but in the upcoming video, I will tell you that at the time of variables, what do we print here, ok, and how can you manage, you can update and delete all these things, if you have any doubt related to this video, then you can comment and ask your doubt, what I am

going to teach to you in the next video. Yes, let's see that also once, so in the next part, we will see React State with function, how it works Theory and practical guys Thanks for watching this video, bye bye guys :)