Planning your React application

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

  • Each React component should represent a single user interface element in your web application. It should encapsulate the smallest element possible that can potentially be reused.
  • Multiple React components should be composed into a single React component. Ultimately, your entire user interface should be encapsulated in one React component.
    Planning your React application

    Diagram of our React components hierarchy

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. , we should keep as many React components stateless as possible. So only 5 out of 11 components will store the state, which are:

  • Application
  • CollectionControls
  • CollectionRenameForm
  • Stream
  • StreamTweet

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