Firebase(バージョン9以降) x React 連携方法

FirebaseとReactを連携させたアプリを作る際のセットアップについてまとめました。
Firestore からデータ取得できるまでを記載します。
Firebase バージョン9 以降の記述方法になります。

React セットアップ

プロジェクト作成

プロジェクトを作成したいフォルダに移動して以下コマンドを実行

npx create-react-app appname

カレントディレクトリに作成する場合はappname を.にする

npx create-react-app .

起動確認

Reactプロジェクトフォルダに移動し、以下コマンド実行。
localhost:3000が起動し初期画面が表示されればOK

npm start

Firebase セットアップ

予めFirebaseプロジェクトを作成しておく。
今回はpostsというコレクションを作成し、titleとtextという2つのフィールドをもったドキュメントを作成。

FirebaseSDK 追加

npm install firebase

FirebaseCLI

初回のみ

npm install -g firebase-tools

Firebase 初期化

src/firebase.js を作成
Firebaseコンソールの歯車->プロジェクトの設定->SDKの設定と構成 にConfigがあるので以下のようにそれぞれコピペする
そして、initializeApp()にわたす

// firebase.js
import { initializeApp } from "firebase/app";
const firebaseConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  projectId: "xxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx",
  appId: "xxxxx",
};

const app = initializeApp(firebaseConfig);

Cloud Firestore 初期化

src/firebase.js に以下を追記

import { getFirestore } from "firebase/firestore";

const db = getFirestore(app);
export default db;

dbをエクスポートしたので使いたいjsファイルにインポートする

// ex. App.js
import db from "./firebase"

連携確認

// App.js
import { collection, onSnapshot, } from "firebase/firestore";
import { useEffect, useState } from "react";
import "./App.css";
import db from "./firebase";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const postData = collection(db, "posts"); //第二引数はコレクション名

    onSnapshot(postData, (querySnapshot) => {
      setPosts(querySnapshot.docs.map((doc) => ({ ...doc.data() })));
    });
  }, []);

  return (
    <div className="App">
      <div>
        {posts.map((post) => (
          <div key={post.title}>
            <h1 className="title">{post.title}</h1>
            <p>{post.text}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

Firestoreのデータが取得され、表示できていれば連携完了。

参考

Cloud Firestore スタートガイド