Understanding State & Handling Events in React | Complete React Course in Hindi #7
HTML-код
- Опубликовано: 18 сен 2024
- useState and State in React: In this react course, we will see how to learn react using projects.
This is going to be a project-based course full of real-world react projects. In this video, we will learn about state in react.
Make sure to access the playlist here (Important): • React Js Tutorials in ...
All the source code and other material will be uploaded on codewithharry.com as and when available!
►Checkout my English channel here: / programmingwithharry
►Click here to subscribe - / @codewithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hin...
►Python Complete Course In Hindi - • Python Tutorials For A...
►C Language Complete Course In Hindi -
• C Language Tutorials I...
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials I...
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video...
►Django Complete Course In Hindi -
• Python Django Tutorial...
►Machine Learning Using Python - • Machine Learning Tutor...
►Creating & Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Developmen...
►Advanced Python Tutorials - • Intermediate/Advanced ...
►Object Oriented Programming In Python - • Object Oriented Progra...
►Python Data Science and Big Data Tutorials - • Python Data Science an...
Follow Me On Social Media
►Website (created using Flask) - www.codewithhar...
►Facebook - / codewithharry
►Instagram - / codewithharry
►Personal Facebook A/c - / geekyharis
Twitter - / haris_is_here
Comment "#HarryBhai" if you read this 😉😉
What i also learned today from this video are as written below:
1. State=condition of any component for eg. textarea component might be empty sometime , sometimes it has letters .
2. Hooks= A method which helps us to use features of classes in function based component this is because developer like us prefer to use function over classes.
3. Hooks has this part ----> const [count,setCount)=useState("Hello Universe");
Here in above hook the value of count is Hello Universe . count is array variable so that we just can't update or change its value like normal variable.
But we can update or change its value using setCount() method. i.e. setCount("Hey You"); this implies the value of count is updated to Hey You.
What is inside this mini project and what i do?
---> Project provides mini textarea and 2/3 buttons like UpperCase, LowerCase, No. of letters. we change the text value according to the buttons instruction using state and event.
Its more simple as we use onClick={ClickFunction) and we define its functionality as well.
Note : Advantages of hooks and this stuff , whenever you click Uppercase button page does not reload. Which enhances its capability. IMP*
Thanks:)
Hii bro you have notes??
Hello
@@sahilpatel0oo7 notes h bhai ?
@@cs_111_amansingh6 refer w3 schools + documentation wahi enough hai ig baaki khud ke hi banalo
harry your react series is more addictive than clash of clans
Btw who plays coc nowadays??🙄
@@soumyadeepnandi8854 I was thinking the same
I envy you
Huh...😌
Samjh hi nhi aa rya
Harry is not inspiration he is real hero in program ♥️
you do apperseation or evil bro
Two videos in a single day. Hats off to you.
4
Ye video phle hi bna li hoti hai
@@amitkapoor9692 bhaot aasan hai aap ke liye aap ka bhi loi channel hai ya hawa me bate karte ho
@@awAmirWarsimere channel hone se kya hai jo bat thi vo bta di maine
Literally took courses on udemy and other teaching platforms. the content which harry bhai provides is way too better to understand and grasp things to learn. would recommend this to literally everyone who wants to learn react.
100% right
👋 hello bro
You are such a great human being sir. The best coding tutor for me is you Harry Sir. Hats off to your work and dedication.
Hello Harry Bhaiya. I am a slow learner, so have to watch your video atleast 5 times to understand the concepts in detail and also have to read the react documentation line by line. But at the end I must say, till lecture 7(my current watching) everything is crystal clear .
thank you Bhaiya
If you are taking time to learn React, probably you should first do the JavaScript course in this channel itself. That's what I did. So after completing JS, I resumed my learning of React now
@@ananyakashyap4759 its feeling very hard to understand
This is best React series ever found on you tube. Thank you soo much Harry to make this easy for us.
Keep up the Good work !!
Harry brother, you are doing a great job, I have seen this kind of effort to make people understand. I visited multiple platforms to learn react but believe me that was just a waste of time for me. It is for the first time that my all concepts for props and state are cleared! Love from Pakistan!!!!!!
This is the second thing I am learning from you, You are an amazing Teacher!
I really find the way you explained the concept in such an easy and efficient way. Most of the tutorials uses big and advance words to show off but this one hit different. Thanks for the concept man 🔥
I just watched last class second time to revise and now after one reload i got this video
Thank you so much harry bhai
and please give me a heart i never got a heart from you❤❤😢😢
Thanks sir i am your most biggest subscriber and first time got a heart from you cann't believe
thank you sir
myc
Maza aa raha hai na? Hope you understood state in react
For optimal learning, make sure to access, save and bookmark this playlist now: ruclips.net/p/PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt
Heart plz
First comment
Thanks, bhai. ❤️
The WebDeveloper Shorts : please checkout this channel
Dil dedo bhai
Key Takeaways for quick navigation:
12:20 🔄 Handling State in React:
- State in React is managed using the `useState` hook.
- State variables are declared using array destructuring, e.g., `const [text, setText] = useState('Enter text here')`.
- Updating state should be done using the provided updater function (e.g., `setText(newText)`), not directly.
14:13 🖱 Handling Events in React:
- Events like `onClick` and `onChange` are handled using functions in React.
- Event handling functions, like `handleUpClick`, can be defined to execute actions on events.
19:24 🔄 Updating State Based on User Input:
- State variables can be updated based on user input, such as changing a text value in a text area.
- Use the `onChange` event to track changes in input and update the state accordingly.
20:48 ⬆ Updating State with Derived Values:
- State can be updated with values derived from existing state, like converting text to uppercase before setting it.
- Example: `setText(newText.toUpperCase())`.
23:39 🎣 Introduction to React Hooks:
- `useState` is just one of the many React Hooks available.
- React Hooks provide additional functionalities, making the development of applications in React more efficient and organized.
This comment must be pinned.
bhagwan ka aadmi 🙏
Harry , I'm so happy that i found your channel. I was learning React from one of the very famous online learning app(I'm not going to disclose app's name) but i was unable to strong my basics of react. I used to write every thing hand coded when i initially leared html css and plain javascript and when i decided to learn react, that online course and app was not able to clear my bascis as beginner in react. This is 7th video i'm watching from your channel and trust me , my most of the basic doubts has been already clear. Thank you so much. I'M SUPER POSITIVE THAT I'LL LEARN MANY SKILLS FROM YOUR VIDEOS. Thanks again for sharing in such a fun way. I like when you make us laugh too in between videos. Big heart ♥♥♥♥♥♥♥♥♥♥
East or west harry bhai is the best from todays morning i am trying to understand react from others but i am unable to understand a single concept correctly but now after watching this react playlist i got everything in my mind 👍
thank you so much harry bhai
the best example ever so far...........❤❤❤❤❤❤❤
in place of "value ",we can use "placeholder " so that we don't have to create "onChange "function
THX BRO IT WAS A NICE SOLUTION
Waah yaar! Nahi append krna pada, nahi document select, programmer keliye bhi easy to make and application kitni hi zyada light weight aur as fast as FLASH jaise banegi... 🖤🖤🖤
I was a big fan of harry n now of react.js too 🔥🔥🔥
Hi Harry, This is really appreciable that you have put lots of efforts to create this course. I have been watching all videos thoroughly. I observed small thing that I thought I should correct at 13.15 you tried to change state directly which threw an error because we have used (const) for useState De-structuring. If you use (let) instead and try, you would be able to change state directly. (Though this is not correct way to update the state as you mentioned in video after that). Keep Going and Growing. 🙂
@CodeWithHarry bohat maza aa ryaaa boss
I watched the react in 1 video but I didn't get much but it gave me a good purpose to start exploring more creativity by Harry, and now I'm watching this playlist. one word superb.
although one word is not much for you.
love from Pakistan.❤️
Aur bhai kaha pohonche
@@imnemo2327 abhi university ka kaam kr rha hon isay pause kya hao ha. agr ap ka ps time ha isay follow krtay rho INSHA ALLAH beneficial ho ga bohut.
@@learningfuture7957 ma wese inko nahi thapa technical playlist follow kr rha wo mast ha aur ap bhi check kro is playlist sa behtar i think
@@imnemo2327 ok thank you. I'll surly check it
@@imnemo2327 Yeah, I just watched the Thapa video on useState, he explained way better than Harry.
I am loving this course, Thanks a loooooot for mmaking this course. This a gift for the self learners like me 😍😍
whenever i click on my "convert on uppercase button" the text in the text area converts to upper case, but the page automatically reloads and could not hold output, how can I fix it.
Is that any warning in the console or terminal it is showing?
use preventaaaadefault(); in function that hold the page to reload
@@iambrijeshtoo no
this react tutorial is the best in this world.
Bhai jaldese like karo 😍😀😀😀
Harry Bhai mai ek student hu aur main apke channel se hi 2-3 saal se coding sikh raha hu. Main baas upko meri heartfelt gratitude janana chahata hu.
PS: Mujhe aapse dil chahie
code with harry come with sundeep maheshwarii
The best Course hai yeeeeeeeeeee i loved it. till now i understand each and everything.
6:47 state meaning starts from here
thanks me later
Thanks harry for uploading another video...🙏🙏❤❤❤
First 🔥
YOU ARE AMAZINGG HARRY BHAI LOVE FROM ANTARTICA
I followed every steps and when I am clicking btn convert to uppercase it shows the value only for a second and site automatically reloads and text disappear
event preventDefault
First time in life coding ka Maza aaraha ha amazing teaching ❤
Perfect explanation... Crystal clear 👍
Thank you so much sir . I have a request sir can u please make a Angular playlist basics concept like this sir?
4:56 sir apne jsx wali video mai bola tha ke ham 'for' ka use nhi kar skte iski jagah 'htmlFor' ka use hoga but compiled aur render without kisi error ke ho gya aap explain kar sakte hai iss cheez ko and thnx sir this one of the best react course ❤❤ 4:56
Are harry bhai today is there two videos by you omgggg good very good
This guy is awesome. He is a beast.
Thank you Harry bhai.. Aapki vajah se me bohot kuch sikha hu ❤️❤️❤️
It is going to add massive value into any coder's journey who's gonna watch this whole couse!
Harry Bhai is a great mentor because .,,,,,, state in react ko rutunga nahi balki deemag may rawkhunga!
Well done harry bhai mja aa gya aap se sekh ker
I can't thank you enough Bhaiya... literally any word is insufficient to explain your efforts
For the algorithem. Altho i bought a course on udemy before this course started but i know harry bhai's the best. So im liking and commenting on every video for the algo.
This react course is good and helpful for learning
Highly recomended for begineers who just started react,,very clear & crisp
Ade chize to work ni kari🥲
@@dharmikjain5288 nahi bhai..mai video 15 par hu..abhi to koi dikkat nahi aayi
Maza Agaya Harry Bhai. This is way better than your older 2hr React Course!!!!!!!!!!!!!
Harry Bhai you are the best
This react course is very useful, love form Nepal harry bhai ❤
Thanks bhai bohot pyar se sikhate hai aap aur look bhi smart hai ap ka and style and voice also
It's eid day 01 and the time is 02:30 PST and I am continuosuly watching and practicing your react js series to get the mastery in it , love and respect from Pakistan Harry Bhai
This react tutorial is the ever best ❤️
harry bhai you are great teacher
HARRY BHAI 2 VIDEOS WOW!!!!! 🔥😊
this is Very helpful for people learning react for the first time ... Thanks Brother
You Are Boss Bro. Love From Bangladesh ....❤❤❤
Bohot maza aa rha hai bhai. You are explaining things so subtly. You are awesome bhai.
"Harry is really a good boy" It should be mark as a universal truth :) You are really awesome Harry bhaiya.
Amazing video!
Thanks Harry
Love you Harry bhai bht aasan tarike se btaya ha aapne, mja aa gya❤❤
well done Harry sir,,,,,i am from pakistan ,,,,,Bhai ma ap ki saari video dekhta hu ,,,ma na ap sa bohat kuch seekha hai ,,,,Allah ap ko khush rakha ,
and ap aur success achieve kra
harry bhai aap se ek request h ki aap ek aisa jugad bnao na jisse hmm student aap se apne future ke bare me kuch bat kr ske. like coffee with Harry. like counselling type and offcorse it will be paid.
sir ----->text Item Store the current value which is passes by useState and setText is the second Item/Fuction which is used for the update value of current value in case if we want to update the current value ....we have choice to use either one item or both and useState/hooks line always mentioned inside the top of function
I didn't got what is useState and how does it actually works,
I guess you should make another video to make it clear;
anyway i am loving this playlist, and definately learning alot
thanks for making such a great study material, for free of cost ☺ ☺
The most easiest explanation of useState
text.split(' ').filter(function(n) { return n != '' }).length this will work perfectly for no of words count
@Harry bhaiya
Bahoot majza aaa raha hai Harry sir
Really respect you and love you.
Very Helpful and great content
bhai dil se thanks hai apko aur apki itni mehnat ka
Harry Bhai this Reactjs Series is one of the beautiful and enjoyable coding series in my ever life..
Love you bhai from Nepal
NICE!
very use full video this course is perfect for beginners in react 😍
Are waah sir ap humare liye kitni mehnet krte ho thankss
Thank you Harry, today I added two more Lowercase & Titlecase buttons using StackOverFlow and your class.
harry bhai bahut mst padhatey ho yaar aap dil se thank u bhai
13:30 error ka reason alag hi hai....simple...kyunki const variable pe value reassign nahin kiya ja sakta....wo baat nahin hai....
agar variable ko "let" ke saath declare kiya jaye toh ye work karega...koyi error nahin aayega.
Harry bhai next level
fantastic video Harybhai because I have seen many videos related to state but I can't understand easily. After watching your video I understand usestate actual meaning.
Harry bhai ap pro ho hum nh sab sir k upr say ja rha hai plzz aram say or achay say explain krdein , reactjs bilkul new hai mare liye
Harry I see your react video wow, your course is a amazing.
I saw multiple tutorial on react, but really couldnt understand anything. But Thanks to you Harry for making things so simple. Heartful thank you for this.
Thanks Harry Sir for such a amazing tutorial 💖💖
I believe in you harry, and lakhs of us believe in you , you keep making videos , we keep learning from you and keep supporting you , thanks for awesome playlist
This video is very very helpful ♥️
Thanks Harry bhai ❤️❤️❤️ you are God of Coding in the World 🌎🌎🌎🌍👍👍👍👍
Awesome Ali bhai its amazing..
Harry bhai maine app k batai bina uppercase wale function ko complete kia!!
maine 3 bar hooks pada hu lekin 4 time me samja vo bhi haary bhai ke video me nicee
Not only video .....Harry's Video is emotions.🤗
My page was getting refreshed on clicking the button.
After looking it up on the internet I found the fix!
-------------------------------------------------------
const handleUpClick = (event)=>{
console.log("'Convert to Uppercase button' was clicked!");
let newText = text.toUpperCase();
event.preventDefault(); // prevent page refresh
setText(newText);
}
-------------------------------------------------------
After this it is working as it should be
Thanks a lot bro
maza aa riya hai......dil garden garden ho riya hai :)
this is very useful tutorial
🔊
Very AWWSOME Video Harry Dada !!!
in current version event.target is undefined instead of that Event.AT_TARGET is used
very good harry bohat achi samajh arai ah