React components

betterDiv.jsx

const MyBetterDiv = props => (
  <div className="better" {...props} />
)

betterDivRender.html

<div class="better" data-gorrion="gorrion" data-other="other prop">Gorrion is always bettter</div>

betterDivUsage.js

<MyBetterDiv data-gorrion="gorrion" data-other="other prop">Gorrion is always bettter</MyBetterDiv>

button.jsx

const Button = (props) =>
  <button onClick={props.onClick}>{props.buttonText}</button>

buttonIncrement.jsx

class ButtonIncrement extends React.Component {
    constructor(props) {
        super(props)
        this.state = { counter: 0 }
    }

    handleOnClick = () => {
        this.setState((prevState) => ({
            counter: prevState.counter + 1
        }));
    }

    render() {
        return (
            <Button
                onClick={this.handleOnClick}
                buttonText={`Current counter: ${this.state.counter}`}
                />
        )
    }
}

commentList.jsx

const Commentlist = ({comments}) => (
  <ul>
    {comments.map(({ body, author }) =>
      <li>{body}-{author}</li>
    )}
  </ul>
)

commentListContainer.jsx

class CommentListContainer extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    getAsync("https://imaginary-api.gorrion.io/my-comments")
	    .then(comments => this.setState({ comments }))
  }
  render() {
    return <CommentList comments={this.state.comments} />;
  }
}

connect.jsx

const Connect = ComposedComponent =>
  class extends React.Component {
    constructor() {
      super()
      this.state = { name: "" }
    }
    componentDidMount() {
      //fetching data is a part of HOC
      getAsync('https://imaginary-api.gorrion.io/name')
        .then(({ name }) => { this.setState({ name: name }) })
    }
    render() {
      return (
        <ComposedComponent
          {...this.props}
          name={this.state.name}
        />
      )
    }
  }

greetingBad.jsx

const Greeting = props => <div>Hello {props.name}!</div>

greetingFinal.jsx

const Greeting = ({ name, ...props }) => (
  <div {...props}>Hi {name}!</div>
)

greetingGood.jsx

const Greeting = ({name}) => <div>Hello {name}!</div>

greetingModified.jsx

const Greeting = ({ name, ...props }) => {
  if (!name) {
    return <div>Loading...</div>
  }
  return <div {...props}>Hi {name}!</div>
}

loading.jsx

const Loading = () => <p>Loading...</p>

worker.jsx

const Worker = props => <p>{props.message}</p>

workerInfo.jsx

class WorkerInfo extends React.Component {
  state = { worker: null }
  componentDidMount() {
    // We can make an ajax call here, for e.g.
    setTimeout(() => this.setState({
      worker: `Hi, I am ${this.props.name} and I am proud to work for ${this.props.employer}`
    }), 2500);
  }
  render() {
    // Render the children with a function using state as the argument
    return this.props.children(this.state.worker);
  }
}