Install:

npm i --save firebase // v3.2.1

Config Firebase:

First we need to require Firebase:

import firebase from 'firebase';

Then in the component constructor, we need to init Firebase:

    constructor(props){
super(props);
// Initialize Firebase
var config = {
apiKey: "<api_key>",
authDomain: "<authDomain>",
databaseURL: "<databaseURL>",
storageBucket: "<storageBucket>",
};
firebase.initializeApp(config);
}

The config you can easily get from the your Firebase App page.

Create new node: set()

    writeUserData(userId, name, email, imageUrl) {
firebase.database().ref('users/' + userId).set({
username: name,
email: email,
profile_picture : imageUrl
});
} // calling
this.writeUserData(, "Zhentian Wan", 'answer881215@gmail.com', null);

Then one node will be created in the "users" node, uid is "1".

Create new Child node: push()

    appendOneMoreUser(name, email, imageUrl){
let ref = firebase.database().ref().child('users').push({
username: name,
email: email
});
this.updateMe("Yoona", "yoona.only@gmail.com", ref.key);
} // calling
this.appendOneMoreUser("Yuri", 'yuri.only@gmail.com', null);

So under "users" node, we want to append one new node, the uid will be generated randomly.

The "ref" object contains "key" prop which ref to the uid in the database.

Update one node: update()

    updateMe(name, email, key){
const update = {
username: name,
email
};
let ref = firebase.database().ref('users/' + key).update(update)
.then((res)=>{
console.log("Data has been updated ");
});
} // calling:
const ref = firsebase.database().ref().child('users').push(user);
this.updateMe("Yoona", "yoona.only@gmail.com", ref.key);

update() and set() methods both return Promise. So you can chaining .then() onto it.

Delete node: remove()

    deleteMe(){
firebase.database().ref('users/1').remove();
}

Delete the uid = 1 user.

[React Native + Firebase] React Native: Real time database with Firebase -- setup & CRUD的更多相关文章

  1. Native VS React Native VS 微信小程序

    随着React Native和 微信小程序的出现,Native一家独大的局面出现裂痕,很多小公司使用已经正在着手微信小程序和React Native了,我公司就已经走上React Native之路.那 ...

  2. React Native & react-native-web-player & React Native for Web

    React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...

  3. React Native之React速学教程(下)

    概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...

  4. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  5. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  6. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  7. WHAT IS THE DIFFERENCE BETWEEN REACT.JS AND REACT NATIVE?

    Amit Ashwini - 09 SEPTEMBER 2017 React.js was developed by Facebook to address its need for a dynami ...

  8. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  9. React源码 React.Component

    React中最重要的就是组件,写的更多的组件都是继承至 React.Component .大部分同学可能都会认为 Component 这个base class 给我们提供了各种各样的功能.他帮助我们去 ...

  10. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

随机推荐

  1. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.3.7

    For every matrix $A$, the matrix $$\bex \sex{\ba{cc} I&A\\ 0&I \ea} \eex$$ is invertible and ...

  2. Peer to Peer File Sharing Through WCF

    http://www.codeproject.com/Articles/614028/Peer-to-Peer-File-Sharing-Through-WCF https://github.com/ ...

  3. codeforces 671C Ultimate Weirdness of an Array 线段树+构造

    题解上说的很清楚了,我照着写的,表示膜拜题解 然后时间复杂度我觉得应该是O(nlogn),虽然常数略大,预处理和倒着扫,都是O(nlogn) #include <stdio.h> #inc ...

  4. 取小数点后三位的方法(js)

    使用js取小数点后三位的方法,我觉得这个方法最好 Math.round(num*100)/100 还有其他方法: http://hi.baidu.com/yansueh/item/f026d8d759 ...

  5. WSGI和PASTE

    WSGI就是一个标准,WSGI server就是实现了这个标准的一个容器.这个标准类似于如下的东东: 1 2 3 4 5 6 7 8 9 10 11 from wsgiref.simple_serve ...

  6. C程序内存分配

    在多任务操作系统中的每一个进程都运行在一个属于它自己的内存沙盘中.这个沙盘就是虚拟地址空间(virtual address space),在32位模式下它总是一个4GB的内存地址块.这些虚拟地址通过页 ...

  7. 五个小例子教你搞懂 JavaScript 作用域问题

    众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者 ...

  8. East Central North America Region 2015

    E 每过一秒,当前点会把它的值传递给所有相邻点,问t时刻该图的值 #include <iostream> #include <cstdio> #include <algo ...

  9. codeforce 609A - USB Flash Drives

    排序水题 #include<iostream> #include<cstdlib> #include<cstdio> #include<algorithm&g ...

  10. uva 11995 I Can Guess the Data Structure stack,queue,priority_queue

    题意:给你n个操做,判断是那种数据结构. #include<iostream> #include<cstdio> #include<cstdlib> #includ ...