Javascript 是否有使用react.js和firebase的简单CRUD示例应用程序？

在经历了将近8年的Rails开发之后，大约一年前我决定开始使用meteor.js，从上个月开始，我开始使用react.js

我已经完成了这门课程（我真的很喜欢，也从中学到了很多），顺便说一下，我对这门课程非常感兴趣。我相信我已经理解了同步和使用re-base、procs和State的本质，但是在搜索示例应用程序时，我似乎找不到基本的CRUD应用程序。似乎应该有这样一个简单的例子，但我似乎找不到

在一个示例博客应用程序中，我正在寻找一个可以从集合中创建、读取、更新和删除数据的基本应用程序。分页和身份验证将是锦上添花

我已经开始编写一个原型，如下面的两个GIST；是容器并保存公告。只是想知道是否有其他的例子，如果应用程序必须这样做CRUD

---

如果有人能分享你构建的东西或链接到某个源代码，我将不胜感激。

你在寻找类似todo应用程序的东西吗

Firebase有一个reactfire库，其中包含有关如何使用reactfire的信息以及指向两个示例的链接：

---

这篇博文还介绍了将react与firebase结合使用的基本知识：

我知道这是一个老问题，但我最近也遇到了同样的问题，无法找到令人满意的答案。 我已经构建了一个非常简单的CRUD（不过这是一个真正的CRUD，不缺少更新功能）

安装官方的Create React应用程序引导程序：

将App.js中的代码替换为以下代码

从Firebase控制台使用您的详细信息更新配置部分

App.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;

//eslint禁用下一行
从“React”导入React，{Component}；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“firebase”导入*作为firebase；
变量配置={
//在此处从FIREBASE控制台复制区块
};
firebase.initializeApp（配置）
类UpdateableItem扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
文本：props.text，
金额：（props.amount==null）？0:props.amount，
货币：（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）；
}
项目变更（e）{
this.setState（{[e.target.name]：e.target.value}）
}
handleUpdateItem（e）{
e、 预防默认值（）；
if（this.state.text&&this.state.text.trim（）.length！==0）{
this.dbItems.child（this.props.dbkey）.update（this.state）；
}
}
render（）{
返回(
名称


数量


通货
DKK
欧元
美元
拯救
);
}
}
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
项目：[]，
newitemtext:“”
};
this.dbItems=firebase.database（）.ref（）.child（'items'）；
this.onNewItemChange=this.onNewItemChange.bind（this）；
this.handleNewItemSubmit=this.handleNewItemSubmit.bind（this）；
this.removietem=this.removietem.bind（this）；
}
componentDidMount（）{
this.dbItems.on（'value'，dataSnapshot=>{
var项目=[]；
dataSnapshot.forEach（函数（childSnapshot）{
var item=childSnapshot.val（）；
项['.key']=childSnapshot.key；
项目。推送（项目）；
});
这是我的国家({
项目：项目
});
});
}
组件将卸载（）{
this.dbItems.off（）；
}
handleNewItemSubmit（e）{
e、 预防默认值（）；
if（this.state.newitemtext&&this.state.newitemtext.trim（）.length！==0）{
这个是.dbItems.push({
text:this.state.newitemtext
});
这是我的国家({
newitemtext:“”
});
}
}
onNewItemChange（e）{
this.setState（{newitemtext:e.target.value}）；
}
removeItem（键）{
this.dbItems.child（key.remove（）；
}
render（）{
var_this=这个；
返回(
应用程序

{this.state.items.map（函数（项））{
报税表（

删除

);
})}

{'Add#'+（this.state.items.length+1）}
);
}
}
导出默认应用程序；

我正在看一个很棒的待办应用程序。尝试在此地址打开两个窗口：

---

您编写过使用Firebase的代码吗？也许从那里开始。React集成不应与没有React的应用程序有任何不同。通常，当您需要将一些数据挂接到React时，只要使用生命周期挂接，如

componentDidMount

或

constructor

，如果您使用的是

class

，谢谢您的提问。是的，我已经开始了。不确定我是否做错了什么，或者只是不理解，但我正在使用stat sync编辑项目。也许我的思维还不适应这种反应方式，但我觉得这太过分了。这里有两个GIST示例，App.js（App容器）和AnnouncmentsList.js（公告列表）。只是想找一个例子来说明如何在一个完整的循环过程中做这种事情。App:Announcements:@imarichardson是我在下面提供的答案，你在寻找什么？如果不是的话，你能提供更多的细节吗？谢谢你的登记。我看过那个todo应用程序。问题是它似乎不是我在现实生活中会做的事情。TODO的完整集合存储在状态中。例如，如果我有一个联系人管理器应用程序，它有1000个联系人，每个联系人有20个不同的字段，我就不想把所有这些都存储在状态中。我只是觉得不是真的，