Notes on approach to scalable, maintainable applications with ReactJS + Webpack

I_Choose_You_notes.md

• configure fonts -> "Courier New", Courier, monospace !default
• Make SelectPokemon view in Views folder. Register view with Routes:

import React from 'react'
import { Route } from 'react-router'
import App from '../App'
import SelectPokemon from '../App/Views/SelectPokemon'

var routes = (
  <Route handler={App} >
    <Route name='SelectPokemon' path='/start' handler={SelectPokemon}/>
  </Route>
)

export default routes

• set view to 100% height.

• html, body, #app in main.scss

• SelectPokemonView container

• set up pokemon.store

• set up dispatcher. simplify

• ++ utils/StoreUtils

• ignore above this simply needs to be a read only database. ended up looking like this:

//pokemon.store/index.js
import { starters } from './pokemon'

const Store = {
  getStarters
}

export default Store
/////////////////////////////////////////
//

function getStarters(id) {
  return starters
}


//pokemon.store/pokemon
export const starters = [
  {
    name: 'Charmander',
    img: 'assets/pokemon/charmander.png'
  },
  {
    name: 'Squirtle',
    img: 'assets/pokemon/squirtle.png'
  },
  {
    name: 'Bulbasaur',
    img: 'assets/pokemon/bulbasaur.png'
  }
]

The SelectPokemon View component

• Make PokeballSet component. 'whats a molecule?'
• 'why have components folder inside of SelectPokemon view?'

import React from 'react'
import pokemon from 'pokemon.store'
import FlexBox from 'obj.FlexBox'
import PokeballSet from './components/mol.PokeballSet'

const SelectPokemonView = React.createClass({

  getInitialState() {
    return {
      starters: pokemon.getStarters(),
      selectedPokemon: null,
    }
  },

  render() {
    return (
      <FlexBox style={{height: '100%'}} alignItems='center' justify='center'>
        <div>
          <PokeballSet pokemon={ starters }/>
        </div>
      </FlexBox>
    )
  }
})

export default SelectPokemonView

PokebalSet component