是否有使用react.js和firebase的簡單CRUD示例應用程序？

Question

在經歷了將近8年的Rails開發之後，大約一年前，我決定開始使用meteor.js，截至上個月，已經開始使用react.js。

我已經通過了React for Beginners課程（我真的很喜歡它，並且從中學到了很多東西），並且通過課程的方式我真的對Firebase感興趣。我相信我理解同步和使用重新基礎，特效和狀態的本質，然而在搜索示例應用程序時，我似乎無法找到基本的CRUD應用程序。似乎應該有一個這樣的事情的簡單例子，但我似乎無法找到一個。

對於示例博客應用程序，我正在尋找一個可以創建，讀取，更新和刪除集合中的數據的應用程序。分頁和認證將是錦上添花。

我已經開始編寫一個原型，就像下面兩個要點一樣; App.js是容器，AnnoucementsList.js持有公告。只是想知道是否有其他的例子，如果應用程序必須這樣做CRUD。

如果任何人都可以分享您建立或鏈接到源的東西，我會很感激。

Answer 1

您是否正在尋找像todo應用程序的東西？ https://github.com/firebase/reactfire/tree/master/examples/todoApp

火力地堡有reactfire庫，其中包括有關如何使用reactfire以及信息鏈接到兩個例子：https://www.firebase.com/docs/web/libraries/react/

該博客文章還介紹了使用與火力反應的基本原理：https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html

Answer 2

我知道這是一個古老的問題，但我最近有相同的，無法找到一個令人滿意的答案。 我已經構建了一個非常簡單的CRUD（這是一個真正的CRUD，不缺少更新功能）。

1. 安裝官方創建陣營應用引導程序：https://github.com/facebookincubator/create-react-app
2. 與您的詳細信息，從火力地堡控制檯

代碼應用程序的代碼替換在App.js具有以下

更新的配置部分.js：

// eslint-disable-next-line 
import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import * as firebase from 'firebase'; 

var config = { 
    //COPY THE CHUNK FROM FIREBASE CONSOLE IN HERE 
    }; 

firebase.initializeApp(config) 

class UpdateableItem extends Component { 
    constructor (props) { 
    super(props); 
    this.state = { 
     text: props.text, 
     amount: (props.amount == null) ? 0 : props.amount, 
     currency: (props.currency == null) ? 'DKK' : props.currency 
    }; 
    this.dbItems = firebase.database().ref().child('items'); 

    this.itemChange = this.itemChange.bind(this); 
    this.handleUpdateItem = this.handleUpdateItem.bind(this); 
    } 

    itemChange(e) { 
    this.setState({ [e.target.name]: e.target.value }) 
    } 

    handleUpdateItem(e) { 
    e.preventDefault(); 
    if (this.state.text && this.state.text.trim().length !== 0) { 
     this.dbItems.child(this.props.dbkey).update(this.state); 
    } 
    } 

    render(){ 
    return (
     <form onSubmit={ this.handleUpdateItem }> 
     <label htmlFor={this.props.dbkey + 'itemname'}>Name</label> 
     <input 
      id={this.props.dbkey + 'itemname'} 
      onChange={ this.itemChange } 
      value={ this.state.text } 
      name="text" 
     /> 
     <br/> 
     <label htmlFor={this.props.dbkey + 'itemamaount'}>Amount</label> 
     <input 
      id={this.props.dbkey + 'itemamaount'} 
      type="number" 
      onChange={ this.itemChange } 
      value={ this.state.amount } 
      name="amount" 
     /> 
     <br/> 
     <label htmlFor={this.props.dbkey + 'itemselect'}>Currency</label> 
     <select 
      id={this.props.dbkey + 'itemcurrency'} 
      value={ this.state.currency } 
      onChange={ this.itemChange } 
      name="currency" 
     > 
      <option value="DKK">DKK</option> 
      <option value="EUR">EUR</option> 
      <option value="USD">USD</option> 
     </select> 
     <button>Save</button> 
     </form> 
    ); 
    } 
} 

class App extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     items: [], 
     newitemtext : '' 
    }; 
    this.dbItems = firebase.database().ref().child('items'); 

    this.onNewItemChange = this.onNewItemChange.bind(this); 
    this.handleNewItemSubmit = this.handleNewItemSubmit.bind(this); 
    this.removeItem = this.removeItem.bind(this); 
    } 

    componentDidMount() { 
    this.dbItems.on('value', dataSnapshot => { 
     var items = []; 

     dataSnapshot.forEach(function(childSnapshot) { 
     var item = childSnapshot.val(); 
     item['.key'] = childSnapshot.key; 
     items.push(item); 
     }); 

     this.setState({ 
     items: items 
     }); 
    }); 
    } 

    componentWillUnmount() { 
    this.dbItems.off(); 
    } 

    handleNewItemSubmit(e) { 
    e.preventDefault(); 
    if (this.state.newitemtext && this.state.newitemtext.trim().length !== 0) { 
     this.dbItems.push({ 
     text: this.state.newitemtext 
     }); 
     this.setState({ 
     newitemtext: '' 
     }); 
    } 
    } 

    onNewItemChange(e) { 
    this.setState({newitemtext: e.target.value}); 
    } 

    removeItem(key){ 
    this.dbItems.child(key).remove(); 
    } 

    render() { 
    var _this = this; 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2> 
      App 
      </h2> 
     </div> 
     <ul> 
      {this.state.items.map(function(item) { 
      return ( 
       <li key={ item['.key'] }> 
       <UpdateableItem dbkey={item['.key']} text={item.text} currency={item.currency} amount={item.amount} /> 
       <a onClick={ _this.removeItem.bind(null, item['.key']) } style={{cursor: 'pointer', color: 'red'}}>Delete</a> 
       </li> 
      ); 
      })} 
     </ul> 
     <form onSubmit={ this.handleNewItemSubmit }> 
      <input 
      onChange={ this.onNewItemChange } 
      value={ this.state.newitemtext } 
      /> 
      <button>{ 'Add #' + (this.state.items.length + 1) }</button> 
     </form> 
     </div> 
    ); 
    } 
} 


export default App; 

Answer 3

我正在看一個很棒的應用程序。嘗試在這個地址打開兩個窗口：https://github.com/dankoknad/todo-firebase