react.js ve firebase kullanarak basit bir CRUD örnek uygulaması var mı?

Question

Yaklaşık 8 yıllık Rails Development gibi bir şeyden sonra, yaklaşık bir yıl önce meteor.js ile çalışmaya başladım ve geçen aydan itibaren react.js ile çalışmaya başladım.

React for Beginners kursundan (gerçekten çok hoşlandığım ve çok şey öğrendiğim) kursumdan geçtim ve kurs yolu ile Firebase ile ilgileniyorum. Senkronizasyonun doğasını ve re-base, procs ve state'leri kullanmayı öğrendiğime inanıyorum, ancak örnek uygulamalar için arama yaparken, basit bir CRUD uygulaması bulamıyorum. Böyle bir şey için basit bir örnek olmalı gibi görünüyor ama bir tane bulamıyorum.

Örnek bir blog uygulaması söz konusu olduğunda, bir koleksiyondan veri oluşturan, okuyan, güncelleştiren ve silen bir çıplak kemikleri uygulaması arıyorum. Pastacılıkta kimliklendirme ve kimlik doğrulama yapılır.

Aşağıdaki 2 adımda olduğu gibi bir prototip kodlamaya başladım; App.js kapsayıcıdır ve AnnoucementsList.js duyuruları tutar. Sadece başka örnekler olup olmadığını merak ediyorum ve uygulama bu şekilde CRUD yapmak zorundaysa.

Herhangi bir kişi, paylaştığınız veya paylaştığınız bir şeyi paylaşıyorsa bunu çok takdir ediyorum.

Answer 1

Bir todo uygulaması gibi bir şey mi arıyorsunuz? https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html

Answer 2

I: https://www.firebase.com/docs/web/libraries/react/

Bu blog yayını da Firebase reaksiyona kullanmanın temellerini kapsamaktadır: https://github.com/firebase/reactfire/tree/master/examples/todoApp

Firebase iki örneklere nasıl kullanılacağı hakkında bilgi reactfire yanı sıra bağlantıları içeren bir reactfire kütüphaneye sahiptir Bu eski bir soru olduğunu biliyorum, ama son zamanlarda aynı vardı ve tatmin edici bir cevap bulamadı. Gerçekten basit bir CRUD yaptım (bu, Güncelleştirme özelliğini kaçırmayan gerçek bir CRUD'dir). https://github.com/facebookincubator/create-react-app

Firebase Konsolundan App

Kod adresinin ayrıntıları ile aşağıdaki

güncelleme ile App.js config bölümünü kodu değiştirin:

1. görevlisine yükleyin oluşturma Uygulama Bootstrapper tepki .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

Bakıyorum harika bir yapılacaklarim uygulaması var. Bu adreste iki pencere açmayı deneyin: https://github.com/dankoknad/todo-firebase