alexkrolick

import _ from 'lodash'

// In-memory Knex mock 🤯
function DB () {
  const db = function (table) {
    if (!table) return db
    db._table = table
    if (!db._db[table]) {
      db._db[table] = {
        _latestId: 0,

alexkrolick

const api = {
  fetchUser(id) {
    return { id, name: "username" };
  }
};

class UserState extends React.Component {
  state = {
    user: null,
    signinCount: 0,

alexkrolick

// JSX

<div className="myClass">
  <Foo selected />
  <Bar />
  { [1,2,3].map(i => i**2) }
</div>

// Equivalent createElement

alexkrolick

import React, { Component, createElement as h } from 'react'

const Foo = ({text, ...props}) => h("span", props, text)

const Bar = props => h("div", {},
  h(Foo, { ...props, style: "color: blue" })
)

class Baz extends Component {
  constructor(props) {

alexkrolick

import React, { createElement as h } from 'react'
import { render } from 'react-dom'

const foo = h("i", {}, "Foo")
const bar = h("span", { style: "color: red;" }, "Bar", foo)

render(bar, document.body)

alexkrolick

// JSX
const withFooProp = WrappedComponent => props => <WrappedComponent foo={2} {...props} />

// createElement
const withFooProp = WrappedComponent => props => h(WrappedComponent, { foo: 2, ...props })

const Bar // ... a component
export default withFooProp(Bar) // export an augmented version of Bar

// elsewhere...

alexkrolick

class Container extends Component {
  state = {
    text: 'foo'
  }
  changeText = newText => this.setState({text: newText})
  render() {
    <div>
      <Presenter1 text={this.state.text} changeText={this.changeText} />
      <Presenter2 text={this.state.text} />
    <div>

alexkrolick

const InjectTimestamp = ({children, ...props}) => {
  const time = new Date()
  return children(time)
}

InjectTimestamp.propTypes = {
  children: PropTypes.func,
}

const Foo = () => {

alexkrolick

/* Edit on Codepen: https://codepen.io/alexkrolick/pen/QMXMMv */

class StateContainer extends React.Component {
  constructor(props) {
    super(props);
  }

  get handlers() {
    return {};
  }

alexkrolick

const backoffFns = {
  constant: curDelay => curDelay,
  geometric: curDelay => curDelay * 2,
}

const defaultOpts = {
  maxTries: 2,
  delay: 0,
  backoff: 'constant',
  logger: console.log,