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. poj2月题解

    竟然生日前一天poj破百,不错不错,加速前进! poj2437 由于泥泞不重叠,所以按其实左边排个序再统计一遍即可(如果不是刚好盖满就尽量往后盖) poj2435 细节bfs poj2230 求欧拉回 ...

  2. Samba 'smbcacls'命令安全绕过漏洞

    漏洞版本: Samba 4.x 漏洞描述: Bugtraq ID:66232 CVE ID:CVE-2013-6442 Samba是一款实现SMB协议.跨平台进行文件共享和打印共享服务的程序. 当使用 ...

  3. BZOJ3509: [CodeChef] COUNTARI

    3509: [CodeChef] COUNTARI Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 339  Solved: 85[Submit][St ...

  4. Java [leetcode 33]Search in Rotated Sorted Array

    题目描述: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 ...

  5. Java、JSP获得当前日期的年、月、日

    Java package com.ob; import java.text.ParseException; import java.text.SimpleDateFormat; import java ...

  6. Android学习系列(20)--App数据格式之解析Json

    JSON数据格式,在Android中被广泛运用于客户端和网络(或者说服务器)通信,非常有必要系统的了解学习.     恰逢本人最近对json做了一个简单的学习,特此总结一下,以飨各位.     为了文 ...

  7. [转] 三种Python下载url并保存文件的代码

    原文 三种Python下载url并保存文件的代码 利用程序自己编写下载文件挺有意思的. Python中最流行的方法就是通过Http利用urllib或者urllib2模块. 当然你也可以利用ftplib ...

  8. HDU 5701 中位数计数 暴力

    老题了,附上黄学长链接一发,直接改改就AC了,http://hzwer.com/1216.html #include <cstdio> #include <iostream> ...

  9. iOS7程序后台运行

    介绍 这次 iOS7 对程序后台运行进行了加强,但是仅仅是加强而已,要想像 Android 程序那样自由当然就别想了,苹果这么做主要还是出于电池使用时间考虑,但是这次的加强对大部分程序基本够用. 在介 ...

  10. longblogV1.0——我的静态博客发布系统

    longblogV1.0——我的静态博客发布系统 环境依赖: python3-markdown 作者:IT小小龙个人主页:http://long_python.gitcafe.com/电子邮箱:lon ...