React: Up & Running

Chapter 6. Building an App

Now that you know all the basics of creating custom React components (and using the built-in ones), using (or not) JSX to define the user interfaces, and building and deploying the results, it’s time for a more complete app.

The app is called “Whinepad,” and it allows users to keep notes and rate all the wines they are trying. It doesn’t have to be wines, really; it could be anything they’d like to whine about. It should do all you would expect from a create, read, update, and delete (CRUD) application. It also should be a client-side app, storing the data on the client. The goal is to learn React, so the non-React parts (e.g., storage, presentation) of the narrative are to be kept to a minimum.

In the process, you’ll learn about:

• Building the app from small, reusable components

• Communicating between the components and making them work together

Whinepad v.0.0.1

Now that you have the boilerplate from the previous chapter, let’s get Whinepad off the ground. It’s a rating app where you takes notes on new things you try. How about the welcome screen be the list of stuff you’ve already rated in a nice table? This means simply reusing the <Excel> component from Chapter 3.

Setup

First, copy the boilerplate app reactbook-boiler to where you’ll be working (grab the copy from https://github.com/stoyan/reactbook/) and rename it whinepad v0.0.1. Then start the watch script so everything can build as you make changes:

$ cd ~/reactbook/whinepad\ v0.0.1/