使用React和HarperDB建立克隆的Hacker News的方法

热门技术勘探工
340 阅读9分钟

提高你的网络开发技能的最有效和最有趣的方法之一是克隆一个现有的网页或网站。在本教程中，我们将利用React和HarperDB来克隆Hacker News的主页。

当我们完成时，我们克隆的Hacker News主页的版本应该是这样的。

Our cloned version

这个项目的代码可以在其GitHub仓库中找到。

克隆的好处

构建一个网页的克隆版有以下好处。

  • 它可以帮助你关注设计的复杂性和细微差别。这使你成为一个更全面的设计师。

  • 它可以帮助你熟悉色彩和排版。这些都是非常重要的概念，每个前端开发/设计者都应该熟练掌握。

  • 它允许你学习新技术。你可以使用新的技术栈，扩大你的知识和技能的范围。

关于React/useHarperDB技术栈

我们将在这个项目中使用的堆栈主要是React/useHarperDB堆栈。

HarperDB是一个数据管理软件。它非常适用于需要NoSQL和SQL功能、快速应用开发、集成、边缘计算、分布式计算和实时操作分析的情况。

HarperDB也很灵活。它允许你做以下事情。

  • 对单一的端点进行查询
  • 同时使用SQL和NoSQL来查询你的数据库
  • 以JSON和SQL查询方式上传数据
  • 在一个CSV文件中上传大量数据

它非常快，使用简单，允许你以无服务器的方式进行设置。无服务器架构需要将后端任务抽象为另一个服务。

简单地说，作为开发者，你不必在你的本地机器上为网络应用实现一个后端和一个数据库。相反，像HarperDB这样的平台负责后端操作，并为你提供一种方法，通过云从其基础设施访问和管理数据。这样一来，你就可以专注于前端开发。

在整个开发过程中，我们将使用以下工具。

React

我们将使用React库来克隆我们的主页。React是一个前端JavaScript库，用于构建可重用的用户界面组件。例如，假设你想在你的网站上的两个或多个地方使用一个类似的按钮。如果使用HTML，你会在每个你想使用的部分定义该按钮的标记。这与DRY（不要重复自己）原则不一致。使用React，你所需要做的就是定义一个单一的按钮组件，然后在你打算在应用中使用它的每个部分注册这个组件。这简化了整个构建过程，并清理了你的代码。

我们将使用create-react-app ，而不是手动安装React和设置繁琐的配置，为我们立即构建出一个工作框架。这将有助于节省时间。

Node和npm

React、React DOM和成千上万的其他软件包都在npm注册表内。为了能够在我们的本地机器上安装这些依赖项，我们需要安装Node和npm。你可以从这里安装Node。

如果你不确定Node是否已经安装在你的电脑上，或者你不确定当前安装的是哪个版本，只需在你的机器上打开一个命令终端，然后输入node -v 。 如果你已经安装了Node，它应该显示你所安装的Node版本。注意，你应该有一个至少12.xx的node版本来运行这个项目。

一个HarperDB云账户

为了建立一个数据库，我们需要为我们的应用程序创建一个实例。为了创建一个实例，我们首先需要在Harper上注册。在设置了我们的数据库云实例后，我们需要在以后的React应用中使用用户名、密码和数据库URL。在数据库中，我们将创建一个表，用来存放稍后将在网页上显示的Hacker News帖子的列表。

useHarperDB

这是一个由Harper提供的React钩子。这个钩子本质上是作为我们的React App和数据库之间的桥梁。通过在我们的React组件中调用这个函数并传入一些重要的参数--包括一个SQL查询--我们将能够从我们的云数据库中访问帖子。这个包将使用Node包管理器安装，关于它的细节可以在这里找到。

SQL

在这个项目中，我们将只使用一个基本的SQL查询，所以不需要有广泛的知识。

CSS

最后，我们将使用纯CSS对我们的克隆进行样式设计，没有库。我们应用的每一种样式都将以模仿哈珀新闻的主页为目标。

黑客新闻的标志

由于我们将创建一个真正的哈克新闻主页的精确复制品，我们将需要标志图片。你可以在这里下载SVG格式的标志。

创建一个HarperDB云实例

首先，我们需要设置我们的云实例。我们去HarperDB的主页，注册一个免费账户。

Sign up

注册后，我们将为我们的应用程序创建一个HarperDB云实例。按照说明，填写你的用户名、实例的密码和你的实例名称。这样做之后，将为你生成一个URL。

Adding your instance info

在接下来的页面中，我们将被告知选择我们的规格。由于这是一个教程，我们将选择免费计划。

Select the specs

点击 "Confirm Instance Details"，你会被移到一个包含你所有实例信息的页面。现在，复制你的实例URL、你的用户名和你的密码，并把它保存在某个地方，因为你以后会用到它们。

Please preserve your username, password and url

最后，我们确认这个实例。你会立即看到卡片上的 "创建实例 "标签。这表明HarperDB正在对我们的实例进行工作，几分钟后它就会全部完成。

Spinning up the database

重要的是，我们要把我们的实例凭证保存在一个可以访问的地方，因为我们在后面的教程中会需要它。这些凭证是你的用户名、密码和实例的URL。

设置我们的项目目录

我们的数据库现在已经在边上旋转了。现在是时候为我们的应用程序创建目录并安装依赖性。

首先，我们转到终端，运行以下命令。

npx create-react-app hacker-news-clone

这将创建一个名为hacker-news-clone 的文件夹，并将React库安装到该项目中。由于create-react-app 是一个代码生成器，所有的配置都会自动为我们完成。这样一来，我们就可以更专注于构建我们的应用程序。

创建数据库并为其提供数据

回到HarperDB，我们将需要为我们的页面提供数据。这些数据将是一个Hacker新闻帖子的列表，我们将在我们的前端显示。

在数据库中创建一个模式和一个表

我们需要为我们的数据库定义一个模式。模式是一个数据库的结构形式。它定义了数据在数据库中是如何组织的。在HarperDB中，你可以简单地认为模式是表的集合。我们可以在一个模式中定义多个表，并从我们应用程序中的不同地方访问这些表。

在你的HarperDB仪表板上，点击卡片。你会被引导到一个新的页面。

Instance is now set. Click on the card to create a schema

要创建一个模式，只需点击旁边的**+**图标。

How you can add a schema and a table

对于我们的教程，我们将把我们的模式命名为 "HackerNews"。

在这个模式中，我们将定义我们的第一个表，名为posts 。这个表将保存所有将在我们的页面上显示的帖子数据。除了表的名字之外，我们还必须为我们的表传递一个哈希属性。哈希属性是一个唯一的值，用于区分表内的一行（帖子）和另一行数据。

对于我们的帖子表，我们将设置哈希属性为id 。这意味着id 列将为表中的每一行保存唯一数据。

Schema and table for our posts

用数据填充我们的表

在这一点上，该表是空的。我们必须用数据来填充这个表。HarperDB为我们提供了各种方法。

  • 通过SQL或NoSQL查询，在我们的数据库中创建数据
  • 通过定义一个JSON对象（只用于一条记录）和一个JSON数据数组（用于多条记录）。
  • 通过导入和加载CSV文件中的数据

在本教程中，我们将通过JSON提供数据。由于我们要插入多条帖子记录，我们将使用一个JSON对象数组，每个对象持有一个帖子的信息。

点击右上角的小**+**图标，粘贴以下JSON数据。

[
  {
    "id": 1,
    "title": "Intel Is Reducing Server Chip Pricing in Attempt to Stem the AMD Tide",
    "website": "(tomshardware.com)",
    "url": "https://www.tomshardware.com",
    "points": 115,
    "user": "rbanffy",
    "time": "2 hours ago",
    "comments": 67
  },

  {
    "id": 2,
    "title": "AI recognizes race in medical images",
    "website": "(explainthispaper.com)",
    "url": "https://www.explainthispaper.com",
    "points": 31,
    "user": "stuartbman",
    "time": "30 minutes ago",
    "comments": 15
  }
]

注意：这个数据只是两个Hacker News帖子的数据。你可以从GitHub资源库中获得30个帖子的数据。

去点击绿色按钮，把它们插入到表中。这应该是用这两个帖子动态地填充我们的表格。

Inserting posts using JSON

就这样，我们已经完成了HarperDB云的工作。现在是时候专注于我们网站的前端部分了。

用HarperDBProvider集成HarperDB和我们的应用程序

现在，我们的前端与我们的后端是隔离的。我们必须将我们的HarperDB云实例连接到我们的React应用程序。幸运的是，HarperDB为我们提供了一个挂钩：use-harperdb。

我们需要在我们的项目中安装useharperdb 。要做到这一点，我们运行以下命令。

npm install use-harperdb

为了安全起见，我们需要在环境变量中存储我们的实例凭证。我们将在根应用程序(hacker-news-clone)中创建一个名为.env 的文件，并传入以下变量。

REACT_APP_DB_URL=**
REACT_APP_USER=**
REACT_APP_PASSWORD=**

请确保遵循相同的格式，用你自己的实例信息替换双星号。传入你的数据库的URL，你的用户名和你的密码。

之后，我们将通过导航到hacker-news-clone/src/index.js ，进入index.js 文件内部。然后，我们导入HarperDBProvider ，并将我们的整个应用程序包裹在其中。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { HarperDBProvider } from 'use-harperdb';

ReactDOM.render(
  <React.StrictMode>
    <HarperDBProvider
    url={process.env.REACT_APP_DB_URL}
    user={process.env.REACT_APP_USER}
    password={process.env.REACT_APP_PASSWORD}
    >
      <App />
    </HarperDBProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

在<HarperDBProvider> 里面，我们传入我们的环境变量。这是一个非常重要的步骤，因为它基本上确保了我们的整个应用程序具有我们的云实例的上下文，因此，可以从它那里获取数据。

avatar
文章
阅读
粉丝