#30: Hooks in React JS in Hindi | useState in Hook in React JS in Hindi in 2020
Вставка
- Опубліковано 26 сер 2024
- Welcome, what is Hooks in React JS in Hindi? We will see the useState hook in react js in Hindi. Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes - they let you use React without classes. React provides a few built-in Hooks like useState. The useState hook allows us to make our function components stateful.
When called, useState returns an array of two items. The first being our state value and the second being a function for setting or updating that value. The useState hook takes a single argument, the initial value for the associated piece of state, which can be of any Javascript data type.
************ Must Watch Videos For Web Development ************
➡️ Array Destructuring in ES6 in JavaScript in Hindi 2020: • ES6 Tutorial #5: Array...
➡️ Object Destructuring in ES6 in JavaScript in Hindi: • ES6 Tutorial #7: Objec...
➡️ React DevTools & Source Code Link: www.thapatechn...
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: • ReactJS JavaScript Arr...
➡️ Fat Arrow Function in JavaScript in Hindi 2020: • ES6 Tutorial #8: Fat A...
➡️ #23: Array in React JS in Hindi | React JS Project Netflix App #2 in Hindi in 2020
➡️ Array in JavaScript in Hindi: • JavaScript Tutorial in...
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...
➡️ Install VS Code for ReactJS LINK: www.thapatechn...
➡️ Check Complete Reactjs in One video here 👇 • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechn...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter UA-cam Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechn...
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: www.facebook.c...
Guys, this is the most important topic in ReactJS✅ tho end tak dekhna n kuch doubt ho tho jarror comment krna.. me aane walo video me clear krta hu🙏
The way you explained hooks here is amazing!! I always give attention to your explanation ... keep it up
Sir please CSS files ka code provide kra do
@Thapa_Technical Can you please make a video for Global state Context and Hooks plz let me now if you will or not
@@amit0007ist {dicment} aayega -1 krna h to 😃
Mene apka ye video pora dekha hai or mene try bhi kiya hai lekin ek masla a raha hai const[count, setCount] setCount me eslint ka error a raha hai debugging error. help me please how to overcome this error.
for starting at 10 and decrement upto 0 the code is
const App=()=>{
const state=useState();
const[count,setcount]=useState(10);
const IncNum=()=>{
if(count>0){
setcount(count-1);
}
}
Brilliant.. Thapa ji aap kya samjhate ho.. really standing ovation to you.
million times better teaching style than code with harry
You have provide all the basic information about useState that every begginner needs first. Than U Sir. May Allah Bless U
I don't know why r u not famous like other tech youtubers (cwh,hitesh,sherians)🙄
BTW, ur teaching skill is awesome !!!
This channel is so underrated 😭
I love u 💕💕
@@manthanramteke6101 i love you 2
That's are those raptiels of indian community
True…..I found it very useful
@@rameshkumarmishra3188 😂😂😲
Sir, make a complete project in which use react as a front end and php as a back end , because from that beginners got the idea that how actually react is work and they get job as a beginners.
Bhai tumhari dialogue delivery khatarnaak hai . Awesome ...
Jisko react nahi bhi padhne ka man hai, wo bhi tukud-tukud dekhta rahega tumhari video ko.
Badhiya kaam kar rahe ho .
Mujhe ye youtube recommendation me aya tha video. maine bas yu hi start kiya , lekin poora dekh gya. 🤣🤣🤣🤣🤣🤣
All the best bro .. Well Done
Thanks bro jo concept kahi pr clear nahi ho ra tha wo apke channel pr aake clear ho jata hai ,keep making videos and keep helping students
Sir aapse padh kr aatma tript ho jaata hai one of the best explanation about react hooks thanku sir
Best video on hooks on the internet, explained exceptionally simpler way, I was having a lot of trouble to understand hooks but now it's really clear. Thank u so much sir keep making such kind of amazing videos 🥰🥰 Lots of love from Assam♥♥
I was just thinking to watch another video on hooks due to lack of my own understanding and then bonus section began and now my concepts are fully cleared, Way to go Thapa Bro, you are a genius 🔥
CSS : Responsive
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
background-color: #d2dbdd;
}
h1{
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 50%;
left: 50%;
font-size: 46px;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
button{
font-family: Arial, Helvetica, sans-serif;
position: absolute;
font-size: 15px;
text-transform: uppercase;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 60px;
border-radius: 4px;
font-weight: 600;
background-color: rgb(243, 103, 243);
color: white;
border-style: none;
cursor: pointer;
width: 150px;
height: 50px;
}
button:active{
color:wheat;
}
button:hover{
font-size: 20px;
background-color: rgb(255, 60, 255);
}
Thank you Bro
thank u brother
To increase by 10 just setCount(count+10);
To decrease setCount(count-1)
thank you for explaining!
import React, { useState } from "react";
import { Button, Text, View } from "react-native";
function App() {
const [count, setCount] = useState(1);
return (
{count}
setCount(count + 1)} />
setCount(count - 1)} style={{}}/>
);
}
export default App;
try this
how much u want addition or substraction just change the no.
He can change a donkey to a coder....
After watching hundreds of videos of code with harry and techgun on reactjs i love your content...
Your one video tells many thing compared to others hundreds of videos....
Edit:love you broo....
from few previous days I was practicing usestate hook but was unable to understand cycle of how it actually works you are just a blessing for learner cant say thanks in words you are amazing yar you are amazing...Thanks alot men
Aap ye jo fat arrow function ke peeche pade hain bahut sahi hai qki ye ab yaad ho gaya hai. Thank you
This was the most challenging video in this series
udmey ka course hai waha par pata nahi chala phir yaha aake is video me pata chala ki useState kese kam krta hai
@code fire yeah that's true
@code fire so you sweetched your career from non-tech to tech
meny ap sy bht kuch sikha hy React Js ka....or ye topic isi video sy smj aya aj
shukrya brother
Love from Pak ❤️❤️❤️
Vaao bhaiya maine 6 pack programmer ka video dekha kuchh samajh me nhi aaya
Then I found you I totally understand use state
Thank you ❤
the best thing is he explains anything in a way, a beginner can understand easily.
Thapa Your Teaching style is very nice here in Pakistan IT our IT students Listen and learn you , So Thanks From Pakistan .
Bhai 🙏🙏 tumhare charano ko shat shat pranam 🙏 10 din se mera dhimag kharab hua tha. You cleared it.
Honestly speaking, you are my motivation while learning Reactjs
Firstly thank you so much Sir
Really enjoyed how you explained everything. Super helpful for beginners like me. You have unique ability to make complex concept into simple and manageable.
Your dedication to teaching and helping others learn is truly inspiring. keep up the great work!
Again thank you so much sir
Your videos are very understandable
You are really a good teacher
Thank you very much for uploading such courses
setCount(count +10); //for +10
setCount(count-1); //for decrement
Thankyou so much thapa bhai aapne itni acchi knowledge free mei provide ki Thankyou once more
Watched your video for first time and it's really you explained useState concept in most efficient way. Subscribed for all your videos. Guys it will going to help you in interviews too :)
Bhai kya explain krte ho yr ♥️♥️♥️♥️♥️ maja aa gya yr bhai thanku bhai
plese create series on react native expo
***css code***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main{
width: 100%;
height: 100vh;
background-color:rgb(224, 204, 243);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1{
font-size: 4rem;
}
button{
margin: 1rem;
padding: 2rem;
width: 200px;
color: white;
background-color:rgb(177, 111, 240);
border: 3px solid white;
border-radius: 10px;
font-weight: bold;
font-size: 1.5rem;
text-transform: uppercase;
transition: all 0.2s ease;
}
button:hover{
background-color:blueviolet;
}
button:active{
background-color:rgb(177, 111, 240);
}
here is css code similar to thapa bhai..
.
.
h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
border-radius: 12px;
padding-bottom: 120px;
}
button
{
background-color: #6B78B4;
margin-top: 100px;
border: 8px solid brown;
border-radius: 12px;
font-size:xx-large ;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
outline: none;
color: white;
padding: 20px;
}
The way u r explain is Woooow, boom... amazing...I like it....best part is u r explaining in Hindi that is awesome.......pata nahi people hindi kyu explain nahi karte h other channel pe......Na samjhane walo ko achhi English aati h or n samjhne walo.....at end kisi ko kuchh gain nahi hota h..... thanks man....I have everything from ur channel and still watching........App Redux pe video banaye please..
Hello, Thapa Technical.. Your teaching skills are too good. I watched your video today only once time and today I understand to much about useState hooks. Thank you very much for your energetic effort.🙂
Best video on hooks on the internet, explained exceptionally simpler way, I was having a lot of trouble to understand hooks but now it's really clear. Thank u so much sir keep making such kind of amazing videos 🥰🥰 Lots of love from UP♥♥
I am a beginner in React js but this video is very easy to learn hooks in react js.
Thank you, bro.
Jaha humne count +1 likha hai waha count +10 kr denge to 10 se increment Ho jayege or decrement ke liye sir apn count-1 kr sakte hai to 1se decrement kr dega. Ye Sab hum setCount () ke ander he krenge. This is answer of you challenge if I wrong somewhere please correct me😊👍 and your content is awesome sir.
This is what I try to find in UA-cam
to understand...
thapa bhai best harry bhai itna clear nhhi samjhaty lekin harry yahoo baba thapa bhai best hain inshAllah ek din ap logo ki wja shye ma b software engineer ban jnaw
Mast video tha. Ekdum butter samaj aya sab kuch. Implemented on own!
superb samjhaya h saahib u r love♥
3:17 this basic example for the beginners in flutter app development
ya its the default project after running flutter create
Best explanation on hooks..👍👍👍👍👏👏👏👏👏👏👏👏👏👏
Sir last tak aate aate aap concept ko bhut jayda complicated kar de rhe ho jisse code ki functionality ko samjhna thoda mushkil ho jata h isliye meri request h ki last me ek bar code ko reconfigure kar diya kare
Thank You
That classic dialogue at 12:27 :-
"Console ko maaro goli.."
🤣🤣🤣🤣🔥🔥🔥🔥🔥
since count is a const variable than how is it's value changing.
Nice Explanation. I truly appreciate you sir..💕💕
Bhai... Apne bahut achha Explain kiya...
your explanation is perfect, May Allah bless you more strength to serve people.. keep going on
this video make my doubt clear
Thapa cleared any confusion !
best video on whole internet
maximum challenge thapa bro copy from Angela Yu from udemy which is highest rated course in Udemy . BTW it's good for the student who don't buy Angela Yu's course . keep it bro ....
Your teaching is awesome
hahaha feels good at "console ko maro goli"
You are awesome bro....
Explained it very well sir, even a beginner can understand easily. I appreciate your efforts.
8:00 ....... 3, 2, and 1 boom hahaha excitement level boosted....
Very best explaination about hooks in the internet thank you thapa sir for better understanding a react hooks
Brillent Brother explained so complex topic is such a simple way hatts off
Very nice explanation
Thanks from Pakistan
Yo Thapa.... Ur vedios are awesome... We are gaining more knowledge by watching these vedios during covid...thanks a lot🔥.can u create counterup using reactjs ?
The one who know even nothing about reactjs can even learn how to use useState from this video ..... teachingMethodology
Bhai Tu Pro Hai ❤🙌😇
Thank u for making things so easy
Very useful playlist. Thank you very much.....
Hi, Thapa.
Where is the #29 video link?
please explain the (state component ) and also make a video on CRUD... your video is very useful for me. Thankyou....sir....
Very precise and concise explanation!
Man.. You are just amazing. You cleared all my doubts 😍
awesome videos made.your teaching style very nice ..thank you so much ..if you know about angular so plz make videos on it as well.. i really need it
Bro why you didn't make a video on states props and states are the core things in react please make a separate video on it I am from Pakistan and I have already watch 32 videos from this playlist in a single day the way you explain each and everything is superb lots of love from Pakistan 💯❤️🔥
Finally found my answer that i asked in previous video
Hello Sir!
I have problem in useState:
import React, {useState} from 'react'
function App(){
var [data, dataUpdate]=useState(0);
function change(){
dataUpdate(data+1);
}
return (
{data}
change()}>Click Here
)
}
export default App
Whenever i used useState it shows me the blank page after execution
use setData insterd to updatedata
and use const casue its more reliable than var
Thank You For best Explain
Awesome Thapa Ji :)
Best explaination .... 👍👍👍
count is a constant variable and then how its getting updates in IncNum function
index.css
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #d2dbdd;
}
div{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button{
padding: 15px 20px;
background: #9b59b6;
color: white;
border : 2px solid #ecf0f1;
outline: none;
border-radius: 5px;
text-transform: uppercase;
cursor: pointer;
}
Thanks shaily
Thanks
Excellent explanation boss
Highly Recommended even in 2023
How to validate 2 input value using react hook ?
EKKKKDDDDUMMMM ZHAKAAS BHAI!!!!!
thank you bhai for this effort
Awesome video with easy explanation👏👏
Awesome Guys!!!
Hey , I am rito ............ multiple ecommerce store.............., pareshan ho gya hu iss ad se 😂
Bro aapne class components kyu nahi padhaye iss series mai?
Very well explained!
Bhai bahot sahi ❤❤❤
Great teaching
Good explanation ❤
the data type of [count, setCount] is a "const". But still we are changing its value? Is this fine? Why we don't consider it as "let"?
const variable cannot be changed.But const array can be manipulated(i.e, we can add or remove elements of array).Here [count, setCount] is an array.
@@rohitprasain Thanks for reminding me :) Confusion hogya tha mujhe bhi
For decrement :
const DecNum = () => {
if(count > 0){
setCount(count - 1);
}
else{
alert('Can not decrement below zero');
}
}
Hi, i have a query...
at 22:00 on line # 4 .. why we create const state.? we are not using this anywhere..
why we cannot use useState() directly like on line # 7
useSate ko state variable me asign kia but hamne state var ko use nai kia... ????
#28 video ke bad #29nth video ana chahiye tha. lekin ye to #30th video hai. Can you explain this brother?
Huge love and respect from Bangladesh
You are always awesome brother ❤️❤️💕☺️
Sir... I think you should somehow advertise your channel... Will be worth it.