构建 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 托管进行部署