StevenJL

// the convention here is to name the reducer function the same
// name as the property in the state object that it is modifying
// this function modifies the visibilityFilter, hence it's
// named as such
function visibilityFilter(state="SHOW_ALL", action){
  // basically the same code and logic found in
  // the "SET_VISIBILITY_FILTER" case statement
}

function todos(state=[], action){

StevenJL

import { combineReducers } from 'redux'

// creating a composite reducer with constitute reducers via
// the `combineReducers` method.
const todoApp = combineReducers({
  visibilityFilter,
  todos,
})

// The above is equivalent to this

StevenJL

import { combineReducers } from 'redux'
import * as reducers from './reducers'
// if you have 50 reducers, you don't need to import
// them all individually

const todoApp = combineReducers(reducers)

StevenJL

import { createStore } from 'redux'
import todoApp form './reducers'

// we create the store the store by invoking `createStore` with
// the root reducer.
const store = createStore(todoApp)

// `createStore` also takes a second option argument that is the initial state of the store.
const initialState = {
  visibilityFilter: "SHOW ALL",

StevenJL

// note on new ES6 anonymous function syntax
// these two are equivalent
(function() { return 1+2;})() // returns 3
(()=>1+2)() // returns 3

StevenJL

// instantiate the store
const store = createStore(todoApp, window.STATE_FROM_SERVER)

// import the action creators
import { addTodo, completeTodo, setVisibilityFilter }

// `store.subscribe()` takes an anonymous function that will be invoked
// everytime the store state changes.  It returns another method, which when
// invoked, will stop listening.
let unsubscribe = store.subscribe(() =>

StevenJL

def call_em_up_once
  puts "CALL EM UP ONCE"
  caller.each {|line| puts line}
  puts "\n"
end

call_em_up_once

class Foo
  def call_em_up_twice

StevenJL

// creating a class with `React.createClass`
AwesomeComponent = React.createClass({
    render: function(){
      return (
        <div className="awesome">
          I'm an awesome component!
        </div>
      )
    }
})

StevenJL

var SomeMixin = {
  doSomething() {
  }
}

Contacts = React.createClass({
  mixins: [SomeMixin],
  
  handleClick: function {
    this.doSomething(); // use mixin

StevenJL

import React from 'react';

// component created with `React.createClass`
Contacts = React.createClass({
  handleClick() {
    // `this` gets bound to instance of React Component
    console.log(this);
  },
  render() {
    return (