Our second component

We've made one React component; let's make another!

As we discussed earlier, the goal of this chapter is to create our application's login page. First, let's create a folder called components/ in our src folder, and then inside, let's create a file called LoginContainer.js.

Our LoginContainer will be another class component, for reasons that we'll look at down the road. Just as with our app, let's set up a basic class component skeleton:

import React, { Component } from 'react';

class LoginContainer extends Component {
  render() {
 
  }
}

export default LoginContainer;

Let's test out rendering our component before we dive any further in. Return a simple <h1>Hello from LoginContainer</h1> from our render method; then, let's jump back to our App.js.

I'm a bit of a stickler for code organization, so before we go on, let's move our App.js inside our components folder. This also means that we'll have to change our import statement in index.js to the following:

import App from './components/App';

Also, move our app.css inside the components folder, and then change our hot reloader configuration inside index.js:

if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NextApp = require('./components/App').default;
    ReactDOM.render(
      <App/>,
      document.getElementById('root')
    );
  });
}

Now that all our components are living together in the same folder, it's much better.

Inside App.js, we first import the LoginContainer:

import LoginContainer from './LoginContainer';

Then, we render it instead of the <h1>:

import React, { Component } from 'react';
import LoginContainer from './LoginContainer';
import './app.css';


class App extends Component {
  render() {
    return <LoginContainer />
  }
}

export default App;

Flip back to the app, and you should see the Hello from LoginContainer of our new component:

As we shall see as we build more components, our App will be a wrapper for our main Container component. It'll be, in essence, a container for our Containers. Inside App.js, let's wrap our LoginContainer in a div#container for CSS purposes:

class App extends Component {
  render() {
    return (
      <div id="container" className="inner-container">
        <LoginContainer />
      </div>
    );
  }
}

Alright, getting back to LoginContainer.js, let's write some JSX!

Delete our <h1> tag and replace it with the following:

class LoginContainer extends Component {
  render() {
    return (
      <div id="LoginContainer" className="inner-container">

      </div>
    );
  }
}

This is a pattern I really like--having most React components wrapped in a div with an id of the class name; it's just a preference, though (a preference you'll have to follow for this book, since I wrote the CSS!).

The essence of our login form is, of course, a form. This form will handle both login and signup. Here's the basic JSX:

class LoginContainer extends Component {
   render() {
     return (
       <div id="LoginContainer" className="inner-container">
         <form>
           <p>Sign in or sign up by entering your email and password.</p>
           <input 
             type="text" 
             placeholder="Your email" />
           <input 
             type="password" 
             placeholder="Your password" />
           <button className="red light" type="submit">Login</button>
         </form>
       </div>
     )
  }
}

In the preceding JSX, you may note that I wrote className instead of class for the <button>. Remember that I said JSX had a few caveats? This is one: since class is a protected keyword in JavaScript, we can't use it, so we use className instead. You'll get used to it in no time.

On that note, pay attention to the ID and className in the preceding JSX, otherwise your CSS won't look spiffy.

Above our form, we'll write a basic header with our logo:

<div id="LoginContainer" className="inner-container">
  <div id="Header">
    <img src="/assets/icon.png" alt="logo" />
    <h1>Chatastrophe</h1>
  </div>
  <form>

Your app should now look like this (if you haven't done so, delete the <h1> and <img> tags from index.html):

Looks pretty, but what does it do?