How to Code a Piano App with React JS

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

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

  • @SuboptimalEng
    @SuboptimalEng  4 года назад +5

    Follow me over on Twitter to get the latest updates! twitter.com/SuboptimalEng

  • @RahulPandeyrkp
    @RahulPandeyrkp 4 года назад +4

    Really creative, love how engaging this is from the visual and audio perspective!

    • @SuboptimalEng
      @SuboptimalEng  4 года назад +1

      I really prefer this “Code Review” style over live coding - would definitely recommend giving it a try 😎

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

    This is probably the best tutorial I've ever seen here in youtube.
    It's step by step and very easy to understand.
    I also like the tech Architecture...
    And I also like image by image codes.
    Basically I like everything.
    Thank you very much, I want more of this! :D

  • @sainathsingineedi2922
    @sainathsingineedi2922 4 года назад +6

    Thanks for including the architecture section too

    • @SuboptimalEng
      @SuboptimalEng  4 года назад +2

      Ay, glad you liked that part! I was unsure whether or not to include it.

    • @sainathsingineedi2922
      @sainathsingineedi2922 4 года назад +2

      @@SuboptimalEng any plans on live coding by the way

    • @SuboptimalEng
      @SuboptimalEng  4 года назад +1

      I do want to make longer-form tutorials (sprinkled in with developer productivity videos), but I’m not sure if doing a live-coding stream would help programmers learn as much as a “Code Review” like this one 🤔

    • @sainathsingineedi2922
      @sainathsingineedi2922 4 года назад +1

      @@SuboptimalEng It helps for sure 😁. Live coding in twitch for example has seperate fan base. Both are good

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

      @@SuboptimalEng finally it happened today after 7 months

  • @flibben
    @flibben 4 года назад +2

    Like the approach you did here, gave a thumbs up, subscribed, and will probably get back and watch later when I'm not so tired :)

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

    I honestly like this new way of showing how the code works. All the tutorials dont have a visual showcase of the code for frameworks like react and django. nice work man!

  • @albin1568
    @albin1568 4 года назад +2

    Will watch this tomorrow morning and give u some tips. I also like this approach better because it respects the viewers time and increases quality. Cheers

    • @SuboptimalEng
      @SuboptimalEng  4 года назад

      That was one of my main goals - to give viewers the most educational value in the least amount time 🙏

  • @pvmusic1
    @pvmusic1 10 месяцев назад

    An excellent presentation that made it possible for those without any coding experience, like me, to learn, to be excited, and to desire to take up the challenge of making my own piano app. Thank you.

    • @SuboptimalEng
      @SuboptimalEng  10 месяцев назад

      Thanks! I spent a lot of time making this video and I'm glad it was able to help.

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

    awesome video! I find it really hard to find projects I want to do but this looks really fun!

  • @dannemp
    @dannemp 4 года назад +2

    Nice tutorial, you should look into functional components and hooks, makes the code easier to write and understand once you get the key concepts.

    • @SuboptimalEng
      @SuboptimalEng  4 года назад

      Thanks dannemp - appreciate the feedback!

  • @aveonhx
    @aveonhx 4 года назад +1

    Awesome video, really loved the way you described the component tree and structure!!
    Thanks for posting on r/reactjs

  • @taradavies3497
    @taradavies3497 4 года назад +1

    how might you make the keys pressable on the keyboard, but also clickable with a mouse?

    • @SuboptimalEng
      @SuboptimalEng  4 года назад +2

      Good question! I haven’t put much thought into this feature.
      At first glance, I’d probably accomplish this by using some combination of ‘mouseenter’ and ‘mousedown’.

  • @MagicTheKrakening
    @MagicTheKrakening Год назад

    Why not use b for flat?

  • @sridharkatta3461
    @sridharkatta3461 4 года назад +1

    In the modern react 17 we don't need to import react from react at the top of every component.

    • @SuboptimalEng
      @SuboptimalEng  4 года назад

      Oh interesting, I did not know that. Will keep it in mind for next time 🤓

  • @nafeesnazik1751
    @nafeesnazik1751 4 года назад +1

    Love from 🇱🇰

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

    I'm really far away from being a react expert, but do you really make these variable definitions in the a class based component like this. let keyClassName = "key"; let key; putting the JSX code into the key variable?? It's just a question!!

  • @信者の男
    @信者の男 3 года назад

    i liked this video, who knows someday i will give vue a try

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

    Great tutorial! I really love the format. I noticed that the last key pressed stays lit in the demo: is this a bug with the keyuphandler? I believe pressedKeys: state.pressedKeys.splice(index, 1) will set pressedKeys to the element that you are trying to delete. Changing the line to pressedKeys: state.pressedKeys.filter((_, i) => i !== index) might fix this. Nice work again!

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

      Glad you liked the format!
      I do believe there were a few bugs I never fixed in this tutorial.

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

      Or if you change the deleteCount value, for example changing the 1 to a 0 at the end of the statement, it will work!

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

    The idea how to build up the notes are more ore less "OK", why do you not build up proper notes objects in advance? Then you can easily check if the note is "flat" or "natural"? Before you write a noteIsFlat()-function?

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

      I agree, the architecture isn’t optimal - I was just trying to get familiar with react 🤓

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

    this video made me to subscribe to your channel.

  • @evolutionxbox
    @evolutionxbox 4 года назад +2

    I challenge you in your next video to never use the words "just" or "basically"

    • @SuboptimalEng
      @SuboptimalEng  4 года назад +1

      You should hear the unedited audio, it has way dozens of "ummms" and "uhhhs" 😶

    • @SuboptimalEng
      @SuboptimalEng  4 года назад

      Speaking unscripted is not my "forte", but I'll give it a shot

    • @evolutionxbox
      @evolutionxbox 4 года назад +1

      @@SuboptimalEng you've got a great video, and I think this kind of limitation will really help