ReactJS MP3 Player to demonstrate React App Performance with shouldComponentUpdate lifecycle method

So you are getting into ReactJS app development and find that the lifecycle methods are probably the most challenging to learn. Me too. I just keep creating ReactJS apps and have gotten much better at the lifecycle methods.

I am getting ready to upload an entire course on how to create a MP3 player out of ReactJS, so feel free to subscribe to get notified when the course is available.

My simple MP3 Player in ReactJS is the perfect exercise to learn the lifecycle method of shouldComponentUpdate as it demonstrates when to render and re-render a child component. In this MP3 player, the Soundwave component only re-renders when the user clicks on the Play button, Stop button, or any of the buttons for the various MP3s.

The shouldComponentUpdate lifecycle method only returns true if the user clicks the Pause button from a song playing or vice versa, when the player is paused and we start playing a song either by pressing the Play button or any of the blue buttons to start the song.

Here, we look two CSS classes that either show visibility:visible or visibility:hidden as well as a CSS3 animation property that mimics a classic HTML Marquee tag to animate the MP3 artist and MP3 title. This entire application is also built in HTML5 and looks great on mobile devices as well.

[johnwhite]

Hi Bruce. It is an interesting tutorial for me. Thanks a lot. Could you please advise how to add function/method to use a microphone to measure a sound/noise, e.g. in dB. Thank you in advance.