Progressive Web Apps with React

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 ...