jdmorlan

QR Codes

• Instascan
• QR Code

Browser API

• VisibilityJS

jdmorlan

Create a TransitionGroup component that provides three hooks!

1. Component Will Enter
2. Component Will Leave
3. Component Will Update

Component Will Update is for items that were previously in the list, that are no longer in the list.

This is somewhat available today by using the componentWillUpdate instance method on a component, but I don't want to have to provide specific props to check. I want the TransitionGroup to just tell me

jdmorlan

import React, { Component } from 'react';
import { spring } from './spring.js';

class TheComponent extends Component {
  componentWillEnter() {
    spring(this.renderPosition, 0);
  }
  
  componentWillLeave() {
    spring(this.renderPosition, 1);

jdmorlan

// React component to place Font Awesome items on the page! 

import React, { PropTypes } from 'react'
import cx from 'classnames'

const Icon = React.createClass({
  propTypes: {
    name: PropTypes.string.isRequired,
    classNames: PropTypes.string
  },

jdmorlan

1. Commit your work to branch

2. git checkout master

3. git pull

4. git checkout [branch-name]

5. git rebase master

jdmorlan

export const goTo = (viewName, opts = {}) => {
  return (dispatch, getState) => {
    const tabName = opts['tabName']
    const params = opts['params']
    const goingBack = opts['goingBack']

    const state = getState()
    const currentTab = getCurrentTab(state)

    let view

jdmorlan

// Initial State 
{
  status: 'pending',
  initial: null,
  items: [],
  reducer: null,
  iterations: []
}

// Set Initial Value

jdmorlan

const compose = (...funcs) => {
  //... if statements removed for clarity
  
  const last = funcs[funcs.length - 1]
  const rest = funcs.slice(0, -1)
  
  return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}

// Examples 

jdmorlan

const compose = (...funcs) => {
  if (funcs.length === 0) {
    return (arg) => arg
  }
  
  if (funcs.length === 1) {
    return funcs[0]
  }
}

jdmorlan

const compose = (...funcs) => {
  if (funcs.length === 0) {
    return (arg) => arg
  }
  
  if (funcs.length === 1) {
    return funcs[0]
  }
  
  const last = funcs[funcs.length - 1]