Drum Machine | React, jQuery, Sass. Need Feedback

Hi all.
I just finished my Drum Machine project. I would appreciate any feedback.

For this project, I used:

  • SCSS
  • React, ReactDom
  • jQuery.

Here is my Drum Machine

I would appreciate any feedback.
Plus: how to allow the user to record and re-listen to the music they create?
Thanks in advance :smiley:

Looks good and works well.

One thing I’d change though it the ‘active’ styling of the buttons. They looked the wrong way around at the moment. Adding the border/drop-shadow when active makes it look as if the button is rising up rather than being pressed down. You could look to reverse that, keep a bottom-border by default and then removed when active

1 Like

Yes, you’re right, it will be more realistic that way. I’ll do this.
Thank you :smiley:

I find the use of both JQuery an React for this project a bit redundant, especially considering that the usage you have for jquery is pretty “basic” DOM manipulation.

Consider this example:

      volume: e.target.value
$("#display").text("Volume: "+ Math.round(e.target.value * 100));

What you are doing is calling a function to manipulate a text after a user perform an action.
Well, React already performs a re-render of the page after a change, so you are performing two action when it could have been simply achieved with some JSX:

(I’m making it short just to illustrate my point)
If you wanted to “update” the text with the new value a simple

<p>Volume: {this.state.volume} </p>

Would do the trick, letting React taking care of the updating process instead of having you imperatively call function to update the UI, which at the end of the day is what React is all about

Nonetheless a very good job :sparkle::clap::+1:


Thank you for your feedback I do really appreciate it :smile:

Actually you’re right, I know I didn’t need to use jQuery. specially as you said its usage was for basic DOM manipulation. But I just used it to practice jQuery not because I need it. and I did use it not just for this project also for other front end libraries projects … just for practicing and to get used to it.

And for this…Idk but I think I can’t just simply put the js code in JSX like so, as this will make the <p></p> tag only displays the volume value or whatever I put there… I needed to display volume and other messages in the same tag e.g “power is off”.
If I want to follow your way in updating the <p>… it’would be better to create a state property for the <p> then using the code you suggested for example:

 display: "lorem ispum"
<p> volume: {this.state.display} </p>

Then I will need functions again to update the display state with different message types.
If you have a better idea or I did not understand your idea from the beginning, please explain

Thank you again

The easiest and most straightforward implementation is to have in a common parent a state with the message to display, and its updater.

Like in this example i’ve put together

In case you need more advanced functionality you can have your display component accept a render prop function, but for a case like this I don’t think it’s worth the hassle.

Hope it helps :+1:

1 Like

Yeah, it’s a good example.
Thanks for this good note :smile:

1 Like