React: Up & Running, 2nd Edition

Chapter 7. Building the App’s Components

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

The app is called “Whinepad,” and it allows users to keep notes and rate 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 should also be a client-side app, storing the data on the client. The goal is to learn React, so the non-React parts (e.g., server-side storage, CSS presentation) of the narrative are kept to a minimum.

When building an app, it’s a good idea to start with small, reusable components and combine them to form the whole. The more independent and reusable these components are, the better. This chapter focuses on creating the components, one at a time, and the next chapter puts them all together.

Setup

First, initialize and start the new CRA app:

$ cd ~/reactbook/
$ npx create-react-app whinepad
$ cd whinepad
$ npm start

Start Coding

Just to verify that all is working as expected, open ~/reactbook/whinepad/public/index.html and change the title of the document to match the new app:

// before
<title>React App</title>

//after
<title>Whinepad</title>

The browser auto-reloads and you can see the title change (shown ...