目次
Firebaseにログインして新しいプロジェクトを作ったらプロジェクト概要ページが表れます。概要ページにある設定アイコンにクリックしてからプロジェクト設定にクリックしてください。
アプリセクションまでスクロールして</> (web app)を選択してください。名前をつけてRegister Appにクリックしてください。Firebaseはそのあとコンフィグヴァリアブルを作ります。
今はReactプロジェクトに以下のコマンドを実行してFirebase SDKをインストールしてください。
npm install firebase
utilsというフォルダを作ってそのフォルダの中にfirebase.jsというファイルを作ってください。firebase.jsファイルにはFirebaseのそのコンフィグヴァリアブルをコピーペーストしてください。
今は以下のコードを追加します。このコードはファイルにデータベースを修得するためです。
import { getDatabase } from “firebase/database”;
データベースを初期化します。
export const db = getDatabase(app);
firebase.jsファイルは以下のようになります。
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
const firebaseConfig = {
apiKey: "*****",
authDomain: "*****",
databaseURL: "*****",
projectId: "*****",
storageBucket: "*****",
messagingSenderId: "*****",
appId: "*****",
measurementId: "*****",
};
const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);
これでfirebase.jsはアプリ内のどこでも使用できます。アプリにはこのファイルとFirebaseのいろいろメソッドをインポートする必要になります。
import { db } from “../../utils/firebase”;
import { onValue, ref } from “firebase/database”;
結局私たちのコードは以下のようになります。
import React, { Suspense, useEffect, useState } from "react";
import Styles from "./Projects.module.scss";
import { db } from "../../utils/firebase";
import { onValue, ref } from "firebase/database";
import Project from "../../components/Project/Project";
function Projects() {
const [projects, setProjects] = useState([]);
useEffect(() => {
const query = ref(db, "projects");
return onValue(query, (snapshot) => {
const data = snapshot.val();
if (snapshot.exists()) {
Object.values(data).map((project) => {
setProjects((projects) => [...projects, project]);
});
}
});
}, []);
return (
<div className={Styles.projects}>
{projects.map((project, index) => (
<Project {...project} key={index} />
))}
</div>
);
}
export default Projects;
それでFirebaseリアルタイムデータベースをReactアプリに接続できるようになりました。
