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!
where’s the link? for the project.
1 Like
Hi
First of all, good job
There are a few things that I found while playing with your application and reading your code.
- Your application does not behave well on small displays. Elements are disappearing, …
- You can style the volume slider itself, so it better fits the overall style of your application
How TO - Range Sliders - 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
andButtons
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 aDrumPad
Component. EachDrumPad
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
1 Like
Thanks so much for taking the time to leave this feedback
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.