React useState() hook introduction 🎣

Поділитися
Вставка
  • Опубліковано 22 січ 2025

КОМЕНТАРІ • 49

  • @BroCodez
    @BroCodez  Рік тому +12

    // 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
      @Soap029 Рік тому

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

    • @Cosmos_the_stardust
      @Cosmos_the_stardust Рік тому

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

    • @nesa6582
      @nesa6582 6 місяців тому

      Brocode, do all react hooks please. I like your style of teaching the most. :D

    • @AdanJelle-wt4zu
      @AdanJelle-wt4zu 6 місяців тому

      man thank you so much

  • @abzz1290
    @abzz1290 Рік тому +7

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

  • @shamsul262
    @shamsul262 Місяць тому

    Search for a tutorial again and again. At last, find a clear concept and clear loud voice tutorial. Thanks bro.

  • @Bettereveryday-m9z
    @Bettereveryday-m9z 4 місяці тому +1

    You have added a brick to my React journey. especially that of understanding react hooks. bless you

  • @sumathimunusamy3534
    @sumathimunusamy3534 Місяць тому

    This is a masterpiece.. I searched so many videos about usestate hooks .. Explanation is on point. Thanks alot you saved me ❤🛐

  • @markgesaka8836
    @markgesaka8836 11 місяців тому +16

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

  • @jkbullitt8986
    @jkbullitt8986 Рік тому

    Superior tutorial. Crisp, Clear, and Concise🔥

  • @Techbizhustle
    @Techbizhustle Рік тому

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

  • @tee-hee9553
    @tee-hee9553 Рік тому +1

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

  • @theycallmepyro1014
    @theycallmepyro1014 8 місяців тому

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

  • @amit-jx5lh
    @amit-jx5lh 2 місяці тому

    Thanks a lot dude. You explained this topic really well. I'm feeling proud of myself that I could build whatever you taught on my own.
    Keep it up❤❤❤❤❤❤❤❤

  • @janlim9374
    @janlim9374 7 місяців тому +1

    You are very good at explaining concepts

  • @Bidisa_Kalita_
    @Bidisa_Kalita_ Рік тому +1

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

  • @michagwizdek5612
    @michagwizdek5612 7 місяців тому +1

    Thank you! simple, yet awesome.

  • @vishnuvardhan2687
    @vishnuvardhan2687 3 місяці тому

    Excellent 👌 work keep doing 👏👏 lectures on React js 😊😊😊

  • @adhyatmikajeev
    @adhyatmikajeev Місяць тому

    very helpful. Thankyou ! got the concept of useState ().

  • @ndasura1587
    @ndasura1587 7 місяців тому

    Yes you are gigachad of reactjs thank you sir 🙏🙏

  • @yohannkallyl
    @yohannkallyl 3 місяці тому

    thanks for the lesson. Hugs from Brazil

  • @xzex2609
    @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

  • @ahmedmamun6832
    @ahmedmamun6832 Рік тому

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

  • @Jishanthegodev
    @Jishanthegodev Рік тому

    Finally, I understood useState hook

  • @privateuser047
    @privateuser047 10 місяців тому

    Thanks, man, you nailed it.

  • @nihongo_
    @nihongo_ Рік тому

    keep doing what u doing 👍

  • @I_am_Ragupathi
    @I_am_Ragupathi Рік тому

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

  • @nemesisxl6736
    @nemesisxl6736 Рік тому

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

  • @saurabhmhatre5574
    @saurabhmhatre5574 11 місяців тому

    Loved it!!

  • @tonytodd7011
    @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
      @nemesisxl6736 Рік тому +1

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

  • @abdelrahmanismail7726
    @abdelrahmanismail7726 3 місяці тому

    The goat as always

  • @eshuvlogs7981
    @eshuvlogs7981 11 місяців тому

    ❤❤❤ THANK YOU

  • @otabekmadaminov-z2i
    @otabekmadaminov-z2i 4 місяці тому

    Thank you bro

  • @MustaphaSabri-jw6ds
    @MustaphaSabri-jw6ds 7 місяців тому

    👏👏

  • @TahaZolfi
    @TahaZolfi Рік тому

    cant wait to watch django tuturial from bro 😀

    • @TahaZolfi
      @TahaZolfi Рік тому

      anything is better if bro teaches @@shining_cross

  • @MoreRealMxnny
    @MoreRealMxnny Рік тому

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

  • @mememagnet8807
    @mememagnet8807 Місяць тому

    Gold

  • @kathikr9360
    @kathikr9360 10 місяців тому

    thanks man

  • @vladyslav-py-js-go
    @vladyslav-py-js-go Рік тому

    more i need more react 😁😁😁

  • @manideepak1492
    @manideepak1492 11 місяців тому

    Bro Plz do a React Native tutorial

  • @hockeyme3113
    @hockeyme3113 4 місяці тому

    Can you make a tutorial on redux pls?

  • @crackrokmccaib
    @crackrokmccaib Рік тому

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

    • @Baryon-ms1co
      @Baryon-ms1co Рік тому

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

  • @epixor_ed
    @epixor_ed Рік тому

    Kotlin Language Tutorials Please Bro Code

  • @Bravin_Joshua
    @Bravin_Joshua Рік тому

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