如何在 ReactJS 中使用 Firestore 数据库？

Firebase 是一款 Google 产品，可帮助我们轻松构建、管理和发展我们的应用。在本文中，我们将了解如何在我们的演示反应项目中使用 firebase firestore 作为后端并使用 firebase 提供的 G-auth。当您设计诸如 iOS 或 Android 应用程序或 Web 应用程序之类的移动应用程序时，数据库是一个大问题，并不是因为它很难设计，当然它的设计有点棘手，而且有时它会消耗大量带宽你的数据库和你的应用程序前端之间的交易是一个大问题 在那个主机页面之上又是一个问题，想象一下如果你的应用程序正在共享照片并且你想访问那里的所有照片，所以它不容易维护除了管理自己的身份验证系统之外，现在所有这些事情也很棘手，因为每个人都需要来自 Facebook、Twitter、Google 的身份验证，甚至从头开始设计一个简单的登录系统都不容易。现在来了 firebase，firebase 为您提供了有关如何删除事物的完整解决方案。现在它是一个非常好的完整的后端解决方案，您可以使用它。现在使用 firebase，您可以进行各种身份验证，最常见的是用户名、电子邮件和密码，但是您可以通过多种不同的方式登录，下面是所有可能方式的快照。

firebase 还解决了一个非常好的数据库问题，它为您提供了一个实时数据库，在本文中，我们将看到如何使用 firebase 进行数据库。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

第 3 步：创建 ReactJS 应用程序后，安装 必需的 模块使用以下命令：

npm i firebase

项目结构：它将如下所示。

项目结构

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

让我们首先创建两个输入字段，即名称和密码以及一个提交按钮。

App.js

import React, { useState } from "react";
import "./App.css";
  
function App() {
  const [customerName, setCustomerName] = useState("");
  const [customerPassword, setCustomerPassword] = useState("");
  
  return (
    

      

         setCustomerName(e.target.value)}
        />
         setCustomerPassword(e.target.value)}
        />
        Submit
      
    
  );
}
  
export default App;

应用程序.css

.App {
  text-align: center;
  height: 100vh;
  display: grid;
  place-items: center;
}
  
.App__form {
  display: flex;
  flex-direction: column;
}
  
input {
  padding: 7px 11px;
  border-radius: 3px;
  border: none;
  border-bottom: 1px solid gray;
  margin: 20px;
  outline: none;
}
  
button {
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
  padding: 7px 12px;
  border: none;
  border-radius: 4px;
}

现在我们将创建 firebase 项目并创建firebase 配置文件。

创建Firebase 项目的步骤：

第 1 步：登录 firebase 仪表板并单击添加项目卡。

第2步：输入您的项目名称点击继续。

第 3 步：在配置 Google Analytics 中，选择 Firebase 的默认帐户，然后单击创建项目。

第 4 步：等待 firebase 创建您的项目。

第 5 步：创建项目后，转到如图所示的 Web 图标。

第 6 步：提供应用昵称并选中 firebase 托管复选框，如果您想使用 firebase 托管您的应用，请注册您的应用。

第 7 步：如果尚未安装 Firebase CLI，请在 VScode 终端上使用下面给出的命令安装

npm install -g firebase-tools

第 8 步：完成后，只需使用命令行或 VSCode 中的终端使用下面给出的命令登录到您的 Firebase。

firebase login

第 9 步：单击继续到控制台。

第 10 步：接下来转到您的应用程序，单击设置图标，然后在底部选择配置选项复制配置数据。转到您的本地项目并在 src 文件夹中创建一个名为 firebase.js 的文件，然后将配置数据与其他几行一起粘贴到其中，如下所示。

firebase.js

import firebase from "firebase";
  
const firebaseConfig = {
  apiKey: "AIzaSyATKyTSJVN7-Zx60WQ66kkHo3nBhuMhYDs",
  authDomain: "meteor-3fd94.firebaseapp.com",
  projectId: "meteor-3fd94",
  storageBucket: "meteor-3fd94.appspot.com",
  messagingSenderId: "391620415322",
  appId: "1:391620415322:web:6848292646d9e91e6e6d63",
  measurementId: "G-69J20TCH7X",
};
  
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
  
export default db;

现在我们已经准备好配置文件，我们只需要为 CRUD 操作添加代码：

1. 创建集合：要创建一个集合，我们只需使用我们在上面的firebase.js中创建的db对象。我们只需将它导入到我们的文件中，然后使用 collection 方法来定位创建后要存储我们的数据的集合。如果您的集合嵌套在其他集合中，您必须将其编写为db.collection().doc().collection()和 很快。现在，一旦我们在我们的集合中，我们只需简单地将我们的数据添加为一个对象。

应用程序.js

import React, { useState } from "react";
import "./App.css";
import db from "./firebase";
  
function App() {
  const [customerName, setCustomerName] = useState("");
  const [customerPassword, setCustomerPassword] = useState("");
  
  const submit = (e) => {
    e.preventDefault();
    db.collection("customersData").add({
      name: customerName,
      password: customerPassword,
    });
  
    setCustomerName("");
    setCustomerPassword("");
  };
  
  return (
    

      

         setCustomerName(e.target.value)}
        />
         setCustomerPassword(e.target.value)}
        />
        Submit
      
    
  );
}
  
export default App;

现在我们将测试我们的代码是否有效。

一旦我们看到这个页面，我们就都准备好了。只需转到本地主机并输入详细信息并按提交，然后再次在 Firebase 中打开 Firestore 数据库，您将看到如下所示的内容：

所以我们可以看到我们的数据如上图

2.读取操作：现在读取数据，初始过程相同，即导入db对象。不，我们转到存储我们想要读取的数据的集合，然后我们使用onSnapshot方法，顾名思义，每次数据库发生任何更改时，它都会简单地拍摄快照。这个函数负责我们在使用 firebase 时获得的实时感觉。

应用程序.js

import React, { useState, useEffect } from "react";
import "./App.css";
import db from "./firebase";
  
function App() {
  const [customerName, setCustomerName] = useState("");
  const [customerPassword, setCustomerPassword] = useState("");
  const [customersData, setCustomersData] = useState([]);
  
  useEffect(() => {
    db.collection("customersData").onSnapshot((snapshot) => {
      setCustomersData(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    });
    console.log({ customersData });
  }, []);
  
  const submit = (e) => {
    e.preventDefault();
    db.collection("customersData").add({
      name: customerName,
      password: customerPassword,
    });
  
    setCustomerName("");
    setCustomerPassword("");
  };
  
  return (
    

      

         setCustomerName(e.target.value)}
        />
         setCustomerPassword(e.target.value)}
        />
        Submit
      
      

        
          
            
            
          
  
          {customersData?.map(({ id, data }) => (
            
              
              
            
          ))}
        
NAME
PASSWORD
{data.name}
{data.password}
      
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

3.更新操作：让我们首先一个应该更新的按钮和应该出现的字段。现在我们从firebase.js导入db对象后，我们只需转到存储数据的集合，然后我们指定我们需要更新的文档，因为一个集合有很多文档，所以我们必须指定要更新的文档，然后我们只需使用更新方法并传递更新的对象。

应用程序.js

import React, { useState, useEffect } from "react";
import "./App.css";
import db from "./firebase";
  
function App() {
  const [customerName, setCustomerName] = useState("");
  const [customerPassword, setCustomerPassword] = useState("");
  const [customersData, setCustomersData] = useState([]);
  const [updatedCustomerName, setUpdatedCustomerName] = useState("");
  const [updatedCustomerPassword, setUpdatedCustomerPassword] = useState("");
  const [dataIdToBeUpdated, setDataIdToBeUpdated] = useState("");
  
  useEffect(() => {
    db.collection("customersData").onSnapshot((snapshot) => {
      setCustomersData(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    });
  }, []);
  
  const submit = (e) => {
    e.preventDefault();
    db.collection("customersData").add({
      name: customerName,
      password: customerPassword,
    });
  
    setCustomerName("");
    setCustomerPassword("");
  };
  
  const updateData = (e) => {
    e.preventDefault();
    db.collection("customersData").doc(dataIdToBeUpdated).update({
      name: updatedCustomerName,
      password: updatedCustomerPassword,
    });
  
    setUpdatedCustomerPassword("");
    setUpdatedCustomerName("");
    setDataIdToBeUpdated("");
  };
  
  return (
    

      {!dataIdToBeUpdated ? (
        

           setCustomerName(e.target.value)}
          />
           setCustomerPassword(e.target.value)}
          />
          Submit
        
      ) : (
        

           setUpdatedCustomerName(e.target.value)}
          />
           setUpdatedCustomerPassword(e.target.value)}
          />
          Update
        
      )}
  
      

        
          
            
            
            
          
  
          {customersData?.map(({ id, data }) => (
            
              
              
              
            
          ))}
        
NAME
PASSWORD
Update
{data.name}
{data.password}

                 {
                    setDataIdToBeUpdated(id);
                    setUpdatedCustomerPassword(data.password);
                    setUpdatedCustomerName(data.name);
                  }}
                >
                  Update
                
              
      
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。更新数据后，您可以在 Firebase 仪表板中查看数据是否更新。

4.删除操作：从同样的事情开始，我们在文件中导入db对象，然后我们只需转到存储数据的要删除的集合，然后指定需要删除的文档，因为一个集合有很多文档，所以我们必须指定要删除的文档，然后我们只需调用delete方法。

应用程序.js

import React, { useState, useEffect } from "react";
import "./App.css";
import db from "./firebase";
  
function App() {
  const [customerName, setCustomerName] = useState("");
  const [customerPassword, setCustomerPassword] = useState("");
  const [customersData, setCustomersData] = useState([]);
  const [updatedCustomerName, setUpdatedCustomerName] = useState("");
  const [updatedCustomerPassword, setUpdatedCustomerPassword] = useState("");
  const [dataIdToBeUpdated, setDataIdToBeUpdated] = useState("");
  
  useEffect(() => {
    db.collection("customersData").onSnapshot((snapshot) => {
      setCustomersData(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    });
  }, []);
  
  const submit = (e) => {
    e.preventDefault();
    db.collection("customersData").add({
      name: customerName,
      password: customerPassword,
    });
  
    setCustomerName("");
    setCustomerPassword("");
  };
  
  const updateData = (e) => {
    e.preventDefault();
    db.collection("customersData").doc(dataIdToBeUpdated).update({
      name: updatedCustomerName,
      password: updatedCustomerPassword,
    });
  
    setUpdatedCustomerPassword("");
    setUpdatedCustomerName("");
    setDataIdToBeUpdated("");
  };
  
  const deleteData = (id) => {
    db.collection("customersData").doc(id).delete();
  };
  
  return (
    

      {!dataIdToBeUpdated ? (
        

           setCustomerName(e.target.value)}
          />
           setCustomerPassword(e.target.value)}
          />
          Submit
        
      ) : (
        

           setUpdatedCustomerName(e.target.value)}
          />
           setUpdatedCustomerPassword(e.target.value)}
          />
          Update
        
      )}
  
      

        
          
            
            
            
            
          
  
          {customersData?.map(({ id, data }) => (
            
              
              
              
              
            
          ))}
        
NAME
PASSWORD
Update
Delete
{data.name}
{data.password}

                 {
                    setDataIdToBeUpdated(id);
                    setUpdatedCustomerPassword(data.password);
                    setUpdatedCustomerName(data.name);
                  }}
                >
                  Update
                
              

                 {
                    deleteData(id);
                  }}
                >
                  Delete
                
              
      
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。删除数据后，您可以在 Firebase 仪表板中检查数据是否被删除。