Now I have my MusicPlayer app, with its two child container components, SongCatalog and YourPlaylist. The last component on my list is SongCard. SongCard is good example of reusable component — both the SongCatalog and YourPlaylist components will call on SongCard. However, how SongCard looks and behaves could be totally different depending on the container.
I think of SongCard as being like a template for a form letter. The basic template is always the same, but the data is different for each individual letter. …
In Part One, I created the top-level MusicPlayer component for a sample app that will demonstrate how to design basic playlist functionality.
MusicPlayer’s render function includes two child components: SongCatalog and YourPlaylist. Since both of these components will eventually contain SongCards, I think of them as “container components”. In this post, I will demonstrate how to set up each of these containers.
I will start with my SongCatalog container, which will have two functions
When I was first learning React, I was impressed by the power and speed of the framework, but it took time for me to really grasp how the different components worked together. In particular, I struggled to understand how a single React component could have different behavior depending on its container.
In order to illustrate how reusable components work together in React, I have created a sample app for a music player that lets users create their own playlists. Over the course of three posts, I will use this app to demonstrate how to:
Software Developer | Data Analyst | Work in Progress