React Tutorial for Beginners - Coding a Piano with ReactJS (Full Course)

== [ Description ] == I'm Suboptimal (software) Engineer and, in this video, I go over how to code a Piano in ReactJS. This tutorial is aimed at those that want to learn React and have some very basic web development skills. Full disclaimer, this is my first time working with React so feel free to roast me down in the comments section below!

== [ Links ] == React Piano Code: https://github.com/SuboptimalEng/CodeReviews Helpful React Intro Video: https://www.youtube.com/watch?v=9NQtG_IIh6M Web Dev Simplified JavaScript Piano : https://github.com/WebDevSimplified/JavaScript-Piano

== [ Socials ] == Twitter: https://twitter.com/SuboptimalEng GitHub: https://github.com/SuboptimalEng YouTube: https://youtube.com/SuboptimalEng

== [ Timestamps ] == 00:00 Piano Demo 00:14 Intro 01:33 Tech Architecture: Key Component 03:09 Tech Architecture: Piano Component 03:56 Setup React Project 04:18 React UI: Piano Component 06:11 React UI: Key Component 07:14 React UI: CSS Styling 08:43 React UI: Base Piano 09:53 React UI: Refactor Code 11:43 React UI: Black/White Keys 14:06 React UI: Key Press 17:16 Interactive Piano: Setup 18:11 Interactive Piano: KeyDown Listener 20:00 Interactive Piano: KeyUp Listener 20:56 Interactive Piano: Example 21:19 Interactive Piano: Audio Files 21:46 Interactive Piano: Play Music 24:10 Fin 24:30 Pianist

== [ Tags ] == #suboptimal #software #engineer