messages.js

// psuedo code

class MessageForm extends React.Component {
  onSubmit = (e) => {
    // POST the new message
  }

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

class Message extends React.Component {
  render() {
    return (
      <div>
        <h3>{this.props.message.username}</h3>
        <p>{this.props.message.body}</p>
      </div>
    );
  }
}

class MessageContainer extends React.Component {

  componentDidMount() {
    // fetch the messages
  }

  render() {
    <div>
      <MessageForm />
      {this.props.messages.map((message) => {
        return <Message message={message} />;
      })}
    </div>
  }

}