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.
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.