2016-07-27 158 views
0

最近,我通過密切關注一些教程學習了React,但由於我沒有正確設置ReactJS和Firebase之間的集成,所以我的Web應用程序被卡住了。這是我迄今爲止所擁有的。如何使用ReactJS正確配置Firebase

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')); 

正如你所看到的,我使用的火力3.2.1的版本15.2.0 ReactJS但我每次運行這個web應用程序我結束了,說我的API密鑰無效的錯誤。任何人都可以向我提供正確設置該集成將大大讚賞任何例子)

回答

1

它看起來就像你試圖用一個過時的2.x風格初始化SDK。現在正確的方法是:

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'); 

我建議在web getting started guide考慮看看,並從那裏去。

+0

你如何避免被加載不止一次?....我面對這個問題 http://stackoverflow.com/questions/39736739/reactjs-app-authentication-firebasefirebaseui-uncaught-error-firebase -app-南 – Juan