构建 React & Firebase 博客网站：第一部分 Gatsby Firebase 源代码

2025-05-24

构建 React & Firebase 博客网站：第一部分

Gatsby Firebase 源

这篇文章最初发表在我的个人博客网站上。

欢迎！这是系列文章的第一篇，该系列文章将教你如何使用 React 和 Firebase 搭建博客网站。这篇可能是篇幅最长的一篇，因为只需要做一些简单的设置即可。

读完这篇文章，你将学会如何将你的应用连接到 Firebase 并从Firebase 的实时数据库中提取数据。下次，我们将开始使用“创建帖子”功能设置 CRUD 函数。之后，我们将学习如何在前端创建一个界面，以便轻松调用 CRUD 函数，并轻松创建更多有趣的函数。

准备好开始了吗？:)

目录

  1. 注册 Firebase
  2. 创建项目
  3. 克隆起始代码
  4. 将 Firebase 连接到应用程序
  5. 向数据库添加数据
  6. 从数据库读取
  7. 总结

1. 注册 Firebase

这个很简单！前往Firebase 官网，点击“开始”按钮。页面如下：

Firebase 的主页上有

如果您尚未登录 Google 帐户，系统会提示您选择一个。登录后，您就可以创建项目了。如果您是 Firebase 新用户，该页面将如下所示：

可以在 Firebase 控制台中创建项目。

2. 创建项目

点击“创建项目”按钮，开始三步流程。首先，系统会提示您输入项目名称。我将我的项目命名为react-firebase-blog。您可以根据需要更改项目 ID，但使用自动生成的 ID 也可以。

流程的第一步。

第二步会询问我们是否要为项目设置 Google Analytics（分析）。我选择的是“暂时不需要”。如果选择此选项，则流程到此结束。否则，还需要执行另一步。

该过程的第 2 步。

点击“创建项目”，您将进入加载界面。当系统提示“您的新项目已准备就绪”时，请点击“继续”按钮。

3. 克隆启动代码

您可以通过在终端中运行以下命令来克隆启动代码：

git clone https://github.com/ashleemboyer/react-firebase-blog-starter.git
Enter fullscreen mode Exit fullscreen mode

让我们看看我们得到了什么！继续，进入react-firebase-blog-starter目录，运行 ，运行npm install，然后运行 ​​，启动项目npm run start。你应该会看到以下内容：

好啦！快来探索一下这个项目吧。我会重点介绍几个可以让你入门的地方。

src/App.js

我们有 4 个组件Routes：主页、404 错误页面，以及一个用于处理博客文章 slug（又称 URL）的组件。你可能想知道为什么没有一个组件用于处理路径不匹配的情况。好主意！我们实际上是在Post组件 ( src/pages/post.js) 中处理这个问题的。我们继续看看这个组件。

src/pages/post.js

因为我们在 中使用了 Router src/App.js（来自react-router-dom），所以我们在 elements 中命名的组件Route会将 传递match给它们的 props。我们可以使用 ，从 URL 栏中获取帖子的 slug match.params.slug，然后将其与我们在网站上支持的 slug 列表进行比较。postSlugs目前，这些 slug 被硬编码到变量中。如果 slug 不存在，我们会返回Redirect404 页面。否则，我们会显示正确的帖子。

src/pages/home.js

首先，您将看到blogPosts变量。在将应用连接到 Firebase 之前，我们会对帖子进行硬编码。此页面所做的就是section为数组中的每篇博客文章返回一个元素。在我们继续本系列的过程中，blogPosts您无需更改语句之后的任何内容。return

4.将 Firebase 连接到应用程序

首先，通过在项目根目录中firebase运行来安装包。npm install firebase

src现在，在项目目录中创建一个 JavaScript 文件并将其命名为firebase.js。我们将在这里定义 Firebase 配置并初始化 Firebase 对象。

在向此文件添加代码之前，我们先获取 Firebase 项目所需的配置数据。点击左侧边栏的设置齿轮图标，并从菜单中选择“项目设置”，进入 Firebase 项目设置。向下滚动到页面的“您的应用”部分。它可能位于页面底部。它应该显示“您的项目中没有应用”。

项目设置的“您的应用”部分的屏幕截图。

点击看起来像 的圆圈</>，即可将 Firebase 添加到 Web 应用。系统将提示您输入应用的昵称。我将其命名为React Firebase Blog。

应用程序昵称提示的屏幕截图。

点击“注册应用”按钮，页面加载完成后，您将看到一些包含名为 的变量的 HTML 代码firebaseConfig。复制该变量中的 JSON 属性，并将其保存到我们的firebase.json文件中。点击“继续控制台”按钮返回项目设置。如果您丢失了之前复制的 JSON 属性，您可以在“您的应用”部分（现已列出我们的应用）下重新找到它们。

让我们回到我们的firebase.js。准备好配置数据并将其插入到以下代码中：

import firebase from "firebase/app";
import database from "firebase/database";

const config = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  projectId: "<YOUR-PROJECT-ID>",
  storageBucket: "<YOUR-STORAGE-BUCKET>",
  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",
  appId: "<YOUR-APP-ID>",
};

let firebaseCache;

export const getFirebase = () => {
  if (firebaseCache) {
    return firebaseCache;
  }

  firebase.initializeApp(config);
  firebaseCache = firebase;
  return firebase;
};
Enter fullscreen mode Exit fullscreen mode

该getFirebase()函数将确保我们只调用initializeApp一次。

5.向数据库添加数据

在实际添加数据之前，我们无法从数据库中读取任何数据！返回您的 Firebase 项目，然后点击侧边栏“开发”标题下的“数据库”选项。您需要向下滚动页面一点，直到找到“实时数据库”部分。

实时数据库部分的屏幕截图。

点击此部分中的“创建数据库”按钮。您将看到一个模式框，询问您数据库的安全规则。

“安全规则”模式。

选择“以测试模式启动”，然后点击“启用”按钮。你的数据库将会清空，并显示类似以下内容：

<YOUR-PROJECT-ID>: null
Enter fullscreen mode Exit fullscreen mode

如果你还不知道，实时数据库只是一个 JSON 对象。你可以在这里阅读更多相关信息。

最快捷的入门方法是使用 JSON 文件导入数据。如果您正在仔细阅读，并希望获得与我这里相同的效果，我也会提供这个文件。您可以在启动项目的根目录中找到此文件。点击三个点组成的菜单，然后选择“导入 JSON”即可上传文件。浏览找到您的文件，然后点击“导入”按钮。

现在您应该拥有一些可以扩展和探索的数据属性！

数据导入实时数据库。

6. 从数据库读取

终于！我们翘首以盼的时刻到了。快去看看src/home.js能不能从数据库里找到点东西！

首先，在文件顶部添加一些导入：

// You only need to add the `{ useState }` portion here.
import React, { useState } from "react";

// This is new.
import { getFirebase } from "../firebase";
Enter fullscreen mode Exit fullscreen mode

现在，让我们进入blogPosts一个状态并尝试从数据库中读取它们。您可以在这里useState阅读更多关于钩子的信息。我们还将添加一个状态，以便我们可以轻松地完成两件事：loading

  1. 确保我们只调用getFirebase一次
  2. 在等待数据时向用户显示加载屏幕

blogPosts用以下代码替换常量：

const [loading, setLoading] = useState(true);
const [blogPosts, setBlogPosts] = useState([]);

if (loading && !blogPosts.length) {
  getFirebase()
    .database()
    .ref("/posts")
    .orderByChild("date")
    .once("value")
    .then(snapshot => {
      let posts = [];
      const snapshotVal = snapshot.val();
      for (let slug in snapshotVal) {
        posts.push(snapshotVal[slug]);
      }

      const newestFirst = posts.reverse();
      setBlogPosts(newestFirst);
      setLoading(false);
    });
}

if (loading) {
  return <h1>Loading...</h1>;
}
Enter fullscreen mode Exit fullscreen mode

太棒了！你应该能看到和我们之前一模一样的东西。🎉

7.总结

这里的内容非常丰富。如果您有任何疑问或顾虑，请给我发送电子邮件或在 Twitter 上直接留言！如果您感到困惑或不知所措，我会尽力帮助您。敬请期待明天的帖子，我们将介绍如何为我们全新、精美的博客网站编写 CRUD 函数！如果您感到紧张，并想在此之前尝试一下，我建议您查看Firebase 文档。

你知道我有一份新闻通讯吗？📬

如果您想在我发布新博客文章或发布重大项目公告时收到通知，请访问https://ashleemboyer.com/newsletter。

文章来源：https://dev.to/ashleemboyer/build-a-react-firebase-blog-site-part-1-4gn0
Devto 翻译
PREV
我使用 React、React Native 和 NextJS 构建了我的应用程序。吸取了教训。
NEXT
在安排任何面试之前，我会问所有公司的 10 个问题我认为应该向面试者提出的 10 多个问题：