与React，无服务器和可通行的jamstack一起

通过建造学习！本教程通过使用NetLify无服务器功能和可通行的aect应用程序来展示jamstack体系结构。尽管Jamstack强调静态托管，但该项目展示了动态功能，包括完整的CRUD功能。

技术选择

代表JavaScript，API和Markup的Jamstack以新颖的方式利用现有技术。该教程的技术堆栈优先考虑易于部署和托管。 Netlify功能可以使用可呼射的后端CRUD操作，从而在Netlify上无缝部署。 Airtable简化了数据库管理，提供用户友好的接口和JavaScript SDK，从而消除了对单独的数据库托管和管理的需求。

应用概述

该应用程序跟踪在线课程，就像个人学习队列一样。它允许用户添加，更新，按购买并删除课程。

源代码：我创建了在线课程，包括使用React和NetLify功能构建安全的，可以生产的Jamstack应用程序的新课程。本课程涵盖了身份验证，可通行的数据存储，样式的组件，Netlify CI等。了解更多→

可通行设置

可播放数据库的“基础”。请按照以下步骤：

1. 创建一个免费的Airtable帐户。
2. 创建一个新的基础（我将我的名字命名为“ Jamstack Demos”）。
3. 用这些列创建一个名为“课程”的表：
   • name （单行文本）
   • link （单行文本）
   • tags （多个选择 - 添加标签，例如“ node”，“ react”，“ jamstack”，“ javascript”）
   • purchased （复选框）
4. 添加一些示例课程数据。

获取可驾驶的凭据

在编码之前，请收集这些可通行的证书：

1. API键：在您的Airtable帐户概述页面上找到。
2. 基本ID：位于您的基本详细信息中。
3. 表名：（例如，“课程”）

项目设置

Github上有一个入门项目。请按照以下步骤：

1. 分叉存储库。
2. 克隆本地的分叉存储库。
3. 签出starter分支（ git checkout starter ）。

该项目包括一个create-react-app结构，无服务器功能的functions目录以及netlify.toml配置文件。安装dotenv软件包：

 NPM安装Dotenv

用您的可呼叫凭证在项目root中创建.env文件：

 <code>AIRTABLE_API_KEY=<your_api_key> AIRTABLE_BASE_ID=<your_base_id> AIRTABLE_TABLE_NAME=<your_table_name></your_table_name></your_base_id></your_api_key></code>

无服务器功能

NetLify函数是/functions目录中的JavaScript文件。 courses.js文件充当主要API端点。它基于HTTP方法，使用辅助功能（ getCourses ， createCourse ， updateCourse ， deleteCourse ）：

 exports.handler = async（event）=> {
  如果（event.httpmethod ==='get'）{
    返回等待GetCourses（事件）；
  } // ...其他HTTP方法
};

airtable.js文件配置可播放连接：

 require（'dotenv'）。config（）;
var airtable = require（'airtable'）;
// ...可动用的基座和桌子设置...

Crud操作

助手功能与可呼射相互作用：

• getCourses.js ：使用table.select().firstPage() ，处理错误并格式化响应。
• createCourse.js ：使用table.create()创建一个新课程。
• updateCourse.js ：使用table.update()更新课程。
• deleteCourse.js ：使用table.destroy()删除课程。

测试：使用netlify dev在本地运行功能。使用Postman或失眠等工具进行测试端点。

反应前端

React应用程序与无服务器功能进行交互：

• App.js ： loadCourses使用fetch('/api/courses')提取课程。
• CourseForm.js ： submitCourse发送发布请求以创建新课程。
• Course.js ： markCoursePurchased发送请求请求， deleteCourse发送删除请求。

部署进行Netlify

通过连接GITHUB存储库来部署到NetLify。指定：

• 构建命令： npm run build
• 发布目录： build
• 从.env文件中添加环境变量。

结论

该教程展示了Jamstack架构的简单性和力量。 React，NetLify功能和可播放的组合提供了强大且易于部署的全堆栈应用程序。探索其他Jamstack服务和技术，以进一步增强您的开发工作流程。

以上是与React，无服务器和可通行的jamstack一起的详细内容。更多信息请关注PHP中文网其他相关文章！