adamterlson

const transactionMachine = Machine({
    id: 'transaction',
    initial: 'draft',
    states: {
        draft: {
            on: {
                AUTHORIZE_PAYMENT: {
                    target: 'authorizing',
                },
                ADD_ITEM: {

adamterlson

/* @flow */

import * as React from 'react'
import type { ComponentType, ElementConfig } from 'react'

declare type Action = { type: string }
declare type Dispatch = (arg: Action | Array<Action>) => mixed
declare type MapStateToProps<S, OP, SP> = (state: S, ownProps: OP) => SP
declare type MapDispatchToProps<OP, DP> = (dispatch: Dispatch, ownProps: OP) => DP
declare type MergeProps<SP, DP, OP, MP> = (stateProps: SP, dispatchProps: DP, ownProps: OP) => MP

adamterlson

const propMap = (mapper) => (WrappedComponent) => (props) => <WrappedComponent {...mapper(props) } />

const mapStateToProps = (state) => {
  user: state.currentUser
}

// This component will display the firstName of the current user
const MyComponent = compose(
  connect(mapStateToProps),
  propMap(props => ({

adamterlson

compose(
    ownState(
        set => ({
            setValue: e => set(state => ({
                ...state,
                value: e.target.value,
            })),
            clearValue: () => set(state => ({
                ...state,
                value: '',

adamterlson

Lightning talk proposal for the Reactive 2016 Conference. Here's a handy retweet link

If you want to hear this talk, or if you just want to support me, please star ⭐ the Gist!

When I started writing React apps, I approached components as if they were “just the V in MVC!” Seriously, we’ve all heard it.

I have found this to be an inferior way of thinking about and building React applications. It makes people treat React as a drop-in replacement for something like a Backbone or Angular 1.x View. In other words, people treat it like a glorified template system with partials and don’t harness the power of its functional paradigms.

This talk is about a functional way to write and conceptualize entire React applications.

adamterlson

class MyChildComponent extends Component {
  render() {
    return (
      <View style={[{ height: 100 }, this.props.style]}>
        The height of this container will be **50**
      </View>
    );
  }
}

adamterlson

const c = (function () {
  this.context = 'lexical context';
  
  const bar1 = () => {
    console.log('bar 1:', this.context);
  };
  
  const curry = (fn) => {
    console.log('bar 3 curryer context:', this.context);
    return () => {

adamterlson

let user = { 
  teacherId: 1,
  first: 'Bob', 
  last: 'Smith', 
  room: {
    floor: 2,
    number: 40
  }  
};

adamterlson

function formatDate(date) {
    return (date.getMonth() + 1) + '/' + date.getDate() + '/' +  date.getFullYear();
}

$('form[name=accountDetailForm]').on('submit', function (e) {
   alert('Submitted!');
   e.preventDefault();
});

$('#dateRange a[data-date-range]').click(function (e) {

adamterlson

function sortProperties(objToSort) {
  var properties = Object.keys(objToSort).sort();
  var result = {};
  properties.forEach(function (prop) {
    if (!objToSort[prop]) {
      result[prop] = objToSort[prop];
    }
    else if (Array.isArray(objToSort[prop])){
      result[prop] = objToSort[prop].map(sortProperties);
    }