Increasing reusability with React container components

[00:00] Container components, or as they're sometimes called, smart components, are a great way to increase some of the reusability aspects of an application. To demonstrate that, we've got a simple application here that just lists out 10 users here, first name and last name. We'll look at the code that is running that.

[00:21] We've got React imported, and then we're importing our Person List component, and just rendering our component to the document body. If we look at our Person List component, we are importing both React and React's component property, as well as jQuery, and so our Person List Extends component.

[00:43] We initialize our state to be an object that just has a People array that is empty, and in our component dead mount, we use jQuery's AJAX method to go and grab this list of users from this API. We want JSAN data back, and when it comes back, we're going to call Sets Date, and set that People array to the results, with just a little bit of mapping here to simplify things.

[01:12] In our Render Method, we just create an unordered list, and then we map that People array and call the Render Person function for each one of those that just returns our list item. We've got a key set up using this SHAW 1 property, and then we just put the name.first and name.last properties inside that list element.

[01:34] The last thing we do is export that Person List component, and that's all we've got in place, Just to show that this is in fact live reloading. We can update the text here and you can see that that does work.

[01:50] This is great, but it's not very re-usable, because our Person List knows exactly where to go get its data from, and how to manipulate that data and then render that data. You're not going to be able to port that very easily.

[02:06] To fix that, we're going to create a Person List container component, and what we're going to do in this person list container, we're going to keep the constructor, we're going to keep the component dead mount. Nothing in there is going to change, but in the Render Method, we are actually going to render our Person List component that we had been working with directly.

[02:30] Let's go ahead and import that Person List component, and remember this is our existing component, and now that we have that reference to it, we can get rid of this Render Person method. We don't need that.

[02:41] Let's go ahead and update our class name and our export before we forget. Then in our Render Method, we're just going to render our Person List component, but we're going to populate its People Prop with our state.people property that we have populated above in the AJAX call.

[03:00] Now, let's go back into the Person List component, and see how we can simplify this. We can actually entirely get rid of the constructor and the component dead mount. Since that stuff is all handled by the container now, and instead of reading from State, we're going to read from Props.

[03:17] Now we've got a component that does nothing but read from Props and render them. If we go back to our App file and update these references so that our App is going to render the Person List Container component, and we go restart that. You can see that everything is still working just as it was before, the functionality is the same.

[03:38] We now have a container component that is just a state container that knows how to go and fetch data, store it, map it, however it needs to, and then it renders our re-usable Person List component. Our Person List component is a lot more re-usable, because it has no external dependencies.

[03:59] We can get rid of this jQuery import entirely, but our Person List component does nothing but read the People property that it's given from outside, and then render these things. The only requirements that this component has is that the objects it receives in its People array have SHAW 1 properties, and name.first and name.last properties.

[04:26] Other than that, it's entirely generic, and it's just going to render whatever list it's given in that People property.