Hangman with React and Redux

What I've learned

@favrik

But first

What are these things?

REACT

UI LIBRARY

REDUX

PREDICTABLE STATE CONTAINER

hangman

The game

What I've learned

SETUP is laborious

$ npm install --save-dev babel-core babel-preset-es2015 babel-preset-react babel-preset-react-hmre babel-preset-stage-0

$ npm install --save-dev hjs-webpack webpack

$ npm install --save-dev babel-loader css-loader style-loader postcss-loader url-loader file-loader

$ npm install --save react react-dom

could use a boilerplate/template!

if you find the one that fits your needs/experience ;)

You also have to:

- setup environments

- wire webpack

- wire redux with react

- Setup test harness

- etc. etc. etc.

after all that...

DEFINE & DESIGN

Components

Letters

word

HANGMAN METAPHOR

Misses indicator

State

const initialState = {
  chances: 6,
  word: 'JAZZ',
  misses: [],
  correct: [],
  guess: '',
  isFetching: false
}

program the thing!

see the light?

questions?

github.com/favrik/hangman-react-redux