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

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，并没有错过更新功能）。

安装官方Create React App Bootstrapper：https://github.com/facebookincubator/create-react-app
使用以下
使用您在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

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

3 个答案: