The idea of components in React is to have each component deal with a single task or UI element. We should try to make components as fine-grained as possible, in order to be able to reuse code. If we find ourselves copying and pasting code from one component to another, it might be a good idea to create a new component, and reuse it in multiple other components.

Usually, when developing software, we start with a UI mock-up. For our blog application, a mock-up would look as follows:

When splitting components, we use the single responsibility principle, which states that every module should have responsibility over a single encapsulated part of the functionality.

In this mock-up, we can draw boxes around each component and subcomponent, and give them names. Keep in mind that each component should have exactly one responsibility. We start with the fundamental components that make up this app:

We defined a Logout component for the logout feature, a CreatePost component, which contains the form to create a new post, and a Post component to display the actual posts.

Now that we have defined our fundamental components, we are going to look at which components logically belong together, thereby forming a group. To do so, we now define the container components, which we need in order to group the components together:

We defined a PostList component in order to group posts together, then a UserBar component in order to deal with login/logout and registration. Finally, we defined an App component in order to group everything together, and define the structure of our app.

Now that we are done with structuring our React project, we can move on to implementing the static components.