使用React和HarperdB构建黑客新闻克隆

>本教程展示了使用React和HarperdB构建黑客新闻克隆。 让我们学习如何复制黑客新闻主页，专注于有效的开发和部署。

我们的目标是创建一个看起来像这样的克隆：

>

完整的代码可在github上找到。

键优点：

React＆Harperdb的快速发展
• >这种组合简化了开发。 HarperdB提供SQL和NOSQL功能，简化了后端设置和可扩展性。
>使用
• >：>快速以标准配置为例。create-react-app
带有
• 的实时数据：此React Hook提供了与您的HarperdB云实例的直接实时互动。useHarperDB
综合前端练习：
• 克隆黑客新闻提供了在设计复制，状态管理和用户交互方面的宝贵经验。 >>轻松部署到github页面：教程指导您部署克隆以轻松共享。>
• 可扩展的设计：基础允许将来添加诸如用户身份验证和动态内容更新。
• 克隆的好处：

设计精通：对设计细节和细微差别开发敏锐的眼睛。

• 颜色和版式的熟练程度：在这些关键的前端概念中获得专业知识。
• 技术探索：学习和利用新技术并扩展您的技能。
• Tech堆栈：
>该项目使用React/useharperdb堆栈。 HarperDB是支持SQL和NOSQL的多功能数据管理系统，可快速应用程序开发和无服务器体系结构。 关键功能包括：

单端点查询。

> sql和nosql查询支持。

JSON和SQL数据上传。

• 批量CSV数据上传。
• 快速，简单和无服务器设置。
>
我们将使用以下工具：
• • react：用于构建用户界面的JavaScript库。 简化项目设置。create-react-app
  • node.js和npm：> harperdb云帐户：
  创建一个免费帐户和实例以托管您的数据库。
  ：
  • 一个无缝harperdb集成的react钩子。 useHarperDB sql（basic）：
  此项目只需要基本的SQL查询。>
  • >> css：用于样式的纯CSS（未使用CSS框架）。
  • 黑客新闻徽标（SVG）：下载徽标以进行准确复制。
  • harperdb云实例设置：>
  注册免费的HarperdB帐户。

  创建一个新的云实例，提供一个用户名，密码和实例名称。 将生成一个URL。

  选择本教程的免费计划。
  1. >保存您的实例URL，用户名和密码 - 稍后您需要它们。
  >
  4. 项目设置和数据库总体：

  

  创建一个新的React项目：

  > 在HarperdB中，创建一个名为“ Hackernews”的架构和一个名为“ id”的表格为“ ID”为Hash属性。

  npx create-react-app hacker-news-clone
• >将harperdb连接到您的React应用程序：>

  > install

  ：

  >在根目录中创建一个

  文件，然后添加您的harperdb凭据：
  >，
  1. ，use-harperdbnpm install use-harperdb
  >
  2. >将您的应用程序包装在.env> in REACT_APP_DB_URL=...中，传递在环境变量中。REACT_APP_USER=... REACT_APP_PASSWORD=...
  3. 构建React组件：HarperDBProvidersrc/index.js>
  教程详细信息创建
  组件（包含标头和导航）和

  component（使用从harperdb获取和显示数据）。 还提供了CSS样式以匹配黑客新闻露面。

  >部署到github页面：

  >

  1. > installgh-pages：npm install gh-pages --save-dev
  用于部署的
  2. 配置package.json和homepage> scripts。
  >运行
  3. 。npm run deploy

  FAQS（扩展）：

以上是使用React和HarperdB构建黑客新闻克隆的详细内容。更多信息请关注PHP中文网其他相关文章！