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

Posted 2023-02-22

【中文标题】是否有使用 react.js 和 firebase 的简单 CRUD 示例应用程序？

【英文标题】：Is there a simple CRUD example app using react.js and firebase?

【发布时间】：2016-05-31 07:53:27

【问题描述】：

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

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

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

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

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

【问题讨论】：

您是否编写过任何使用 Firebase 的代码？也许从那里开始。 React 集成不应该与没有 React 的应用程序有任何不同。通常，每当您需要将一些数据挂钩到 React 中时，您只需使用像 componentDidMount 或 constructor 这样的生命周期挂钩，如果您正在使用 class

感谢您的提问。是的，我已经开始了。不确定我是做错了什么还是只是不理解，但我正在使用 stat sync 来编辑项目。也许我的思想还没有适应反应方式，但我觉得这太过分了。例如，这里有两个要点，App.js（应用程序容器）和 AnnouncmentsList.js（公告列表）。只是寻找一个如何在一个完整的循环过程中做这种事情的例子。

应用程序：gist.github.com/imarichardson/e1f3c9dfe86750d003e1.js

公告：gist.github.com/imarichardson/61511debaedc9130ff6e.js

@imarichardson 我在下面提供的答案是您想要的吗？如果不是，您能否提供更多详细信息？

【参考方案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

【讨论】：

感谢您的入住。我看过那个 todo 应用程序。问题是它似乎不是我在现实生活中会做的事情。完整的待办事项集合存储在状态中。例如，如果我有一个包含 1000 个联系人的联系人管理器应用程序，每个联系人都有 20 个不同的字段，我不想将所有这些都存储在 state 中。我只是没有找到可以证明这一点的真实商业应用程序。在流星中，我会发布和订阅以获取特定信息，然后对 CRUD 联系人有适当的方法。我没有在 Firebase 和 React 中找到这些类型的示例。感谢您的提问。

@imarichardson 用 20 个不同的字段存储 1000 个联系人在 Firebase 中是小孩子的游戏 - 它可以轻松处理 100 倍于数十（数百）个同时连接的数据量。我真的建议浏览 Firebase 教程并制作一个小应用程序来感受 Firebase。这个答案很中肯。

不确定我的 cmets 或问题下的细节是否清楚，但我实际上正在这样做。我来自流星和轨道世界，有初学者应用程序和显示更多的应用程序。抱歉，如果不清楚，但我已经看过这些。我只是在寻找提供我正在寻找的 CRUD 数据的更详细的业务案例示例。

第一个github链接失效

【参考方案2】：

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

安装官方的 Create React App Bootstrapper:https://github.com/facebookincubator/create-react-app 将 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"  />
          <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;

【参考方案3】：

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