I am following tutorial from Tyler McGinnis on using firebase on react, but I cannot get my app to sync to my firebase. The tutorial was originally done not on ES6. This is the meat of the code:
var Profile = React.createClass({
mixins: [ReactFireMixin],
getInitialState: function(){notes: ['some','notes']},
componentDidMount: function(){
this.ref = new Firebase('https://github-note-taker.firebaseio.com/');
var childRef = this.ref.child(this.props.params.username);
this.bindAsArray(childRef, 'notes');
}
...
//render
<Notes username={this.props.params.username} notes={this.state.notes} />
This will sync notes
to FB database and renders note array
I have a firebase database populated with some amount of data. When I access the page, my Note
component is only displaying the initial state, not the firebase data. I am new at Firebase. After researching, I came up with ES6 version of it:
var base = Rebase.createClass({
apiKey: ...,
authDomain: ...,
databaseURL: ...,
storageBucket: ...,
messagingSenderId: ...
});
class Profile extends React.Component{
constructor(props){
super(props);
this.state = {
notes: [1,2,3],
}
}
init(){
this.ref = base.syncState(`/profile/${this.props.routeParams.username}`, {
context: this,
asArray: true,
state: 'notes'
});
helpers.getGithubInfo(this.props.routeParams.username)
.then((dataObj) => {
this.setState({
bio: dataObj.bio,
repos: dataObj.repos
});
});
}
componentDidMount(){
this.init();
}
componentWillUnmount(){
base.removeBinding(this.ref);
}
componentWillReceiveProps(){
base.removeBinding(this.ref);
this.init();
}
//render
<Notes notes={this.state.notes} />
I am sure I miss something, but I am not sure what it is. How can I use ES6 to sync Firebase to my React App?