Firebase を利用した React アプリケーションの構築: 開発者向けの包括的なガイド-jsチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-11-24 11:58:12

オリジナル

151 人が閲覧しました

Building a Firebase-Powered React Application: A Comprehensive Guide for Developers

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

はじめに

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

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

前提条件

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

React と Firebase の基本的な知識。

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

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

環境のセットアップ

React アプリを初期化する

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

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

ログイン後にコピー

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

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

npm install firebase

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

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

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

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

Firebase を React に統合する

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);

ログイン後にコピー

建物の特徴

認証

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を使用します。

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 を使用したデプロイ