title: base.database() is not a function error in firebase with react
body: <p>I've gotten the authentication portion of my app to work with Google, but I'm having trouble getting a snapshot of the database data to work with after that.</p>
  
  <p>I'd like to log in, gather user information, and if there is no owner of the data then set the current user as the owner.</p>
  
  <p>Here is the authentication snippet </p>
  
  <pre><code>  login() {
      auth.signInWithPopup(provider)
        .then((result) =&gt; {
          const user = result.user;
          this.setState({
            user
          });
      });
      const storeRef = base.database().ref(this.props.storeId);
      storeRef.once("value")
        .then((snapshot) =&gt; {
          const data = snapshot.val() || {};
          if(!data.owner) {
            storeRef.set({
              owner: this.user
            });
          }
      });
    }
  </code></pre>
  
  <p>And the full component</p>
  
  <pre><code>import React from 'react';
  import AddFishForm from './AddFishForm';
  import PropTypes from 'prop-types';
  import base, { auth, provider } from '../base';
  import * as firebase from 'firebase';
  
  export default class Inventory extends React.Component {
    constructor() {
      super();
      this.renderInventory = this.renderInventory.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.renderLogin = this.renderLogin.bind(this);
      this.login = this.login.bind(this);
      this.logout = this.logout.bind(this);
      this.state = {
        user: null,
        owner: null
      }
    }
  
    handleChange(e, key) {
      const fish = this.props.fishes[key];
      const updatedFish = {
        ...fish,
        [e.target.name]: e.target.value
       }
       this.props.updateFish(key, updatedFish);
    }
  
    login() {
      auth.signInWithPopup(provider)
        .then((result) =&gt; {
          const user = result.user;
          this.setState({
            user
          });
      });
      const storeRef = base.database().ref(this.props.storeId);
      storeRef.once("value")
        .then((snapshot) =&gt; {
          const data = snapshot.val() || {};
          if(!data.owner) {
            storeRef.set({
              owner: this.user
            });
          }
      });
    }
  
    logout() {
  
    }
  
    renderLogin() {
      return (
        &lt;nav className="login"&gt;
          &lt;h2&gt;Inventory&lt;/h2&gt;
          &lt;p&gt;Sign in to manage your store's inventory&lt;/p&gt;
          &lt;button className="facebook" onClick={() =&gt; this.login()}&gt;
            Log in with Google&lt;/button&gt;
        &lt;/nav&gt;
      )
    }
  
      renderInventory(key) {
        const fish = this.props.fishes[key];
          return(
              &lt;div className="fish-edit" key={key}&gt;
                  &lt;input type="text" name="name" value={fish.name} placeholder="Fish Name"
                    onChange={(e) =&gt; this.handleChange(e, key)} /&gt;
                  &lt;input type="text" name="price" value={fish.price} placeholder="Fish Price"
                    onChange={(e) =&gt; this.handleChange(e, key)} /&gt;
                  &lt;select type="text" name="status" value={fish.status} placeholder="Fish Status"
                    onChange={(e) =&gt; this.handleChange(e, key)}&gt;
                    &lt;option value="available"&gt;Fresh!&lt;/option&gt;
                    &lt;option value="unaivilable"&gt;Sold Out!&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;textarea type="text" name="desc" value={fish.desc} placeholder="Fish Desc"
                    onChange={(e) =&gt; this.handleChange(e, key)}&gt;&lt;/textarea&gt;
                  &lt;input type="text" name="image" value={fish.image} placeholder="Fish Image"
                    onChange={(e) =&gt; this.handleChange(e, key)}/&gt;
                  &lt;button onClick={() =&gt; this.props.removeFish(key)}&gt;Remove Fish&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  
      render() {
        const logout = &lt;button&gt;Log out!&lt;/button&gt;
  
        if(!this.state.uid) {
          return &lt;div&gt;{this.renderLogin()}&lt;/div&gt;
        }
        if(this.state.uid !== this.state.owner) {
          return(
            &lt;div&gt;
              &lt;p&gt;Sorry, you are not the owner of this store!&lt;/p&gt;
              {logout}
            &lt;/div&gt;
          )
        }
          return(
              &lt;div&gt;
                  &lt;h2&gt;Inventory&lt;/h2&gt;
                  {logout}
                  {Object.keys(this.props.fishes).map(this.renderInventory)}
                  &lt;AddFishForm addFish={this.props.addFish} /&gt;
                  &lt;button onClick={this.props.loadSamples}&gt;Load Sample Fishes&lt;/button&gt;
              &lt;/div&gt;
  
          )
      }
  }
  
  Inventory.propTypes = {
  updateFish: PropTypes.func.isRequired,
  fishes: PropTypes.object.isRequired,
  removeFish: PropTypes.func.isRequired,
  addFish: PropTypes.func.isRequired,
  loadSamples: PropTypes.func.isRequired,
  storeId: PropTypes.string.isRequired
  }
  </code></pre>
  
  <p>Also firebase object as base if needed</p>
  
  <pre><code>import Rebase from 're-base';
  import * as firebase from 'firebase';
  
  const app = firebase.initializeApp({
    apiKey: "AIzaSyC1UGLssKKLkKvYRp02zYVpM1-D88czp7I",
    authDomain: "catch-of-the-day-ethan-fie.firebaseapp.com",
    databaseURL: "https://catch-of-the-day-ethan-fie.firebaseio.com",
    projectId: "catch-of-the-day-ethan-fie",
    storageBucket: "catch-of-the-day-ethan-fie.appspot.com",
  });
  
  const base = Rebase.createClass(app.database());
  
  export const provider = new firebase.auth.GoogleAuthProvider();
  export const auth = firebase.auth();
  export default base;
  </code></pre>