nadeesha

function getCarConfig(car) {
  let description;
  let newPrice;

  if (car.rating > 4) {
    description = "good car";
    newPrice = car.price + 1000 * car.rating;
  } else {
    description = "bad car";
    newPrice = car.price;

nadeesha

// imperative

if (name.includes("food")) {
  return `${name} is food`;
} else {
  return `${name} is not food`;
}

// declarative

nadeesha

// https://github.com/brunnolou/react-morph

<ReactMorph>
  {({ from, to, fadeIn, go }) => (
    <div>
      <a onClick={() => go(1)}>
        <strong {...from("title")}>ReactMorph 🐛</strong>
        <br />
        <p {...from("description")}>Morphing transitions was never so easy!</p>
      </a>

nadeesha

// https://github.com/renatorib/react-powerplug

import { State, Toggle } from 'react-powerplug'
import { Pagination, Tabs, Checkbox } from './MyDumbComponents'

<State initial={{ offset: 0, limit: 10, totalCount: 200 }}>
  {({ state, setState }) => (
    <Pagination {...state} onChange={(offset) => setState({ offset })} />
  )}
</State>

nadeesha

// https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#children-func

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to}>
    {({match}) => (
      <li className={match ? "active" : ""}>
        <Link to={to} {...rest} />
      </li>
    )}
  </Route>

nadeesha

const LiveDateDisplay = () => (
  <div>
    <p>Time is:</p>
    <p>
      <LiveDate>
        {
          (liveDate) => liveDate.date
        }
       </LiveDate>
     </p>

nadeesha

class LiveDate extends React.Component {
  componentDidMount() {
    // update state every second with
    // the current time    
    setInterval(() => {
      this.setState({
        liveDate: new Date().toISOString(),
      });
    }, 1000);
  }

nadeesha

// https://github.com/acdlite/recompose/blob/master/docs/API.md

const enhance = compose(
  withState('value', 'updateValue', ''),
  withHandlers({
    onChange: props => event => {
      props.updateValue(event.target.value)
    },
    onSubmit: props => event => {
      event.preventDefault()

nadeesha

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

/**
 * Make all properties in T required
 */

nadeesha

type ReturnType<T extends (...args: any[]) => any> = 
    T extends (...args: any[]) => infer R ? R : any;