建立 Firebase 支援的 React 應用程式：開發人員綜合指南

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

簡介

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

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

先決條件

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

React 和 Firebase 的基礎知識。

已安裝 Node.js。

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

設定環境

1. 初始化 React 應用程式

先建立一個 React 應用程式：

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

1. 將 Firebase 加入您的專案

安裝 Firebase SDK：

npm 安裝 firebase

建立 Firebase 專案：

前往 Firebase 控制台。

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

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

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

註冊組件

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

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/

讓我們讓獨立遊戲世界變得更美好－一次一款遊戲。 ?✨

以上是建立 Firebase 支援的 React 應用程式：開發人員綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！