Prisma 2、Chakra UI、およびReactで習慣トラッカーを構築する

Prisma 2：React Appでのデータベースの相互作用を合理化Prisma 2（以前のPrisma 2プレビュー）はデータベース管理に革命をもたらし、前任者から大きなアップグレードを提供します。 別のPrismaサーバーを必要とするPrisma 1とは異なり、Prisma 2はバックエンドに直接統合され、ライブラリとして機能します。メモリ効率を向上させるために錆で構築されたこの合理化されたアーキテクチャは、データベースの相互作用を大幅に簡素化します。

Prismaフレームワークは、3つの重要なツールで構成されています

Photon：

a自動生成データベースクライアントのタイプセーフ、従来のORMを効果的に交換します。
1. リフト：スムーズなデータベーススキーマの更新を可能にする宣言的な移行システム。
>
2. Prisma Studio：データベース管理のための視覚的なインターフェイスを提供するユーザーフレンドリーなデータベースIDE。
このチュートリアルは、Prisma 2、Chakra UI（迅速なUI開発のため）、および国家管理のための反応フックを使用して、習慣トラッカーアプリ（「ストリーク」）を構築することを示しています。 FrontEndは、graphqlインタラクションにurqlを使用します。
3. プリスマの重要な利点：

簡略化されたデータベースアクセス：複雑なSQLクエリを排除し、アプリケーション内のデータベースの相互作用を簡素化します。

データベースAGNOSTISM：広範なコード変更なしでデータベースシステムの切り替えを促進します。現在、MySQL、SQLite、およびPostgreSQLをサポートしています

• タイプ安全性：タイプセーフデータベースアクセスのために自動生成されたPrismaクライアントを提供し、コードの信頼性と開発者エクスペリエンスを向上させます。
ビジュアルデータ管理：
• Prisma Studioは、データベースを管理するための強力なビジュアルインターフェイスを提供します。 自動移行（オプション）：
liftは、宣言的データモデルを使用してデータベーススキーマ移行を簡素化します。
• 始めましょう：
• このチュートリアルは、ReactおよびReactフックに基本的な知識を想定しています。 糸はパッケージ管理に使用されます。 次のバージョンが使用されました：
• ノードv12.11.1 npm v6.11.3

npx v6.11.3

Yarn v1.19.1

prisma2 v2.0.0-preview016.2

race v16.11.0

• プロジェクトのセットアップ：
• 1. streaks-appディレクトリを作成します。
  2. Prisma 2プロジェクトの初期化：npx prisma2 init server（またはグローバルprisma2 CLIを使用）。 JavaScript、GraphQL API、およびSQLiteを選択します
  3. ：streaks-app（またはグローバルnpx create-react-app clientcliを使用）内でReactプロジェクトを作成します。 create-react-app
  プロジェクトの構造は
  および

  。streaks-app/client/になります streaks-app/server/

  バックエンド開発：

  バックエンドはGraphQlとPrisma 2を使用します。

  ファイルは、データモデル（

  、schema.prisma、Habitフィールドを備えたid）を定義します。 nameファイルは、データベースに初期データを入力します。 GraphQLサーバーは、streakおよびseed.js。 graphql-yoganexusフロントエンド開発：

  フロントエンドは、スタイリングにChakra UIを使用し、GraphQLクエリにはURQLを使用します。 コンポーネントは、習慣を表示し、新しい習慣を作成し、習慣を削除し、ストリークを増やすために作成されます。 エラー処理と読み込みインジケーターは、Chakra UIコンポーネントを使用して実装されています。

  （バックエンドおよびフロントエンドのセットアップ、クエリ、および突然変異の詳細なコードの例は、簡潔にするために省略されていますが、元の入力に存在していました。）
  結論：

  このチュートリアルでは、Prisma 2の効率的なデータベース管理、Chakra UIの合理化されたUI開発、およびReactの強力な機能を使用して、堅牢なハビタトラッカーアプリケーションの構築を実証しています。 結果のアプリケーションは、タイプセーフ、保守可能で、視覚的に魅力的です

  （元の入力のFAQセクションも、一般的な慣行と概念の繰り返しが既にカバーされているため、簡潔にするために省略されています。）

以上がPrisma 2、Chakra UI、およびReactで習慣トラッカーを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。