Chapter 4. Applying React
This chapter covers
- Configuring React Router for the browser
- Rendering the route contents in a consistent way by using props.children
- Building reusable components
- Using higher-order components to abstract common business logic
- Taking advantage of the React component lifecycle
In chapter 3, you learned the basics of building views with React. Now you’ll build on those skills by exploring more-advanced concepts with React. This chapter will teach you what you need to know in order to build a production app with React.
You’ll be working with the All Things Westies app described in chapter 1. This is the first of many chapters in which you’ll be building this app. The code can be found at https://github.com/isomorphic-dev-js/complete-isomorphic-example.git. To start, you should be on branch chapter-4.1.1 (git checkout chapter-4.1.1). The master branch for this repo contains the complete code from all the chapters in the book.
To run the app for this chapter, use these commands:
When the server is running, the app in this chapter will be loaded from http://localhost:3000/ (although there’s nothing to see on the chapter-4.1.1 branch). It’s not isomorphic because I want you to stay focused on the React concepts. As you build out this app in chapters 7 and 8, you’ll turn the app into an isomorphic app.
The app is shown in figure 4.1. I’ve called out the component parts that need to be added to make this work.