React useState() hook introduction 🎣

#reactjs #course #tutorial
00:00:00 introduction
00:01:10 setup
00:01:57 import useState
00:02:25 update a string
00:05:38 initial state
00:05:58 increment a number
00:07:29 toggle a boolean
00:09:24 Counter program
00:13:14 Counter CSS
00:16:03 conclusion
// React hook = Special function that allows functional components
// to use React features without writing class components
// (useState, useEffect, useContext, useReducer, and more...)
// useState() = A React hook that allows the creation of a stateful variable
// AND a setter function to update its value in the Virtual DOM.
// [name, setName]

[@BroCodez]

// React hook = Special function that allows functional components
// to use React features without writing class components
// (useState, useEffect, useContext, useReducer, and more...)
// useState() = A React hook that allows the creation of a stateful variable
// AND a setter function to update its value in the Virtual DOM.
// [name, setName]
import MyComponent from './MyComponent.jsx'
import Counter from './Counter.jsx'
function App() {
return();
}
export default App
import React, {useState} from 'react';
function MyComponent(){
const [name, setName] = useState("Guest");
const [age, setAge] = useState(0);
const [isEmployed, setIsEmployed] = useState(false);

const updateName = () => {
setName("Spongebob");
}
const incrementAge = () => {
setAge(age + 1);
}
const toggleEmployedStatus = () => {
setIsEmployed(!isEmployed);
}
return(
Name: {name}
Set Name
Age: {age}
Increment Age
Is employed: {isEmployed ? "Yes" : "No"}
Toggle Status
);
}
export default MyComponent
import React, {useState} from 'react';
function Counter(){
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
}
const decrement = () => {
setCount(count - 1);
}
const reset = () => {
setCount(0);
}
return(
{count}
Decrement
Reset
Increment
);
}
export default Counter
.counter-container{
text-align: center;
font-family: Arial, sans-serif;
}
.count-display{
font-size: 10em;
margin-top: 0;
margin-bottom: 50px;
}
.counter-button{
width: 150px;
height: 50px;
font-size: 1.5em;
font-weight: bold;
margin: 0px 5px;
background-color: hsl(197, 100%, 58%);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.counter-button:hover{
background-color: hsl(197, 100%, 48%);
}

[@Soap029]

Tried using your c sharp programming tutorial. It did help . Btw are u s software developer?

[@Cosmos_the_stardust]

Please Upload more React videos. If possible, it will help me a lot.

[@markgesaka8836]

He's intelligent than ChatGPT...He explains everything in a way that is easy to understand!

[@abzz1290]

16:32 minutes of pure fun, clear, and understandable knowledge. thanks, bro

[@Chrisalex_]

Thank you! Completing your course was exceptional; your teaching stands out

[@janlim9374]

You are very good at explaining concepts

[@theycallmepyro1014]

Thanks, you explained this really clearly and helped me get over the hump when first learning about useState.

[@jkbullitt8986]

Superior tutorial. Crisp, Clear, and Concise🔥

[@michagwizdek5612]

Thank you! simple, yet awesome.

[@Bidisa_Kalita_]

please upload other react topics asap, this is the best playlist🤠

[@tee-hee9553]

The more I learn react The more I kind of feel fun I mean entertain from your video haha that was fun

[@ahmedmamun6832]

Thank you Bro. It's very much easy and helpful after watching the video

[@privatesoul]

Thanks, man, you nailed it.

[@xzex2609]

Bro is exceptional , the best teacher I had . I wish that he had a Django course too . unfortunately even though he is great at python , but he prefers JS for web development may be he teach some back end development on python

[@saurabhmhatre5574]

Loved it!!

[@nemesisxl6736]

Thank you Bro for your simple and great React lesson, as always! Could you please speed up your React lessons? Thank you again!

[@eshuvlogs7981]

❤❤❤ THANK YOU

[@Yesterday_i_ate_rat]

Finally, I understood useState hook

[@nihongo_]

keep doing what u doing 👍

[@kathikr9360]

thanks man

[@I_am_Ragupathi]

come on come on...dude...!!!!!! you are always awesome

[@MustaphaSabri-jw6ds]

👏👏

[@MoreRealMxnny]

will this be full course soon? Thanks again for this !

[@volodyslove]

more i need more react 😁😁😁

[@kingcat4708]

cant wait to watch django tuturial from bro 😀

[@kingcat4708]

anything is better if bro teaches @@doublekamui

[@manideepak1492]

Bro Plz do a React Native tutorial

[@epixor_ed]

Kotlin Language Tutorials Please Bro Code

[@crackrokmccaib]

Is it just me, or does your voice sound different?

[@Baryon-ms1co]

It's the same, one thing there's no background noises as usual

[@bravin_w]

Where did captain hook buy his hook?
A second hand store 😂

[@tonytodd7011]

Thank you Bro for your simple and great React lesson, as always! Could you please speed up your React lessons? Thank you again!

[@nemesisxl6736]

Agreed, I just started learning React and I want more content D: