如何使用 React 和 Firebase 创建 Reddit 克隆

fatimakanij204

React是一个用于构建用户界面的出色前端库。当选择与之一起使用的后端时， Firebase不会出错，它是一种后端即服务 (Baas)，可以轻松地将数据持久性（以及更多其他功能）添加到您的 React 应用程序中。 Backward Skip 10s Play Video Forward Skip 10s 在本教程中，我们将使用 Firebase 和Create React App来构建一个功能与Reddit类似的应用程序。它将允许用户提交新帖子，然后可以对其进行投票。我还将演示如何将 Reddit 克隆部署到Vercel。 读完后，您将了解如何设置 Firebase、如何将其连接到 React 应用程序以及如何部署结果。 发明家将 FireBase 心脏放入机器人创作中 为什么选择 Firebase？ Firebase 的优势之一是它使我们可以轻松地向用户显示实时数据。一旦用户对链接进行投票，反馈将是即时的。Firebase 的实时数据库将帮助我们开发此功能。



此外，它将帮助我们了解如何使用 Firebase 引导 React 应用程序。 为什么要反应？ React 尤其以使用组件架构创建用户界面而闻名。每个组件都可以包含内部状态或作为props传递数据。State 和 props 是 React 中最重要的两个概念。这两件事可以帮助我们随时确定应用程序的状态。如果您不熟 黎巴嫩电话号码表 悉这些术语，请先查看React 文档。 注意：您还可以使用Redux或MobX等状态容器，但为了简单起见，我们不会在本教程中使用状态容器。 这是我们将要构建的内容的现场演示。此应用程序的代码可在GitHub上获取。 设置项目 要继续操作，您需要在计算机上安装 Node 和 npm。如果还没有，请前往 Node.js下载页面并获取适合您系统的最新版本（npm 与 Node 捆绑在一起）。或者，您可以查阅我们有关使用版本管理器安装 Node 的教程。



让我们逐步完成设置项目结构和任何必要的依赖项的步骤。 引导 React 应用程序 我们可以使用以下命令在 Create React App 的帮助下创建一个新的 React 应用程序： npx create-react-app reddit-clone 这将在目录中构建一个新create-react-app项目reddit-clone。我们的目录结构应该如下： 默认目录结构 引导完成后，我们可以进入reddit-clone目录并启动开发服务器： cd reddit-clone && npm start 此时，我们可以访问http://localhost:3000/并查看我们的应用程序已启动并运行。 Create React App 的默认页面 构建应用程序 在引导任何应用程序后删除所有不需要的文件始终是一个好习惯。Create React App 生成了一些我们不需要的文件，因此我们将删除它们。 我们可以删除以下文件我们还可以test从package.json文件中删除脚本。