ReactでFireStoreにデータ登録、取得して表示

f:id:fedora9:20210725144717p:plain

f:id:fedora9:20210725143937p:plain

FireStoreの読み書きを無効化するには
セキュリティルールで、allow read, write: if false;
Firebaseをとりあえず触ってみる人向けメモ - 適当おじさんの適当ブログ

FireStoreでコレクションを開始
コレクションIDをarticlesにする
title,subtitle,textをstringで追加

src/firebase/components/base.js

import app from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

app.initializeApp(firebaseConfig);

export default app;
export const db = app.firestore();

src/page/firestore/App.js

import React from 'react';
import app, { db } from '../firebase/components/base';
import { Link } from 'react-router-dom';

class App extends React.Component{

    //登録ボタンが押されたら
    handleSubmit = (values) => {
        const docId = db.collection("articles").doc().id;
        db.collection("articles").doc(docId).set({
            title: "aaa",
            subtitle: "bbb",
            text: "ccc",
        });

        //登録後、Topに移動(登録ページとは別のページにする)
        this.props.history.push("/react-pages/");
    }

    render(){
      return (
        <div>
          <form onSubmit={this.handleSubmit} style={{marginTop: "4em"}}>
              <textarea
                type="text"
                id="text"
              />
              <button type="submit">
                send
              </button>
            </form>
        </div>
        )
    } 
}

ReactとFirebase(CloudFirestore)を使って独り言WEBアプリをつくる | 株式会社InitialSite

新：React + FirestoreでCRUD（基礎編） - Qiita

f:id:fedora9:20210726222438p:plain

テキストエリアに入力したデータを登録

【Next.js】Firestoreにデータの登録（挿入）をする - Laravelとねころっけくん5.8

src/page/firestore/App.js

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            amount: 0,
            text: '',
            uid: ''
        };
    }


    registerPost = async (evt) => {
        evt.preventDefault();
        const date = app.firestore.Timestamp.now();
        db.collection("expenseItems").add({
            amount: this.state.amount,
            date: date,
            text: this.state.text,
            uid: this.state.uid,
        })
        .then(function() {
            console.log("Document successfully written!");
        })
        .catch(function(error) {
            console.error("Error writing document: ", error);
        });

        //登録後、Topに移動
        this.props.history.push("/react-pages/");
    }

     onChangeAmount = (evt) => {
        this.setState({ amount: evt.target.value });
    }

     onChangeText = (evt) => {
        this.setState({ text: evt.target.value });
    }

     onChangeUid = (evt) => {
        this.setState({ uid: evt.target.value });
    }


          <form onSubmit={this.registerPost} style={{marginTop: "4em"}}>
              amount: <textarea
                 name="amount"
                 value={this.state.amount}
                 onChange={this.onChangeAmount}>
              </textarea><br/>
              text: <textarea
                 name="text"
                 value={this.state.text}
                 onChange={this.onChangeText}>
              </textarea><br/>
              uid: <textarea
                 name="uid"
                 value={this.state.uid}
                 onChange={this.onChangeUid}>
              </textarea><br/>
              <button type="submit">
                send
              </button>
            </form>

f:id:fedora9:20210726231727p:plain

React.js - Firestoreから取得したデータをReactで表示させたい｜teratail

Amountの合計を表示

f:id:fedora9:20210727002638p:plain

src/page/firestore/index.js

class Index extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      items: [],
      expenseTotal: 0
    };
  }

  async componentDidMount() {
　〜省略〜

    // Amount合計
    items.forEach(doc => {
      this.setState({ expenseTotal: this.state.expenseTotal + Number(doc.amount) });
    });

合計: {Number(this.state.expenseTotal).toLocaleString()}<span> 円</span><br />