"Things We Learned Building A Complex React App" post

things_we_learned_about_react_1.jsx

@connect(...)
class HomePage extends React.Component {
  handleContactFormSubmission (e) {
    e.preventDefault()
    const formData = { ... }
    this.props.dispatch(submitContactForm(formData))
  }

  render () {
    return (
      <main><h1>Welcome!</h1></main>
      <Sidebar onContactFormSubmission={::this.handleContactFormSubmission} />
    )
  }
}

class Sidebar extends React.Component {
  render () {
    return (
      <div styleName="sidebar">
        <ContactForm onSubmit={::this.props.onContactFormSubmission} />
      </div>
    )
  }
}

class ContactForm extends React.Component {
  render () {
    return (
      <form onSubmit={::this.props.onSubmit}>
        <input type="text" name="name">
        <textarea name="message" />
        <button type="submit">Submit</button>
      </form>
    )
  }
}

things_we_learned_about_react_2.jsx

class HomePage extends React.Component {
  render () {
    return (
      <main><h1>Welcome!</h1></main>
      <Sidebar />
    )
  }
}

class Sidebar extends React.Component {
  render () {
    return (
      <div styleName="sidebar">
        <ContactFormWidget />
      </div>
    )
  }
}

@connect(...)
class ContactFormWidget extends React.Component {
  handleSubmission (e) {
    e.preventDefault()
    const formData = { ... }
    this.props.dispatch(submitContactForm(formData))
  }

  render () {
    return (
      <form onSubmit={::this.handleSubmission}>
        <input type="text" name="name">
        <textarea name="message" />
        <button type="submit">Submit</button>
      </form>
    )
  }
}