title: Importing React Components with ES6
body: <p>I have a react component, in login.js , that I am keeping in a separate file, and then importing login.js in my main file, App.js. I'm having trouble with the importing, as the localhost page I'm rendering the app to just shows up completely blank, with no errors given. Not sure what I'm doing wrong, the code for my component, login.js is below:</p>
  
  <pre><code>import React, {Component} from 'react';
  import * as firebase from 'firebase';
  
  
  class login extends Component{
  
  constructor(props) {
      super(props)
      this.state = {emailText: '',
                    passwordText: ''
                   }
  }
  
  
  onChangeEmail(e) {
      this.setState({emailText: e.target.value})
  }
  
  onChangePassword(e) {
      this.setState({passwordText: e.target.value})
  }
  
  signUpUser(){
      console.log(this.state.emailText)
      console.log(this.state.passwordText)
  
      firebase.auth().createUserWithEmailAndPassword(this.state.emailText, this.state.passwordText)
      console.log('New account created, and is now signed in.')
  }
  
  loginUser(){
      console.log('logging in rn')
      firebase.auth().signInWithEmailAndPassword(this.state.emailText, this.state.passwordText)
      console.log('Successfully logged in')
  }
  
  logoutUser(){
      firebase.auth().signOut()
      console.log('logged out')
  }
  
      render(){
          return  (
              &lt;div class="container"&gt;
              &lt;input onChange={this.onChangeEmail.bind(this)} id="txtEmail" type="email" placeholder="Email"/&gt;
  
              &lt;input onChange={this.onChangePassword.bind(this)} id="txtPassword" type="password" placeholder="Password"&gt;&lt;/input&gt;       
  
              &lt;button onClick={this.loginUser.bind(this)} id="btnLogin" class="btn btn-action"&gt;
              Log in &lt;/button&gt;    
  
              &lt;button onClick={this.signUpUser.bind(this)} id="btnSignUp" class="btn btn-secondary"&gt;
              Sign Up &lt;/button&gt;
  
              &lt;button onClick={this.logoutUser.bind(this)} id="btnLogout" class="btn btn-action hide"&gt;Log Out&lt;/button&gt;
          &lt;/div&gt;  
          )
  
      }
  
  };
  
  export default login;
  </code></pre>
  
  <p>The code I am importing login.js into is below:</p>
  
  <pre><code>import React, {Component} from 'react';
  import * as firebase from 'firebase'; // Import Firebase library
  import login from './login.js';
  
  export default class App extends React.Component {
     render() {
        return (
           &lt;div&gt;
              &lt;login/&gt;
           &lt;/div&gt;
        );
     }
  }
  </code></pre>
  
  <p>My index.js is below:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>