使用Prisma 2，Chakra UI和React建立習慣追踪器

Prisma 2：簡化React應用中的數據庫交互 Prisma 2（以前是Prisma 2預覽）徹底改變了數據庫管理，從其前身提供了重大升級。 與需要單獨的Prisma服務器的Prisma 1不同，Prisma 2直接集成到您的後端，作為庫。這種簡化的體系結構是用生鏽構建的，以提高內存效率，從而大大簡化了數據庫交互。

>

PRISMA框架包括三個關鍵工具：

>

photon：

>一種類型安全的自動生成數據庫客戶端，有效地替換了傳統的ORM。
1. 提升：聲明的遷移系統啟用平滑數據庫架構更新。
2. >> prisma Studio：用戶友好的數據庫IDE為數據庫管理提供視覺界面。
3. >本教程展示了使用Prisma 2，Chakra UI（用於快速UI開發）的習慣跟踪器應用程序（“條紋”），並進行國家管理的鉤子。 前端將URQL用於GraphQl交互。 > Prisma的關鍵優勢：

>

簡化的數據庫訪問：

消除了複雜的SQL查詢，簡化了應用程序中的數據庫交互。 >數據庫不可知論：

促進了不進行大量代碼修改的切換數據庫系統。目前支持mysql，sqlite和Postgresql。

>
• >類型安全：>為類型安全數據庫訪問提供自動生成的Prisma客戶端，增強代碼可靠性和開發人員體驗。
視覺數據管理：>
• >自動遷移（可選）：使用聲明性數據模型簡化了數據庫架構遷移。
• 入門：
• >本教程假定對React和React鉤子的基本熟悉。 紗線用於包裝管理。 使用了以下版本：
NPM v6.11.3
• npx v6.11.3
紗線V1.19.1

Prisma2 v2.0.0-preview016.2

> > react v16.11.0

項目設置：

• 1. 創建streaks-app目錄。
  >
  2. >初始化Prisma 2項目：npx prisma2 init server（或使用全局prisma2CLI）。 選擇JavaScript，GraphQl API和SQLITE。
  3. 在streaks-app>中創建一個反應項目：npx create-react-app client（或使用全局create-react-appcli）。
  項目結構將是：

  >和streaks-app/client/。 streaks-app/server/。

  後端開發：

  後端利用GraphQl和Prisma 2。

  文件定義了數據模型（例如，schema.prisma，Habit，id，name和 fields）。 streak文件用初始數據填充數據庫。 使用seed.js和graphql-yoga>。 nexus

  >前端開發：

  >前端使用脈輪UI進行造型，並用於GraphQl查詢。 創建了用於顯示習慣，創建新習慣，刪除習慣和增量條紋的組件。 使用Chakra UI組件實現了錯誤處理和加載指標。

  （省後端和前端設置，查詢和突變的詳細代碼示例是簡潔的，但在原始輸入中存在。）
  結論：

  >本教程展示了使用Prisma 2的高效數據庫管理，Chakra UI簡化的UI開發以及React的強大功能來構建強大的習慣跟踪器應用程序。 最終的應用程序是類型的安全性，可維護和視覺上吸引人的。 >

  （從原始輸入中的FAQS部分也省略了，因為它是對已經涵蓋的常見實踐和概念的重複。）

以上是使用Prisma 2，Chakra UI和React建立習慣追踪器的詳細內容。更多資訊請關注PHP中文網其他相關文章！