Maza aa raha hai na? Hope you understood state in react For optimal learning, make sure to access, save and bookmark this playlist now: ua-cam.com/play/PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt.html
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.
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*
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.
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 🔥🔥🔥
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!!!!!!
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❤❤😢😢
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
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 👍
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 🔥
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
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 ♥♥♥♥♥♥♥♥♥♥
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.❤️
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
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.
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.
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. 🙂
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
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
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
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.
9:56 sharyi sunte raho kahani , apko samajh m ayegi baat, kyunki mene abhi khatam nhi kara hai, hooks kai bare m batana or state k bare m batana aaj ,,,,,,,,,,,,,,,,,, wah wah wahhhhhh
Legend 17yo me doing this in browser ide of window 7 Window 10 ka paisa nhi hai lekin jajba toh hai harry bhaiya react node window 7 me bhi work kar sakta hai mai browser me ide chala ke apke videos se code karta hoo thanku bhaiya ji
00:02 Understanding Props and Creating a New Component 02:15 Creating a TextForm component with props and rendering it in a container 04:37 Understanding State in React 07:10 Understanding State & Handling Events in React 09:54 Understanding useState and updating state in React 12:42 Understanding how to set the value of a textarea and the correct way to change the state in React 15:22 Handling events in React and updating state 18:00 Understanding event handling and state in React 20:26 Understanding State & Handling Events in React 22:59 Understanding State & Handling Events in React
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
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.
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 ☺ ☺
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.
Maza aa raha hai na? Hope you understood state in react
For optimal learning, make sure to access, save and bookmark this playlist now: ua-cam.com/play/PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt.html
Heart plz
First comment
Thanks, bhai. ❤️
The WebDeveloper Shorts : please checkout this channel
Dil dedo bhai
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
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 🙏
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
@@Sahildietnfitness notes h bhai ?
@@cs_111_amansingh6 refer w3 schools + documentation wahi enough hai ig baaki khud ke hi banalo
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
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 is not inspiration he is real hero in program ♥️
you do apperseation or evil bro
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 🔥🔥🔥
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
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 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
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.
Thanks
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
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 👍
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 🔥
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
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 ♥♥♥♥♥♥♥♥♥♥
Harry Bhai is a great mentor because .,,,,,, state in react ko rutunga nahi balki deemag may rawkhunga!
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.
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
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
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
@@brijeshkumarchavda no
The best Course hai yeeeeeeeeeee i loved it. till now i understand each and everything.
Bhai jaldese like karo 😍😀😀😀
I am loving this course, Thanks a loooooot for mmaking this course. This a gift for the self learners like me 😍😍
thank you so much harry bhai
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.
6:47 state meaning starts from here
thanks me later
Thank you Harry bhai.. Aapki vajah se me bohot kuch sikha hu ❤️❤️❤️
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. 🙂
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
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
Yess sirrr Maza aagaya
Convert to upper case page banake
The one that is made by myself 🎉🎉🎉🎉🎉
First 🔥
It is going to add massive value into any coder's journey who's gonna watch this whole couse!
Perfect explanation... Crystal clear 👍
Thanks harry for uploading another video...🙏🙏❤❤❤
code with harry come with sundeep maheshwarii
Maza Agaya Harry Bhai. This is way better than your older 2hr React Course!!!!!!!!!!!!!
@CodeWithHarry bohat maza aa ryaaa boss
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
I can't thank you enough Bhaiya... literally any word is insufficient to explain your efforts
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.
First time in life coding ka Maza aaraha ha amazing teaching ❤
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
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.
9:56 sharyi
sunte raho kahani ,
apko samajh m ayegi baat,
kyunki mene abhi khatam nhi kara hai,
hooks kai bare m batana or state k bare m batana aaj ,,,,,,,,,,,,,,,,,,
wah wah wahhhhhh
this is Very helpful for people learning react for the first time ... Thanks Brother
Legend 17yo me doing this in browser ide of window 7
Window 10 ka paisa nhi hai lekin jajba toh hai harry bhaiya react node window 7 me bhi work kar sakta hai mai browser me ide chala ke apke videos se code karta hoo thanku bhaiya ji
Harry Bhai this Reactjs Series is one of the beautiful and enjoyable coding series in my ever life..
Thanks Harry bhai ❤️❤️❤️ you are God of Coding in the World 🌎🌎🌎🌍👍👍👍👍
00:02 Understanding Props and Creating a New Component
02:15 Creating a TextForm component with props and rendering it in a container
04:37 Understanding State in React
07:10 Understanding State & Handling Events in React
09:54 Understanding useState and updating state in React
12:42 Understanding how to set the value of a textarea and the correct way to change the state in React
15:22 Handling events in React and updating state
18:00 Understanding event handling and state in React
20:26 Understanding State & Handling Events in React
22:59 Understanding State & Handling Events in React
Well done harry bhai mja aa gya aap se sekh ker
This guy is awesome. He is a beast.
maine 3 bar hooks pada hu lekin 4 time me samja vo bhi haary bhai ke video me nicee
YOU ARE AMAZINGG HARRY BHAI LOVE FROM ANTARTICA
BHut Shi or Sandar couse hai bhaiya Thank you so much.😍😉😊
❤🥰🥰
Thanks bhai bohot pyar se sikhate hai aap aur look bhi smart hai ap ka and style and voice also
HARRY BHAI 2 VIDEOS WOW!!!!! 🔥😊
Love you Harry bhai bht aasan tarike se btaya ha aapne, mja aa gya❤❤
Are harry bhai today is there two videos by you omgggg good very good
This react tutorial is the ever best ❤️
thank you Harry , maja aagaya ReactJS se
Bahoot majza aaa raha hai Harry sir
Really respect you and love you.
Amazing video!
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
Not only video .....Harry's Video is emotions.🤗
You Are Boss Bro. Love From Bangladesh ....❤❤❤
bhai dil se thanks hai apko aur apki itni mehnat ka
very use full video this course is perfect for beginners in react 😍
Are waah sir ap humare liye kitni mehnet krte ho thankss
Harry is a good boy😂😂😂
Funniest part sirr!!!!
Very AWWSOME Video Harry Dada !!!
Thank you Harry, today I added two more Lowercase & Titlecase buttons using StackOverFlow and your class.
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.
This React course is very very helpful.
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 ☺ ☺
This react course is very useful, love form Nepal harry bhai ❤
great harry bhai maza aa rha hai sach mein.
maza aa riya hai......dil garden garden ho riya hai :)
Thank you so much sir . I have a request sir can u please make a Angular playlist basics concept like this sir?
The most easiest explanation of useState
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.
very good harry bohat achi samajh arai ah
state explained from 7:04
this react tutorial is the best in this world.
Sir time 23:00 par click to uppercase par click karne par new blank page open ho raha plaese help me
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.
🙌🙌you always gives us good inner happiness
harry bhai bahut mst padhatey ho yaar aap dil se thank u bhai
This Couse Is Really helpful for me!!!🎊✨✨✨
khush raho brother and thanks alot for making these amazing videos
Sir sir sir sir you are amazing wonderful charming kindful helpful humble inshort you are everything
......
text.split(' ').filter(function(n) { return n != '' }).length this will work perfectly for no of words count
@Harry bhaiya
This react course is helpful!🔥