Reactとfirebase

前提条件

・reactが使える状態である。

・firebaseを登録済み。

1.firebaseのプロジェクトの作成

プロジェクトを作成します。すでにある方は飛ばしてください。 1.プロジェクトの作成

2.アナリティクス設定 今回不要なので無しにします。

3.firebaseconfigの確認 登録にconfig情報が表示されますがその後はここで確認することができます

Reactで使う

firebase npm install

1.firebaseモジュールをインストールします。

npm install --save firebase

2.firebase用のjsを作成 firebase.jsとしていますが、なんでもいいです。 3.firebaseのimport 先ほど作成したfirebase.jsに情報を記入します。と言ってもコピペするだけで使用できますが...

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyB1b3GUOQuGEIOPNDENIO",
  authDomain: "hooooooooooooooooooghwioaeio",
  databaseURL: "https://ddddddd",
  projectId: "accountDDDDDD",
  storageBucket: "accountdddddd",
  messagingSenderId: "11111111111",
  appId: "1:11111111111:web:4490gji429g-jpss"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

4.firestore databseを使用する ここが少し大変だった。firebase v8 とv9があり、2022年5月の現時点ではデフォルトではv9になっています。 今回v9を使用しています

import { initializeApp } from "firebase/app";
import {getFirestore} from "firebase/firestore";//<-これを追加
//import {getAuth} from "firebase/auth"必要であれば


//const app = initializeApp(firebaseConfig); <-これを以下のように変更
initializeApp(firebaseConfig);

//export const auth = getAuth ();必要であれば
export const storage = getFirestore();//<-これを追加。

reactの下準備が終わりました。結構長い。

firestore Databaseの追加

ここでテスト用にデータを追加しました。左のコレクション名と右のフィールドを主に使用するので意識しておいてください。 私の場合コレクションをsampleに設定しました。

reactで実際に読み込む

App.jsにコードを書き書きしていきます。 1.import

import * as React from "react"
import { useState } from 'react';
import { Routes, Route, Link } from 'react-router-dom';
//ここから
import {storage} from './firebase';//上で作成したfirebase.jsのexport storageをimportする
import {collection,getDocs} from "firebase/firestore";//これがデータを取得するために必要になります。

2.取得 実際に必要な処理は

1. 1.firebaseのconfig情報をもとにコレクションにアクセスする。
2. 2.getDocsでqueryを取得する
3. 3.forechで中身のdataを取得する。 それではコードの中身を。先ほどのApp.jsファイルの中です。

  const btne = async(e)=>{
   const  oec = await collection(storage,"sample");
   getDocs(oec).then((querySnapshot)=>{
     querySnapshot.docs.forEach((doc)=>{console.log(doc.data())});
   })
  }

     //............
     //どこかにボタンを追加しておきます。
     <button onClick={btne}>hotoke</button>

こうするとデータを取得できます。実際にコンソールで見た場合はこんな感じです。

実際に使用する時は

firebaseConfigをローカル環境にします ・ローカル環境に追加するときはルートディレクトリ（.gitignore、srcフォルダーがある場所）に.envファイルを追加して使用します。
.envファイルの一部
REACT_APP_FIREBASE_API_KEY="AI******E"

実際に困った事

まずv8とv9の取得方法が違い、調べてもv8が多くヒットしてしまったので使い方が分からなかった。 また、collection(storage,"sample")で中身を見ても正常に取れているか、間違っているのかが分からなかった

  const btne = async(e)=>{
   const  oec = await collection(storage,"sample");
   console.log(oec)
  }

そしてfirebase databaseとrealtime databseがあるのでどっちの説明をしているのかを探しづらかった。

おまけ

プロジェクトの削除はここでできます。