mikeyamadeo

Webpack has been hard to learn primarily bc the documentation is poor and it seems I'm learning alongside most of the rest of the interenet. This is meant to be a collection of the useful learning resources I've managed to find:

• Presenting The Most Over-Engineered Blog Ever
• Henrek Jorteg's webpack config
• react-webpack-cookbook

mikeyamadeo

• Gist snippets by Sebastian Markbage
• React Components Searchable database of React Components.
• React Tips & Best Practices 2/17/15
• Flux React Router Example some really good approaches to store organization, high order components, and simple abstractions by gaearon.
• Turbocharge your React application with shouldComponentUpdate and Immutable.js
• Introduction to Contexts in React.js
• The Future of React

mikeyamadeo

Pattern Problem Solution Example

##Pattern - Chain of responsibility Problem: Prototype delegation

##Pattern - Plugin Problem:

mikeyamadeo

Styling

The approach to styling borrows heavily from 2 design philosophies:

• itcss
• atomic design

#itcss Styling is organized by specificity layers from widespread reach and applicabilty with variables, mixins, & resets to very targeted styling with targeted .classes & helpers (!important):

mikeyamadeo

###let keyword let facts

• Mozilla has had let for almost a decade. They completely replace var with it.

Explain the differences between var & let.

• var is function scope
• let is block scope
• let does not get hoisted

mikeyamadeo

• 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} >

mikeyamadeo

  renderThings () {
    return this.props.things.map(thing => {
      return <li>{thing.name}</li>
    })
  },

 render () {

mikeyamadeo

.Btn {
  padding: .8em 1.5em;
  color: white;
  background-color: #EC87C0;
  border: none;
}

mikeyamadeo

render () {
  return (
    <button className='Btn'>
      Submit
    </button>
  )
}

mikeyamadeo

import style from './style'
import React from 'react'

const Btn = React.createClass({
  render () {
    return (
      <button className={style.Btn}>
        Submit
      <button>
    )