How to configure correctly Firebase with ReactJS

Question

Recently, I am learning React by following closely some tutorials but I have reached a point where my web application is stuck because I have not set up correctly the integration between ReactJS and Firebase. This is what I have so far.

var React            =  require('react');
var ReactDOM         =  require('react-dom');
var ReactFire        =  require('reactfire');
var Firebase         =  require('firebase');
var FirebaseAPIKey   =  require('xxxx-xxxx');
var rootURL          =  'https://fiery-torch-xxxx.firebaseio.com/';

var App = React.createClass({

mixins : [ReactFire],

componentWillMount : function(){
this.bindAsObject(Firebase.initializeApp(rootURL +'items/'),'items',FirebaseAPIKey);
},

render: function() {    
return <h1>how are you doing? Are you okay?</h1>
  }
});

var element = React.createElement(App, {});
ReactDOM.render(element, document.querySelector('.container'));

As you can see, I am using the version of FireBase 3.2.1 with ReactJS 15.2.0 but every time I run this web app I end up with the error that says my API Key is invalid. Any example that anyone can provide me to set up correctly this integration would be enormously appreciated ;)

Michael Bleigh · Accepted Answer · 2016-07-27 01:27:05Z

1

It looks like you're trying to initialize the SDK with an outdated 2.x style. The correct way now is:

var firebase = require('firebase');

var config = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com",
  storageBucket: "bucket.appspot.com",
};

firebase.initializeApp(config);
var ref = firebase.database().ref('items');

I'd suggest taking a look at the web getting started guide and going from there.

answered Jul 27, 2016 at 1:27

Michael Bleigh

26.4k2 gold badges83 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juan L Over a year ago

how do you avoid being loaded more than once?....I'm facing this issue stackoverflow.com/questions/39736739/…

Collectives™ on Stack Overflow

How to configure correctly Firebase with ReactJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related