App Component: Overview

Putting everything together

Development of the top-level React component integrates the screen components and interacts with the API while tracking the application state. This can seem like a lot to juggle and coordinate, and, yes, the dependencies can get complicated. However, we can just build it up screen-by-screen and make sure it works at each step.

The components are best checked in Storybook where their various states can be viewed simultaneously. For the application itself, it’s best to return to the React server. To run it, we can use the following command from the client directory:

$ npm start

If we left the default React application in place, it should open in our browser. Otherwise, we can start off with this placeholder:

import React, { Component } from 'react';
import { GlobalStyle } from './fonts';

class App extends Component {
    render() {
        return <div><GlobalStyle/>Top-level App</div>;
    }
}

export default App;

We’ll also want to make sure that the Flask server is running and the database server is ready when we’re using Postgres rather than SQLite. We usually begin with SQLite and then switch to Postgres in preparation for deployment, but using Postgres throughout is a good option as well. We may find that we have terminals (such as Powershell) open for Storybook, React, and Flask. This is where all of the pieces will finally come together.

Things that need to be tracked

It is worth thinking about the application state in advance. What needs to be tracked?

1. The game, when active, has four states: logged out, active, win, and lose.
2. User name (when logged in).
3. Game language (for any given game).
4. Within the game, we need to track its details:
   • Usage example
   • Guesses so far
   • Number of wrong guesses