React was introduced in the last chapter, along with some simple examples. React will perform all of DOM manipulation and DOM event listening.

We will do a quick review of the life cycle events we are going to utilize in various components. The first is componentWillMount. This is fired right before the component is rendered to the DOM. Next is componentWillUnmount. Use this to clean up all the objects we initialized earlier. These first two functions we covered will only fire once in the life cycle. The componentDidUpdate function is executed after the component renders any changes. This can be executed multiple times.

Let's get started. We will be creating this as a static JavaScript file. Create a new folder under static named js. Then, create a file named components.js. The first component we will create is a room form. We need this so that after a user logs in, they can enter the name of a room or join a previously created room. Paste the following code in components...