Our ChatContainer

Creating a component should be old news by now. Our ChatContainer will be a class-based component, since we’ll need to tap into some lifecycle methods down the line (more on that later).

Inside our components folder, create a file called ChatContainer.js. Then, set up our skeleton:

import React, { Component } from 'react';

export default class ChatContainer extends Component {
  render() {
    return (

   );
  }
}

Let's continue our pattern of wrapping our component in a div with an id of the component name:

import React, { Component } from 'react';

export default class ChatContainer extends Component {
  render() {
    return (
      <div id="ChatContainer">
      </div>
    );
  }
}

Just as at the top of our LoginContainer, we will want to render our beautiful logo and title for our user to see. If only we had some sort of reuseable component so that we didn't have to rewrite that code:

import React, { Component } from 'react';
import Header from './Header';...