RafalFilipek

alert(x)

RafalFilipek

In this example I have two base classes foo and bar.

const foo = css`
  color: red;
`;

const bar = css`
color: blue;
`;

RafalFilipek

import { css } from 'emotion';
import styled from 'react-emotion';

const box = props => css`
composes:
  ${display(props)}
  ${flex(props)}
  ${direction(props)}
  ${alignItems(props)}
  ${alignSelf(props)}

RafalFilipek

<div>
  <p>
    My twitter account: <a href="https://twitter.com/rafalfilipek">rafal</a>
  </p>
</div>

RafalFilipek

import React from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';

const fontSizes = {
  small: 10,
  medium: 15,
  big: 20,
};

RafalFilipek

type Letter {
  value: String
  code: Int
}

type Word {
  value: String,
  letters: [Letter],
}

RafalFilipek

interface Window {
  Promise: PromiseConstructor;
}

declare var require: {
    (path: string): any;
    <T>(path: string): T;
    (paths: string[], callback: (...modules: any[]) => void): void;
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

RafalFilipek

pure(
  compose(
    lifecycle({
      componentWillMount: () => {
        console.log(this, this.state, this.props); // function _class, undefined, undefined
      },
      componentDidMount: () => {
        console.log(this, this.state, this.props); // function _class, undefined, undefined
      },
    })

RafalFilipek

class Foo extends React.Component {
  state = {}
  bar = (i) => {
    this.setState({ a: i })
  }
  render() {
    return <Biz onClick={this.bar} />
  }
}

RafalFilipek

import React, { PropTypes } from 'react'
import { pure, mapProps, compose, withState, lifecycle, setDisplayName, setPropTypes, defaultProps, onlyUpdateForPropTypes } from 'recompose'
import { repeat } from 'lodash'

export default pure(
  compose(
    setDisplayName('Loader'),
    onlyUpdateForPropTypes,
    setPropTypes({
      sign: PropTypes.string,