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

Question

经过近8年的Rails开发之后,大约一年前我决定开始使用meteor.js,截至上个月,已经开始使用react.js了.

我已经参加了React for Beginners课程(我非常喜欢,并从中学到了很多东西)并且通过该课程我对Firebase非常感兴趣.我相信我理解同步和使用重新基础,触发器和状态的本质,但是在搜索示例应用程序时,我似乎无法找到基本的CRUD应用程序.似乎应该有一个这样的事情的简单例子,但我似乎找不到一个.

对于示例博客应用程序,我正在寻找一个简单的应用程序,用于创建,读取,更新和删除集合中的数据.分页和认证将锦上添花.

我已经开始编写原型编码,就像下面两个要点的情况一样; App.js是容器和AnnoucementsList.js成立公告.只是想知道是否有任何其他示例,以及应用程序是否必须以这种方式进行CRUD.

如果有人可以分享您构建的内容或链接到某个来源,我会非常感激.

Answer 1

你在寻找像todo app这样的东西吗？https://github.com/firebase/reactfire/tree/master/examples/todoApp

Firebase有一个reactfire库,其中包含有关如何使用reactfire的信息以及两个示例的链接:https://www.firebase.com/docs/web/libraries/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;