MicroBenz

const names = ['John', 'Jack', 'Rose', 'Alex', 'Mercy', 'Emma', 'Peter']

const fourLengthNames = names.filter(name => name.length === 4);
const greetingEveryone = names.map(name => `Hello ${name}`);

MicroBenz

const addBy = a => b => a + b; // addBy is function that take "a" as an argument and return a function b => a + b

const addByFive = addBy(5); // It will return b => 5 + b And it is a function!
const addByTen = addBy(10); // It will return b => 10 + b And it is a function!

addByFive(7); // 12
addByTen(59); // 69

MicroBenz

import React from 'react';
import { connect } from 'react-redux';

const DumbComponent = (props) => {
  const { users } = props;
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>}
    </ul>
  );

MicroBenz

import React, { Component } from 'react';

export default class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.handleCount = this.handleCount.bind(this);
  }
  handleCount(count) {
    this.setState({ counter: this.state.counter + count });

MicroBenz

import React from 'react';
import { withState } from 'recompose';

const enhance = withState('counter', 'setCounter', 0);
const Counter = enhance(props => (
  <div>
    Count: {props.counter}
    <button onClick={() => props.setCounter(props.counter + 1)}>Increase</button>
    <button onClick={() => props.setCounter(props.counter - 1)}>Decrease</button>
  </div>

MicroBenz

render() {
  const { loading, data } = props;
  if (loading) return <Loader />;
  return <DisplayData data={data} />
}

MicroBenz

import React from 'react';
import { branch, renderComponent } from 'recompose';

const enhance = branch(props => props.loading, renderComponent(Loader));
const DisplayDataWithLoading = enhance(props => <DisplayData data={props.data} />);

MicroBenz

const composedHoc = compose(hoc1, hoc2, hoc3)

// Same as
const composedHoc = BaseComponent => hoc1(hoc2(hoc3(BaseComponent)))

MicroBenz

import React from 'react';

const Campers = props => {
  const { campers = [] } = props;
  return (
    <div>
      <CamperTable lists={campers.filter(camper => camper.role === 'design')} />
      <CamperTable lists={campers.filter(camper => camper.role === 'marketing')} />
      <CamperTable lists={campers.filter(camper => camper.role === 'programming')} />
      <CamperTable lists={campers.filter(camper => camper.role === 'content')} />

MicroBenz

import React from 'react';
import { conenct } from 'react-redux';
import { compose } from 'recompose';

const enhance = compose(
  connect(
    state => ({
      campers: state.campers.lists
    })
  )