Reactでデータベースを作りたい

Reactがわからないことだらけなので備忘録です。
Reactで現在アプリ開発をしていたのですが、「DBに保存する方法」がわかりませんでした。いつもRailsで開発をしているのでRailsと同じようにReact単体でできるだろうと思っていたら大間違いだったようです。

Reactはフロントエンド開発向け

まずReactはUIコンポーネント作成に活用されるJavaScriptライブラリです。ユーザインタフェース構築に向いているわけですね。そのためバックエンドなデータベースを作成する機能だったりは提供していないようです。
React：ユーザインターフェース構築のためのJavaScriptライブラリ

Reactでデータベースを作るには

サーバーサイドのAPIを使用する

Reactアプリケーションは通常、サーバーサイドのAPIエンドポイントを利用してデータベースと通信します。サーバーサイドでデータベースにアクセスするためのエンドポイントを作成し、Reactアプリケーションはこれらのエンドポイントを利用してデータを取得・送信します。

サードパーティのデータベースサービスを使用する

Firebase、AWS、DynamoDB、MongoDBなどのサードパーティのデータベースサービスを利用することで、Reactアプリケーションは直接データベースにアクセスできます。これらのサービスは通常クラウド上にホストされており、APIを介してデータベースとやり取りします。

実装

今回はFirebaseを利用して、Firebase上に保存したGoalsテーブルのデータをGoals.jsで表示することを実装します。
ディレクトリ構造は以下の通りです。

- src
    - components
        - Goals.js
    -FirebaseConfig.js 

FirebaseConfig.js

// FirebaseConfig.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  // Firebaseの設定情報
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// db変数をエクスポート
export { db };

FirebaseConfig.jsをsrcの中に作成し、上記のコードを書きます。
export { db };で他のファイルでdb変数を使用したいのでしっかりdbをエクスポートします。

Goals.js

import { db } from "../FirebaseConfig";
import { collection, addDoc, getDocs } from "firebase/firestore";
import { useState, useEffect } from "react";

const usersCollection = collection(db, "Goals");

const GoalsList = () => {
  const [goals, setGoals] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const goalsSnapshot = await getDocs(usersCollection);
      const goalsData = goalsSnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
      setGoals(goalsData);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>Goals List</h2>
      <ul>
        {goals.map((goal) => (
          <li key={goal.id}>
            <strong>{goal.title}</strong>
            <p>{goal.introduction}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default GoalsList;

Goals.jsをcomponentsの中に作成し、上記のコードを書きます。
このコードによってFirebaseに保存されているデータをGoals.jsで表示することができました。