Passing data from a real React app to Firebase

I have created a simple "ToDo" application that is responsive native and I would like to link to Firebase. I tried to follow the tutorials but cannot figure out how to do this in my case. I have set Firebase rules (read, write) to true, so no authentication is required. Can anyone help me and put me on the right track? Here's what I've come up with so far. The current state is shown as an example.

App.js file:

import Note from './app/components/Note';

import * as firebase from 'firebase';

const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
  databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXX"
}

const firebaseApp = firebase.initializeApp(firebaseConfig);

export default class App extends React.Component {

constructor(props) {
  super(props);

  this.noteRef = firebase.database().ref().child('note');

  this.state={
    noteArray: [{'date':'2/17/2012','note':'new'}]
  };

  this.note=[];
}

componentDidMount(){
  this.noteRef.on('child_added', (dataSnapshot)=>{
    this.note.push({id:dataSnapshot.key(), date: dataSnapshot.val(), note: 
dataSnapshot.val()});
  });
}



  render() {

let notes = this.state.noteArray.map((val, key)=>{
  return <Note key={key} keyval={key} val={val} deleteMethod={ ()=>this.deleteNote(key)}/>
});
return (
  <KeyboardAvoidingView behavior='padding' style={styles.container}>
    <View style={styles.header}>
      <Text style={styles.headerText}> Notekiip </Text>
    </View>

    <ScrollView style={styles.scrollContainer}>
      {notes}
    </ScrollView>

    <View style={styles.footer}>
      <TouchableOpacity onPress={this.addNote.bind(this)} style={styles.addButton}>
        <Text style={styles.addButtonText}>+</Text>
      </TouchableOpacity>

      <TextInput style={styles.textInput}
        onChangeText={(noteText)=> this.setState({noteText})} value={this.state.noteText}
        placeholder='Type note here' placeholderTextColor='white' underlineColorAndroid='transparent'>
      </TextInput>
    </View>

  </KeyboardAvoidingView>
);
  }
  addNote(){
    if (this.state.noteText){
      var d = new Date();
      this.state.noteArray.push({date: d.getFullYear() + '/' + (d.getMonth() 
      + 1)  + '/' + d.getDate(), 'note': this.state.noteText});
      this.setState({noteArray: this.state.noteArray})
      this.setState({noteText: ''});
    }
  }
  deleteNote(key){
    this.state.noteArray.splice(key,1);
    this.setState({noteArray: this.state.noteArray});
  }
}

      

        
        
        
      

    

Note.js file:

export default class Note extends React.Component {
  render() {
    return (
    <View key={this.props.keyval} style={styles.note}>

    <Text style={styles.noteText}>{this.props.val.date}</Text>
    <Text style={styles.noteText}>{this.props.val.note}</Text>

    <TouchableOpacity onPress={this.props.deleteMethod} style=
    {styles.noteDelete}>
      <Text style={styles.noteDeleteText}>D</Text>
    </TouchableOpacity>
  </View>
);
}
}