Chapter 2. A sample isomorphic app


This chapter covers

  • Setting up your build to work on the server and the browser
  • Rendering the views
  • Fetching data with Redux
  • Handling the request on the server
  • Serializing the data on the server
  • Deserializing the data on the browser

In this chapter, I’m going to walk you through all the key parts of an isomorphic app built with React, Redux, Babel, and webpack. Think of this chapter as an opportunity to dip your feet in before taking the full plunge. You won’t need to understand all the details, but by the end you’ll have a sense of how all the pieces fit into the app, and that will provide you context for working through the rest of the book.

If you’re already proficient in building React apps, this chapter along with chapters 7 and 8 will get you started. If you’re not already comfortable with React, I’ll take you through React and the other building blocks for the app in chapters 3 through 6.

2.1. What you’ll build in this chapter: recipes example app

First, let’s look at the app you’ll build in this chapter. Figure 2.1 shows the recipes app you’ll construct. In this chapter, you’ll build the homepage for the app, which will show a list of top recipes and a featured recipe. Getting all the pieces of your first isomorphic app together is an involved process, so for your first pass at building an isomorphic app, I’ll keep the end goal simple.

Figure 2.1. The home screen for the recipes app you’ll build in this chapter

2.2. Tools

2.3. The view

2.4. App state: Redux

2.5. Server rendering

2.6. Browser rendering