與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中文網其他相關文章！