Oskar Klintrot

CS Student

© 2016. All rights reserved.

Thinking in React, part 2

02 Dec 2015 - Oskar Klintrot

• •

In part 1 we ended with this picture:
React Components Of The App In the upper left we have the menu and to the right the start page. The bottom left mock is the actual game and to the right the result that will be displayed after the game.

React Components Of The App: Menu
Let's start with the menu. There we can put the boring stuff like links to "About this page" etc. The menu will probably be just one component:

  1. Menu (red)

The component hierarchy will be very simple:

Start page

React Components Of The App: Start Page
This is the first thing the user will see when entering the app. Here all game options will be put so that the user easely choose what mnemomic images the user want to practice on. Here the app needs more components:

  1. Container (red)
  2. Header (green)
  3. Tiles (blue)
  4. Tile (orange)

The hierarchy will be pretty straight forward:

Game

React Components Of The App: The Game
Here it's a lot more stuff going on with the description, inputs and then at the bottom the playground.

  1. Container (red)
  2. Header (green)
  3. GameContainer (red)
  4. BackArrow (dark green)
  5. Description (blue)
  6. GameOptions (purple)
  7. Playground (brown)

Still, the hierarchy is not so different from the start page:

Result

React Components Of The App: The Results
This is the last page (except maybe some "about"-page etc but that's later on, it's just not prioritized) the user will use. After a game round this is where the user will be directed to and the results of the round will be displayed here.

  1. Container (red/purple/no idea)
  2. Header (light green)
  3. ResultContainer (brown)
  4. BackArrow (dark green)
  5. ResultTable (light blue)
  6. ResultRow (dark blue)

This hierarchy is actually the deepest:

What's Next?

I am now at Step 2: Build a static version in React in the Thinking In React-tutorial. My aim is to having something to show by the end of the week, knock on wood...

Yours sincerely,
Oskar Klintrot

Tune of the day:

Related Posts