manoelneto

class Router extends Component {
  state = {
    router: initialRouter
  }

  render() {
    createElement(this.props.component, this.state)
  }
}

manoelneto

withA(withB(withC(FinalComponent)));

manoelneto

class MyOtherComponent extends Component {
  // router e anotherFunc estará disponível dentro de this.props.
  componentDidMount() {
    this.props.anotherFunc();
  }
}

export default withRouter(MyOtherComponent);

manoelneto

const myComponent = ({router, anotherFunc}) => {
  ...
}

export default withRouter(myComponent);

manoelneto

export default const withRouter = (OriginalComponent) => {
  class NewComponent extends Component {

    state = {
      router: initialRouter
    }

    anotherFunc = () => {
      ...

manoelneto

class ComponentThatsGenerateAValue extends Component {
  state = {
    value: initialState
  }

  onChange = newState => {
    this.setState({value: newState})
  }

  render() {

manoelneto

import React, { Component, createElement } from 'react';

class CurrentTime extends Component {
  state = {
    time: new Date()
  }

  tick = () => {
    this.setState({time: new Date()})
  }

manoelneto

import React, { Component } from 'react';
import CurrentTime from 'components/CurrentTime';

class CurrentYear extends Component {
  render() {
    const { time } = this.props;

    return <div>{time.getFullYear()}</div>
  }
}

manoelneto

import React, { Component } from 'react';
import Progress from 'components/Progress';
import ProgressInput from 'components/ProgressInput';

class App extends Component {
  state = {
    count: 10
  }

  onChangeCount = count => {

manoelneto

import React from 'react';

export default ({value, onChange}) => (
  <div>
    Olá, o progresso é {value}

    <input type="text" value={value} onChange={(evt) => onChange(evt.target.value)}/>
  </div>
)