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

Question

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

我参加了React for Beginners 课程（我真的很喜欢，并且从中学到了很多东西）并且通过课程我真的对Firebase 很感兴趣。我相信我了解同步和使用 re-base、procs 和 states 的本质，但是在搜索示例应用程序时，我似乎无法找到基本的 CRUD 应用程序。似乎应该有一个类似这样的简单示例，但我似乎找不到。

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

我已经开始编写原型，如下面的 2 个要点； App.js 是容器，AnnoucementsList.js 保存公告。只是想知道是否还有其他示例，以及应用程序是否必须以这种方式进行 CRUD。

如果有人可以分享您构建的东西或指向源的链接，我将不胜感激。

Answer 1

您是否在寻找类似待办事项应用的东西？https://github.com/firebase/reactfire/tree/master/examples/todoApp

Firebase 有一个 reactfire 库，其中包含有关如何使用 reactfire 的信息以及两个示例的链接：https://www.firebase.com/docs/web/libraries/react/

这篇博文还介绍了使用 react 和 firebase 的基础知识：https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html

Answer 2

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

1. 安装官方的 Create React App Bootstrapper:https://github.com/facebookincubator/create-react-app
2. 将 App.js 中的代码替换为以下内容
3. 使用 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;

Answer 3

我正在查看一个很棒的待办事项应用程序。尝试在这个地址打开两个窗口：https://github.com/dankoknad/todo-firebase