构建 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 id="Sign-Up">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 (  
    

{tasks.map((task) => (
• {task.name}
))}

); } 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中文网其他相关文章！