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. 打造自己的reset.css

    http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言 每每有 ...

  2. file的getPath getAbsolutePath和getCanonicalPath的区别

    转自:http://www.blogjava.net/dreamstone/archive/2007/08/08/134968.html file的这几个取得path的方法各有不同,下边说说详细的区别 ...

  3. 【转】iOS 宏(define)与常量(const)的正确使用-- 不错

    原文网址:http://www.jianshu.com/p/f83335e036b5 在iOS开发中,经常用到宏定义,或用const修饰一些数据类型,经常有开发者不知怎么正确使用,导致项目中乱用宏与c ...

  4. 【jQuery日期处理】两个时间大小的比较

    function checkEndTime(){ var startTime=$("#startTime").val(); var start=new Date(startTime ...

  5. Java Script 正则表达式的使用示例

    一.语法 1.1 在JS中的使用代码 var myregex = new RegExp("^[-]?[0-9][0-9]{0,2}\\.[0-9]{5,15}\\,\s*[-]?[0-9][ ...

  6. 房租管理小软件(六):通用功能包括时间,效验,MD5加密,XML 操作

    1.时间相关 public static DateTime getNow() { MyFZDataContext dataContext = MyFZDataContext.getDataContex ...

  7. 奇异秀App:奇异秀秀奇异,用大头视频来拜年

    奇异秀APP是一款最新神奇的娱乐视频制作的手机应用软件,含有换头视频和特效视频两大特色功能,制作简单,效果酷炫,一键生成: 换头视频中可以由用户上传个人头像制作各种搞笑好玩的大头视频,有神曲.搞笑.节 ...

  8. [转载]su认证失败

    Ubuntu 安装后,root用户默认是被锁定了的,不允许登录,也不允许 "su" 到 root.有人说这是个不好的实践,特别是对于服务器来说.我觉得对于桌面用户来说,这样安全性更 ...

  9. 稀疏表示(sparse representation)和字典学习

    近十几年来,稀疏(sparsity)已经成为信号处理及其应用领域中处于第一位的概念之一.近来,研究人员又致力于过完备(overcomplete)信号表示的研究.这种表示不同于许多传统的表示.因为它能提 ...

  10. 2.1CUDA-Thread

    在HOST端我们会分配block的dimension, grid的dimension.但是对应到实际的硬件是如何执行这些硬件的呢? 如下图: lanuch kernel 执行一个grid. 一个Gri ...