There are two simple guidelines we need to follow when planning your React application:

We'll begin with our topmost React component, Application. It will encapsulate our entire React application, and it will have two child components: the Stream and Collection components. The Stream component will be responsible for connecting to a stream of tweets, and receiving and displaying the latest tweet. The Stream component will have two child components: StreamTweet and Header. The StreamTweet component will be responsible for displaying the latest tweet. It will be composed of the Header and Tweet components. A Header component will render a header. It will have no child components. A Tweet component will render an image from a tweet. Notice how we're planning to reuse the Header component twice already.

The Collection component will be responsible for displaying the collection controls and a list of tweets. It will have two child components: CollectionControls and TweetList. The CollectionControls will have two child components: the CollectionRenameForm component that will render a form to rename a collection, and the CollectionExportForm component that will render a form to export a collection to a service called CodePen, which is an HTML, CSS, and JavaScript playground website. You can learn more about CodePen at http://codepen.io. As you might have noticed, we'll reuse the Header and Button components in the CollectionRenameForm and CollectionControls components. Our TweetList component will render a list of tweets. Each tweet will be rendered by a Tweet component. We'll be reusing the Header component once again in our Collection component. In fact, in total, we'll be reusing the Header component five times. That's a win for us. As we discussed in the previous chapter, we should keep as many React components stateless as possible. So only 5 out of 11 components will store the state, which are:

Now that we have a plan, we can start implementing it.