ファイアベースV 9のCRUD操作

今日、我々はFirebase V 9について話します、そして、どのように反応でそれを統合するか.プロジェクト.まず第一に、我々が今日していることを見ましょう

Firebaseは何ですか?

は、反応を引き起こします.FirebaseによるJSプロジェクト.

.

書き込み動作.

読み込み操作.

更新操作.

操作を削除します.

1 . firebaseとは-
Firebaseは、クラウド、データベース、モバイルおよびWebアプリケーションの他の多くのサービスを提供するGoogleによるプラットフォームです.これは、リアルタイムのデータベースとアプリケーションのデータを同期するAPIを提供します.あなたが無料で使用することができます起動するためにいくつかの時間後に高スケールの場合は、オンデマンドで支払うことができますそれを使用する場合.また、ファイアウォールでサードパーティ製のホスティングやドメインを使用することができます.
2 . create createFirebaseによるJSプロジェクト
私たちはtodo反応プロジェクトを作成しています、そして、我々は我々のバックエンド・データのためにFireBaseを使用します.
だからまず第一に、反応プロジェクトを作成しましょう.

npx create-react-app todos

このコマンドをcmdで実行すると、ビルドが完了するとTodosというフォルダが表示されます.必要なコードエディターでこのフォルダーを開きます.

今、私たちは、以下のコマンドを使用してFireBaseをインストールし、それが完了したら、パッケージ内のFireBaseバージョンを見つけることができます.JSONファイル.

npm i firebase

今すぐFireBaseのウェブサイトに移動し、すぐにアカウントを作成し、コンソールをクリックして、Web上でクリックして、プロジェクト名のような詳細を与える.

今すぐウェブアイコン<>をクリックすると、以下のような画面を取得するだけで、この設定の詳細をコピーします.

設定
今私たちの次のタスクは、我々の反応アプリで私たちのfirebaseコードを統合しています.そのためには、firebaseinitという名前のファイルを作成します.srcフォルダの下のjs(オプション名)とコードの上のコードをコピーします.

我々は我々が必要として我々の反応アプリでFireBaseを使用できるようになりました
4書き込み
さあ、今は、船体操作に飛び込みましょう.我々は我々のアプリでFireStoreをインポートする必要が最初に反応をデータベースを使用する.

今では任意のコンポーネントでDBを使用し、CRUD操作を実行できます.Firestoreでデータを書きましょう.

さて、ボタンをクリックすると、コレクション名「todo」でadddocが表示されます(もし存在しないならば、Firebaseはそれを作ります)、フィールドは14、15行目で説明します

5 .読み込み操作
今、我々はFirebaseにデータを送信することができますが、それを読むにはどうですか.画面上のすべての画面を見ることができないなら、TODOの感覚はありません.次に、読み取りコンポーネントを作成しましょう.

ここでは、このコンポーネントを実行するたびに、Firestoreデータベースからすべてのデータを取得します.これが我々の結果だ

6 .アップデート操作
今、私は公園にユニコーンがないことに気づきました、そして、私はそれをテーマパークに変えたいです.私はそれを行うことができるように更新操作を使用することができます.簡単にするために、読み取りコンポーネントを使用して更新メソッドを作成します.
最初に我々はフォームでモーダルを開く更新ボタンを与える

ここで、フォームデータを更新するにはHandleUpdate関数があります.

それは今我々の結果を見てみましょう

7 .削除操作
今は削除機能が必要です.そうすればtodoを削除できます.

ここでは、私たちはIDを削除して、todoを削除します.

結論

これはFireBaseでのCRUD操作です.もしどこかで立ち往生したならば、Provider Projectのリンクもあります.必要に応じてコードを使用して変更できます.github repo