The Front-End of Our Application

In this chapter, we’ll build the React front-end for the application. In the last few chapters, we’ve designed from the front and built from the back. We first built the database, then the API. The client is the face of our application and what the user actually sees. We’ll begin the client-building process by first assessing which components need to be built and how they’re related. Then we’ll build them, starting with the smallest pieces and working up to the entire application. Along the way, we’ll look at how to use an HTML canvas and CSS animations.

Components in our application

The top-level component will be the application. The containment relationships have been described in Design a Web Application. Here are the required React components, grouped by level of detail:

1. Highest level
   • Application
2. Screens
   • SignInScreen
   • PlayScree
   • WinScreen
   • LoseScreen
3. Screen components
   • Banner
   • ResultBanner
   • Gallows
   • ShortTitle
   • UsageAndBlanks (includes Usage alone)
4. Forms, Panels, and Buttons
   • ButtonPanel
   • LetterButton
   • StartForm
   • PlayAgainPanel

It may be easier to think of them according to this table.