How To Create A Simple React Clone With Hooks

Поделиться
HTML-код
  • Опубликовано: 24 окт 2024

Комментарии • 67

  • @Danhosaur
    @Danhosaur 3 года назад +14

    I've been enthusiastic about learnig React for 2 weeks now, and so watching you explain the concept of each hook and essentially going behind the covers to show what the hooks actually do, has really helped my understanding for the React hooks.
    Great video, Kyle, and I really hope you continue this as a small series, because I would personally love to get a much better understanding for each individual hook in React.js.

  • @jenstornell
    @jenstornell 3 года назад +82

    From imposter syndrome to be confident enough to build your own React. That's a huge step! 😅

  • @sid99varma
    @sid99varma 3 года назад +9

    This is something I have always wanted for ages! Thanks a ton :)

  • @manik3987
    @manik3987 2 года назад +1

    Kyle , You really simplified it. The name of ur channel suits 100%.

  • @JoshAdamous
    @JoshAdamous 3 года назад +1

    Okay, so despite your videos being packed full of useful knowledge and tips - one of my favorite parts is that sweet guitar riff after the intro! Freakin gold man!!

    • @vincentjohnflorio
      @vincentjohnflorio 3 года назад +1

      It's instant recognizability. It's like having a theme song. Gets my hyped because only his videos start exactly that way.

  • @centralbiz5974
    @centralbiz5974 3 года назад

    I didn´t even know that was possible ... amazing, congrats

  • @and-ant984
    @and-ant984 3 года назад

    sheesh dude i was looking at react's framework today, your video came at a good time

  • @BobFrTube
    @BobFrTube 3 года назад +3

    Thanks for the example it's a great way to learn.
    I would've found it far easier if the example used TypeScript which would've been the equivalent of having an assistant who explained the shape objects like the cache. Especially when such terms of semantic loading. At some point, for my own clarify, I'll convert the example of use classes instead of having to repeatedly create closures.

    • @BobFrTube
      @BobFrTube 3 года назад

      As an exercise for my own understanding, I did the version using TypeScript and classes.

    • @dimitargetsov9690
      @dimitargetsov9690 3 года назад

      @Bob Frankston,
      If i am not wrong (correct me if i am) ,React engineers had used closures to create the
      hooks.Also, in Mr. Cook`s way the code looks (sounds) more " vanila" JS , which, i think, is
      better.

    • @BobFrTube
      @BobFrTube 3 года назад +1

      @@dimitargetsov9690 I can't comment on the React code itself. It may indeed be written that way. As the JS, I see TS annotation which can help with understanding. The expressiveness and the use of classes allows the TS version to be half the length.
      Part of this is an allergic reaction to global variables and order-dependence.

  • @italktocomputers1901
    @italktocomputers1901 3 года назад

    this should be a required exercise for all react beginners

  • @kushalupreti509
    @kushalupreti509 3 года назад

    My man has ascended

  • @jacomohodnik7161
    @jacomohodnik7161 3 года назад +1

    Another amazing, eye opener video!
    Keep up the good work!!

  • @samerkayali4525
    @samerkayali4525 3 года назад

    I was looking for this for a long time! Thanks a lot!

  • @OleksandrDanylchenko2k
    @OleksandrDanylchenko2k 3 года назад +1

    Wow! Thanks for your extreme commitment!

  • @ariffaysal9458
    @ariffaysal9458 3 года назад +1

    wow, this is like a Hidden Treasure 🔥💙 big thanks!

  • @sambhavsaraswat5585
    @sambhavsaraswat5585 3 года назад

    I knew this would come some day

  • @zaabimahdi
    @zaabimahdi 3 года назад +3

    @Kyle:
    Hey Kyle! thank you for this! please next time, try to clone, react render with jsx, and how the virtual object Model update the acual DOM.
    Thanks...

  • @deepak8586
    @deepak8586 3 года назад

    Now you are the BOSS!!

  • @innoventstack
    @innoventstack 3 года назад

    You are awesome dude kindly ceate a video on advance typescript

  • @peryMimon
    @peryMimon 2 года назад

    How do you jump from point to point when you write? it seems like your cursor locate all the time in the place you need it 😯

  • @pkmkb_0
    @pkmkb_0 3 года назад

    you are really an artist !

  • @brianevans4
    @brianevans4 3 года назад

    Really interesting. I've always wondered about how useState is implemented

  • @joelmason6818
    @joelmason6818 3 года назад

    I wanted to create my own state manager to use instead of the context api or redux and this is the ticket. Beingbthat you aren't specifically using jsx is actually a benefit for that purpose since a state manager isn't concerned with jsx specifically. Kyle, you are absolutely brilliant and I'd love to work with you on a project. I actually have a project in mind. If you're interested at all, throw me an email. Once you find out what it is, I have no doubt you'll be interested. A loose hint: a react app that has a built in window manager. 😃

  • @esmaeeilenani2005
    @esmaeeilenani2005 3 года назад

    can you make a video on HOC (higher-order component)

  • @maximtheconqueror
    @maximtheconqueror 3 года назад +1

    This guy is fancy

  • @donnyroufs551
    @donnyroufs551 3 года назад +1

    Next video: refactor with typescript and solid principles :)

  • @anouaroumaacha836
    @anouaroumaacha836 3 года назад

    you're awesome, i love such topics

  • @vemoz2878
    @vemoz2878 3 года назад

    Nice video as always Kyle , Could you make a video on whether Ai is going to replace programmers.

    • @kemal_ozturk
      @kemal_ozturk 3 года назад +1

      I don't know if he will ever do that as a whole video but I recall him talking about it somewhere, I couldn't find the link tho. I suggest checking out his AI autocomplete videos. Basically, AI might get to a point where the tools we use are so advanced that we won't have to type low level code. This applies to any industry, as technology and AI improves, the role of humans shift more towards quality assurance, supervision, overseeing, etc. rather than doing the task directly.

    • @kyanleong8014
      @kyanleong8014 3 года назад

      No, because programmers make the AI.

  • @nilufayeasmin3805
    @nilufayeasmin3805 3 года назад +1

    Let's make tutorial on Angular.

  • @BijanProgrammer
    @BijanProgrammer 3 года назад

    It was awesome. Thanks.

  • @Kel-c8p
    @Kel-c8p 5 месяцев назад

    Could someone tell me please, does this clone works like the real React? I really want to learn React better and i am wondering if this video helps me really understand React ?

  • @serjio8781
    @serjio8781 3 года назад

    Can you build your own css but better?????

  • @petazeta76
    @petazeta76 3 года назад

    And this is just front-end!!

  • @kumarvishalben
    @kumarvishalben 3 года назад

    Use preact
    #3kb alternative for react, with same API.✌️

  • @IshanKesharwani
    @IshanKesharwani 3 года назад

    The day has come what we all predicted

  • @ItachiUchiha-fo9zg
    @ItachiUchiha-fo9zg 3 года назад +1

    noobs: build apps using react
    kyle: builds react itself

  • @ravikant4692
    @ravikant4692 3 года назад +2

    Next video "how to make your own world 🌎"

  • @I-just-hold-white-paper-up
    @I-just-hold-white-paper-up 3 года назад

    may I ask the server you use, live server cannot handle module type of script

  • @ninjaasmoke
    @ninjaasmoke 3 года назад

    Next up on "build your own" series...
    Build your own web development language

  • @תומרקיסר
    @תומרקיסר 2 года назад

    Genius

  • @0xPanda1
    @0xPanda1 3 года назад

    Cool ur are the best

  • @YuriiKratser
    @YuriiKratser 3 года назад

    I like it but it's complex. I wish I was able to work it out.

  • @krissh_the_dev
    @krissh_the_dev 3 года назад

    Hey Kyle, nothing is visible to my eyes. The font is so tiny. Please increase the font size in your next video.

  • @miniappletheapple
    @miniappletheapple 3 года назад

    next video,a simple vue clone

  • @d.suchethanrao9349
    @d.suchethanrao9349 3 года назад +3

    Next project : how to make a simple human clone with react hooks

  • @awekeningbro1207
    @awekeningbro1207 2 года назад

    15:32 can anyone tell me how a settimout function here is running every second as like a setinterval function? Shouldn't it run just once?

    • @dimitargetsov9690
      @dimitargetsov9690 2 года назад +1

      Within function Component() there is setTimeout() .setTimeout() is calling setCount(). setCount() calls render().render() calls Component().That makes that loop.

  • @ruturaajdeshpande1079
    @ruturaajdeshpande1079 3 года назад

    Cool 😎 dude

  • @hadipawar2539
    @hadipawar2539 3 года назад

    “What sorcery is this?”

  • @shanmukhapothukuchi409
    @shanmukhapothukuchi409 3 года назад

    wohooo! I love this.

  • @cabanford
    @cabanford 3 года назад

    The Google auto text just told me: "how to build your own react colon". Chuckle 🙈

  • @Simple_Simon_UK
    @Simple_Simon_UK 3 года назад

    Do you need React now that you’ve written your own?

  • @yelizyeldaataman2709
    @yelizyeldaataman2709 3 года назад

    saçlarına kurban olduğum

  • @vladosononame6376
    @vladosononame6376 3 года назад

    How to make custom react router?))

  • @zlackbiro
    @zlackbiro 3 года назад

    Kyle, You will die learning JavaScript... LoL...

  • @shaineelnayak3465
    @shaineelnayak3465 3 года назад

    Dont learn react insted create one😅

  • @maacpiash
    @maacpiash 3 года назад

    FIRST! ✊🏽

  • @Hardeepsingh-ch4rm
    @Hardeepsingh-ch4rm 3 года назад

    Third

  • @technicalfriend15
    @technicalfriend15 3 года назад

    Seventh

  • @Ameersoccerdev
    @Ameersoccerdev 3 года назад

    Kindly make react firebase friend request social media app