title: ReactJS login page not showing
body: <p>I am following this tutorial: <a href="https://dev.to/devtalhaakbar/reactjs-and-laravel---running-through-a-basic-setup---part-2-20p" rel="nofollow noreferrer">reactjs-and-laravel---running-through-a-basic-setup---part-2-20p</a></p>
  
  <p>but I can't get the contents of the login page to show. I have:</p>
  
  <p><strong>Login.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  export default class Login extends Component {
  
      constructor(props) {
          super(props);
  
          this.processSubmit = this.processSubmit.bind(this);
      }
  
      componentWillMount() {
          // do something like setting default state
      }
  
      processSubmit(values) {
          // do something with the values
      }
  
      render() {
          const { handleSubmit, submitting } = this.props;
  
          return (
              &lt;div className="container mt-5"&gt;
                  &lt;div className="row justify-content-center"&gt;
                      &lt;div className="col-6"&gt;
                          &lt;div className="card"&gt;
                              &lt;div className="card-body"&gt;
                                  &lt;h2 className="text-center font-weight-light mb-4"&gt;Sign into your account&lt;/h2&gt;
                                  &lt;form onSubmit={handleSubmit(this.processSubmit)}&gt;
                                      &lt;Field
                                          label="Email Address"
                                          name="email"
                                          component={FormField}
                                          id="email"
                                          type="text"
                                          className="form-control"
                                      /&gt;
                                      &lt;Field label="Password" name="password" component={FormField} id="password" type="password" className="form-control" /&gt;
                                      &lt;div className="form-check"&gt;
                                          &lt;label className="form-check-label"&gt;
                                              &lt;Field name="remember" component="input" type="checkbox" className="form-check-input mt-2" value="1" /&gt;
                                              Remember me
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;div className="form-group mt-4"&gt;
                                          &lt;button type="submit" className="btn btn-secondary" disabled={submitting}&gt;Continue&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  };
  
  Login = reduxForm({
      form: 'login',
      validate
  })(Login);
  </code></pre>
  
  <p>Which is imported into <strong>App.js</strong>:</p>
  
  <pre><code>import React, {Component} from 'react'
  import ReactDOM from 'react-dom'
  import {BrowserRouter, Route, Switch} from 'react-router-dom'
  import Home from '../containers/Home';
  import Login from '../containers/LogIn';
  import CreateUsers from '../containers/CreateUsers';
  import Dashboard from '../containers/Dashboard';
  import NavBar from './NavBar';
  
  import {createStore, combineReducers} from 'redux';
  import {reducer as formReducer} from 'redux-form';
  
  import {Provider} from 'react-redux';
  
  const rootReducer = combineReducers({
      form: formReducer,
  });
  
  
  const store = createStore(rootReducer);
  
  
  class App extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              isAuthenticated: false
          };
      }
  
      userHasAuthenticated = authenticated =&gt; {
          this.setState({isAuthenticated: authenticated});
      };
  
      render() {
          return (
              &lt;Provider store={store}&gt;
                  &lt;BrowserRouter&gt;
                      &lt;div&gt;
                          &lt;NavBar /&gt;
                          &lt;Route exact path="/" component={Home}/&gt;
                          &lt;Route path="/login" component={Login}/&gt;
                          &lt;Route path="/users/create" component={CreateUsers}/&gt;
                          &lt;Route path="/dashboard" component={Dashboard}/&gt;
                      &lt;/div&gt;
                  &lt;/BrowserRouter&gt;
              &lt;/Provider&gt;
          )
      }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'))
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <hr>
  
  <p>Console is giving me:</p>
  
  <p>Uncaught ReferenceError: reduxForm is not defined</p>
  
  <hr>
  
  <p>It now gives me Uncaught ReferenceError: validate is not defined</p>
  
  <hr>
  
  <p>Now I am getting:</p>
  
  <pre><code>Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
      in Route (created by App)
      in App
  </code></pre>
  
  <p>As well as:</p>
  
  <pre><code>Uncaught ReferenceError: FormField is not defined
  </code></pre>