ReactとFirebaseでMVPを構築する方法

この記事では、ReactとFirebaseを使用して最小実行可能な製品（MVP）の構築を示しています。 ラインバイラインコードのウォークスルーではなく、建築設計と重要な概念に焦点を当てています。完全なプロジェクトはGithubで入手できます

重要な概念：

合理化された開発のためのFireBase：

• Firebaseは認証、データベース（Firestore）、およびストレージ（クラウドストレージ）を提供し、バックエンドの統合を簡素化し、セキュリティリスクを削減します。 迅速なプロトタイピングのためのVite React：
Vite Reactテンプレートは、反復開発のための迅速なプロジェクトのセットアップを提供します。
• 整理されたアプリケーションアーキテクチャ：コンポーネントは、エンティティ固有（例えば、ブックカード、ブックデテール）およびUI固有の（例えば、ページヘッダー、アラート）に維持可能性とスケーラビリティに分類されます。
• データの取り扱いとストレージ：Firestoreはデータを効率的に管理し、クラウドストレージは画像とファイルを処理します。
FireBaseセキュリティルール：
• チュートリアルでは、セキュリティルールが一時的に無効になっている間、不正アクセスから保護するためにそれらを使用することの重要性を強調しています。 （注：クライアントサイドコードでAPIキーを公開することはセキュリティリスクであり、生産では避ける必要があります。）
国家管理のためのReactクエリ：
• Reactクエリは、データの取得、キャッシング、および状態同期を簡素化します。 効率的なルーティングとCRUD操作：
アプリケーションでは、標準化されたルーティング（
• 、など）および適切な構造化されたCRUD操作を使用して、ファイヤーベースバックエンドと相互作用します。
• なぜfirebase？ /{entity}Webアプリケーションの構築には、多くの場合、複数のバックエンドサービス（認証、データベースなど）の統合が含まれます。 Firebaseはこれらのサービスを統合し、複数のエンドポイントの管理に関連する複雑さとセキュリティの懸念を軽減します。 /{entity}/create
前提条件：

このチュートリアルは、中間から高度な反応開発者の知識、Reactクエリ、Tailwind CSS、およびViteに精通していることを前提としています。 プロジェクトプラン：オンラインライブラリ

この例プロジェクトは、本、著者、およびカテゴリを管理するシンプルなオンラインライブラリです。 アーキテクチャは、スクリーンコンテナ（ページ）、プレゼンテーションコンポーネント（フォーム、テーブル）、レイアウトコンポーネント、共有可能なUIコンポーネント、FireBaseサービス、およびFireBase構成スクリプトに分割されます。 詳細なフォルダー構造が提供されています。

Firebaseプロジェクトのセットアップ：

1. 新しいFireBaseプロジェクトを作成します
新しいWebアプリを作成します。
Firebase SDK（
3. ）。npm install firebaseをインストールします
アプリケーションでFireBaseを構成します（セキュリティには
4. を使用することをお勧めします）。 .env.local（重要：提供された例の構成キーは、一時的なプロジェクト用であり、使用しないでください。）
クラウドストレージのセットアップ、フォルダーの作成、画像のアップロード。
5. （重要：チュートリアルは、デモンストレーションの目的でセキュリティルールを一時的に無効にします。これは、生産アプリケーションには推奨されません。 クラウドファイアストアを設定し、コレクション（著者、カテゴリ、本）を作成し、データを入力します。 （コレクション間のIDのマニュアルリンクに注意してください。）
6. FireBase Project Logic（簡素化された説明）：

チュートリアルでは、以下を含むアプリケーションのさまざまな側面の実装について詳しく説明します。

ルーティング：

は、標準化された構文（

、
• など）を使用してReactルーターを使用します。 データベースサービス：/{entity}a/{entity}/createクラスハンドルファイヤーストアでのCRUD操作を処理します。
• リストドキュメント：reace queryからを使用してデータを取得して表示します。 DatabaseService
ドキュメントの削除：
• 確認ダイアログを実装し、を使用して削除を処理します。 useQueryドキュメントの作成と更新：
フォームハンドリングのために
• およびReactフックフォームを使用します。 画像の表示：useMutationFireBaseストレージと
を使用して画像URLを取得します。
• のリストファイル：カスタム関数を使用して、クラウドストレージフォルダーにファイルをリストします。 useMutation
ドキュメント関係の解決：
• Firestoreからの参照ドキュメントの取得を処理します。 その他のFirebaseサービス：getDownloadURL認証、クラウド関数、ホスティング、および分析を簡単にカバーします。
• 概要とFAQ：
• この記事では、主要な学習の要約と、エラー処理、テスト、パフォーマンスの最適化、セキュリティなど、MVP開発に反応とファイアベースを使用するさまざまな側面をカバーするよくある質問セクションで締めくくります。 また、Firebase ExtensionsとSupabaseに代替として言及しています。 この記事では、MVP開発を速くするためのFirebaseの連結サービスの利点を強調しています。

以上がReactとFirebaseでMVPを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。