React Drum Machine Feedback

Hey all, would love to hear your thoughts on my first completed project for the Front End Libraries certification! Build with React and Sass. Feedback specifically on the code and how it can be made better is much appreciated!

Link: https://codepen.io/nomadfox/full/JwRPqE

where’s the link? for the project.

1 Like

@Randore Thanks for the catch! https://codepen.io/nomadfox/full/JwRPqE

Hi :slight_smile:
First of all, good job :+1:
There are a few things that I found while playing with your application and reading your code.

  1. Your application does not behave well on small displays. Elements are disappearing, …
  2. You can style the volume slider itself, so it better fits the overall style of your application
    How TO - Range Sliders
  3. There are a few things in React that you could improve.
  • You should avoid adding an EventListener inside the render() method. There are lifecycle methods where you can add and remove EventListeners.
    Adding Lifecycle Methods to a Class
  • You don’t have to use Class Components for your Display and Buttons Components because they do not have a state. A Function Component would be enough.
  • Your Volume Component has a state which is not used at all. A Function Component would be enough as well.
    Function and Class Components
  • You could split your App Component into smaller ones. For example you could create a DrumPad Component. Each DrumPad could be responsible for playing its sound.
  • There are two onClick event listeners inside your .drum-pad elements. If you ‘click’ directly on the drum-pad name, no sound is being played.

I hope that I could help you :slight_smile:

1 Like

Thanks so much for taking the time to leave this feedback :grin:

I’ve dug into resolving the app’s behavior on small displays and styling the range sliders. It never crossed my mind to use functional components, but seeing you mention that really made me rethink the way I was creating components, so after styling I will go in and refactor so that those class components are functional ones.