Скачать или смотреть 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.

What happens in the Soundwave ReactJS child component is that it only renders when the parent component sends it a cssClass prop of either soundwave or soundwave-hidden. If they are the same, then this component does NOT re-render and we don't want it to since it will remain either on or off. However, if we pass a CSS class properties that is different from the parent component, we re-render the component and the Soundwave turns on or off. We actually see the re-rendering happening in the Google Chrome console.log under developer tools.

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.