React 和 Firebase：将 Firebase 添加到 React 应用

注意：随着 firebase 库 v9 的发布，这篇文章已经过时了。

入门

总结

注意：随着 firebase 库 v9 的发布，这篇文章已经过时了。

我已经将 React 和 Firebase 结合使用好几年了，现在决定分享一些我一路走来的心得。这是我“React 与 Firebase”系列文章的第一篇。如果您对更多类似的文章感兴趣，请关注我并分享这篇文章。谢谢！

入门

您只需要一个免费的 Firebase 帐户。要创建 Firebase 项目，您需要一个由 Google/Gmail 支持的电子邮件地址。

创建 Firebase 项目

前往https://console.firebase.google.com
点击+ Add Project。
按照步骤创建您的 Firebase 项目。

为您的 Firebase 项目注册 Web 应用

导航到 Firebase 项目设置。
选择部分下的网络平台Your Apps。
输入应用名称以注册您的应用。请注意，本课不会讨论 Firebase Hosting，因此您无需启用它。
完成这些步骤后，您将看到 Firebase 应用的配置。复制配置值，因为我们在 React 应用中初始化 Firebase 时会用到它们。 您只需复制配置对象，而不是整个代码片段，因为我们将从 npm 安装 Firebase 客户端 SDK。

将 Firebase 添加到您的 React 应用

通过安装 Firebase SDK `yarn`。

yarn add firebase

初始化您的 Firebase 应用

使用您在上一步中复制的配置值，您可以初始化您的 Firebase 应用程序。

在文件中初始化 Firebase index.js。



import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import firebase from "firebase/app";

// Use your config values here.
firebase.initializeApp({
  apiKey: "AIzaSyDHE9fVBUM_mto-p_SkWnyKtOiRu8M5F98",
  authDomain: "react-firebase-farazamiruddin.firebaseapp.com",
  databaseURL: "https://react-firebase-farazamiruddin.firebaseio.com",
  projectId: "react-firebase-farazamiruddin",
  storageBucket: "react-firebase-farazamiruddin.appspot.com",
  messagingSenderId: "338564911587",
  appId: "1:338564911587:web:c34e6fee0ff41bbe7fd0d6"
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

验证应用程序是否已正确初始化

为了验证，我们可以在浏览器中简单地显示有关我们的 Firebase 应用的一些信息。

将以下内容添加到App.js文件中。



import React from "react";
import firebase from "firebase";

export default function App() {
  const firebaseApp = firebase.apps[0];
  return (
    <div>
      <h1>React & Firebase</h1>
      <h2>By @farazamiruddin</h2>
      <code>
        <pre>{JSON.stringify(firebaseApp.options, null, 2)}</pre>
      </code>
    </div>
  );
}

初始化 Firebase 应用时，Firebase 会将该应用添加到apps数组中。我们将获取此数组中的第一个项目（因为我们只有一个应用），并将其选项打印到浏览器中。这些选项应与我们从 Firebase 项目设置页面复制的配置值相匹配。

如果您继续操作，您应该会在浏览器中看到它。

总结

在本课中，我们学习了如何将 Firebase 添加到 React 应用。如果您喜欢这篇文章，请关注我并分享。

如果您想保持联系，请在 Twitter 上联系我。
@farazamiruddin

下次再见。

文章来源：https://dev.to/farazamiruddin/react-firebase-add-firebase-to-a-react-app-4nc9

React & Firebase：将 Firebase 添加到 React 应用 注意：随着 Firebase 库 v9 的发布，此文章已过时。入门总结

React 和 Firebase：将 Firebase 添加到 React 应用

注意：随着 firebase 库 v9 的发布，这篇文章已经过时了。

入门

总结

注意：随着 firebase 库 v9 的发布，这篇文章已经过时了。

入门

创建 Firebase 项目

为您的 Firebase 项目注册 Web 应用

将 Firebase 添加到您的 React 应用

通过 安装 Firebase SDK yarn。

初始化您的 Firebase 应用

验证应用程序是否已正确初始化

总结

React & Firebase：将 Firebase 添加到 React 应用注意：随着 Firebase 库 v9 的发布，此文章已过时。入门总结

通过安装 Firebase SDK `yarn`。