Firebase を利用した React アプリケーションの構築: 開発者向けの包括的なガイド

Firebase と React は、現代の Web 開発の世界でダイナミックなコンビです。 Firebase はバックエンドの複雑さを簡素化し、React は比類のないフロントエンドの効率を提供します。このガイドでは、Firebase を React アプリケーションに統合する方法を段階的に説明し、開発者に詳細な洞察を提供します。

はじめに

このチュートリアルでは、Firebase と React を使用してリアルタイム タスク管理アプリケーションを作成します。主な機能は次のとおりです:

認証: ユーザーのサインイン/サインアップ用の Firebase 認証。
データベース: タスクを保存するための Firestore。
ホスティング: Firebase Hosting にアプリをデプロイします。

前提条件

この手順を進めるには、次のものが揃っていることを確認してください。

React と Firebase の基本的な知識。

Node.js がインストールされました。

Firebase アカウント (無料枠は問題なく動作します)。

環境のセットアップ

1. React アプリを初期化する

React アプリを作成することから始めます:

npx create-react-app task-manager  
cd task-manager  
npm start 

1. Firebase をプロジェクトに追加します

Firebase SDK をインストールします:

npm install firebase

Firebase プロジェクトを作成します:

Firebase コンソールに移動します。

「プロジェクトを追加」をクリックし、手順に従います。

作成したら、[プロジェクト設定] > [プロジェクト設定] に移動します。一般 > Firebase SDK スニペットを選択し、設定をコピーします。

Firebase を React に統合する

1. Firebase 構成をセットアップする

src/:
に firebase.js ファイルを作成します。

import { initializeApp } from "firebase/app";  
import { getAuth } from "firebase/auth";  
import { getFirestore } from "firebase/firestore";  

const firebaseConfig = {  
  apiKey: "YOUR_API_KEY",  
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",  
  projectId: "YOUR_PROJECT_ID",  
  storageBucket: "YOUR_PROJECT_ID.appspot.com",  
  messagingSenderId: "YOUR_SENDER_ID",  
  appId: "YOUR_APP_ID"  
};  

const app = initializeApp(firebaseConfig);  
export const auth = getAuth(app);  
export const db = getFirestore(app); 

建物の特徴

1. 認証

Firebase Authentication により、ユーザーのログインが簡素化されます。サインアップとログインのフォームを作成します。

サインアップコンポーネント

import React, { useState } from "react";  
import { auth } from "../firebase";  
import { createUserWithEmailAndPassword } from "firebase/auth";  

function SignUp() {  
  const [email, setEmail] = useState("");  
  const [password, setPassword] = useState("");  

  const handleSignUp = async () => {  
    try {  
      await createUserWithEmailAndPassword(auth, email, password);  
      alert("User Registered Successfully");  
    } catch (error) {  
      alert(error.message);  
    }  
  };  

  return (  
    <div>  
      <h2>Sign Up</h2>  
      <input  
        type="email"  
        placeholder="Email"  
        value={email}  
        onChange={(e) => setEmail(e.target.value)}  
      />  
      <input  
        type="password"  
        placeholder="Password"  
        value={password}  
        onChange={(e) => setPassword(e.target.value)}  
      />  
      <button onClick={handleSignUp}>Sign Up</button>  
    </div>  
  );  
}  

export default SignUp;  

ログインコンポーネント

同様のアプローチに従いますが、ログイン機能にはsignInWithEmailAndPasswordを使用します。

1. Firestore データベース ユーザーがタスクを追加、編集、削除できるリアルタイム タスク リストを作成してみましょう。

タスクの追加

import { db } from "../firebase";  
import { collection, addDoc } from "firebase/firestore";  

function AddTask() {  
  const [task, setTask] = useState("");  

  const handleAddTask = async () => {  
    try {  
      await addDoc(collection(db, "tasks"), {  
        name: task,  
        completed: false,  
      });  
      setTask("");  
    } catch (error) {  
      console.error("Error adding document: ", error);  
    }  
  };  

  return (  
    <div>  
      <input  
        type="text"  
        placeholder="Add Task"  
        value={task}  
        onChange={(e) => setTask(e.target.value)}  
      />  
      <button onClick={handleAddTask}>Add Task</button>  
    </div>  
  );  
}  

export default AddTask;

タスクの表示

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

function TaskList() {  
  const [tasks, setTasks] = useState([]);  

  useEffect(() => {  
    const unsubscribe = onSnapshot(collection(db, "tasks"), (snapshot) => {  
      setTasks(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })));  
    });  
    return () => unsubscribe();  
  }, []);  

  return (  
    <ul>  
      {tasks.map((task) => (  
        <li key={task.id}>{task.name}</li>  
      ))}  
    </ul>  
  );  
}  

export default TaskList;

Firebase Hosting を使用したデプロイ

1. Firebase ツールをインストールします

npm install -g firebase-tools

1. ホスティングを初期化する

次のコマンドを実行します:

firebase login  
firebase init hosting 

プロジェクトを選択してください。

ビルドするビルド ディレクトリを設定します。

1. ビルドとデプロイ

npm run build
firebase deploy

あなたのアプリは Firebase Hosting で公開されます!

結論

おめでとうございます! Firebase と React を使用して、認証、データベース統合、ホスティングを備えたタスク管理アプリを構築しました。 Firebase と React のシームレスな統合により、強力でスケーラブルなアプリケーションが可能になります。

インディー革命に参加しましょう
あなたのゲームを紹介する準備はできていますか?開始方法は次のとおりです:

?インディー ゲーム ショーケースにアクセスしてください: https://gladiatorsbattle.com/indie-games
? Twitter でフォローしてください: https://x.com/GladiatorsBT

私たちとつながりを保ちましょう:
? https://discord.gg/YBNF7KjGwx | https://gladiatorsbattle.com/

一度に 1 ゲームずつ、インディー ゲームの世界をより良い場所にしましょう。 ?✨

以上がFirebase を利用した React アプリケーションの構築: 開発者向けの包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。