建立 Firebase 支援的 React 應用程式：開發人員綜合指南-js教程-PHP中文網

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

Firebase 和 React 是現代 Web 開發世界中充滿活力的二人組。 Firebase 簡化了後端複雜性，而 React 提供了無與倫比的前端效率。本指南逐步探索如何將 Firebase 整合到 React 應用程式中，為開發人員提供詳細的見解。

簡介

在本教程中，我們將使用 Firebase 和 React 建立一個即時任務管理應用程式。主要功能包括：

身份驗證：用於使用者登入/註冊的 Firebase 驗證。
資料庫：Firestore，用於儲存任務。
託管：在 Firebase 託管上部署應用程式。

先決條件

要繼續進行操作，請確保您擁有：

React 和 Firebase 的基礎知識。

已安裝 Node.js。

Firebase 帳戶（免費套餐即可）。

設定環境

初始化 React 應用程式

先建立一個 React 應用程式：

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

登入後複製

將 Firebase 加入您的專案

安裝 Firebase SDK：

npm 安裝 firebase

建立 Firebase 專案：

前往 Firebase 控制台。

點選「新增項目」並依照步驟操作。

建立後，導覽至「專案設定」>一般> Firebase SDK Snippet，然後複製配置。

將 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 驗證簡化了使用者登入。我們將建立一個註冊和登入表單。

註冊組件

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 託管進行部署