In this Guide you learn how to plan your React application and create composable React components. Let’s begin.

Solving a problem using React

Before you start writing code for your web application, you need to think about the problems that your web application is going to solve. It’s very important to understand that defining the problem as clearly and as early as possible is the most important step toward a successful solution—a useful web application. If you fail to define your problem early in your development process, or you define it inaccurately, then later on you’ll have to stop, rethink about what you’re doing, throw away a piece of the code that you have already written, and write a new one. This is a wasteful approach, and as a professional software developer your time is very valuable, not only to you but also to your organization, so it’s in your best interests to invest it wisely. Earlier in this book, I stressed on the fact that one of the benefits of using React is code reuse, which means that you’ll be able to do more in less time. However, before we take a look at the React code, let’s first discuss the problem, keeping React in mind.

We’ll be building Snapterest—a web application that receives tweets from a Snapkite Engine server in a real-time manner and displays them one at a time to a user. We don’t actually know when Snapterest will receive a new tweet, but when it does, it will display that new tweet for at least 1.5 seconds so that the user has enough time to take a look at it and click on it. Clicking on a tweet will add it to an existing collection of tweets or create a new one. Finally, users will be able to export their collection to an HTML markup code.

This is a very high-level description of what we’re going to build. Let’s break it down into a list of smaller tasks:

Solving a problem using React

  1. Receive tweets from the Snapkite Engine server in real time.
  2. Display one tweet at a time for at least 1.5 seconds.
  3. Add tweets to a collection on a user click event.
  4. Display a list of tweets in a collection.
  5. Create an HTML markup code for a collection and export it.
  6. Remove tweets from a collection on a user click event.

Now that we’ve identified a potential solution for each individual task, let’s think about how are we going to put them together and create a fully functional web application.

There are two ways to build composable React applications:

  • You can start by building individual React components and then compose them together into higher-level React components, moving up the component hierarchy.
  • You can start from the topmost React element and then implement its child components, moving down the component hierarchy.

The second strategy has the advantage of seeing and understanding the big picture of your application’s architecture. I think it’s important to understand how everything fits together before we can think of how individual pieces of functionality are implemented.