FirestoreでCRUDFirebaseReactFirestore以前も同じ記事を書いたのですが、人の記事をなぞっただけなので自分で書いてみました。実案件を想定して、ファイルアップロードやカレンダーも含めたCRUDを試してみました。追記ここの内容はCRUDとしては少々Formが複雑すぎるので、簡単版を作成しました。そちらもご利用ください。仕様・完成イメージCRUDといいつつ、Editページに詳細表示機能を兼ねさせたり削除機能を追加することにより、以下の3ページを作成することでことは足ります。Create(新規登録)Index(一覧)Edit(編集+詳細画面を兼ねる+削除機能追加)Show(いらないけど参考実装)完成版のgithubのリポジトリはこちら。実装の手順データがないと始まらないのでまずCreateを実装します。次に一覧を実装します。モジュールのインストール作業場所を作成し、必要なモジュールをインストールします。必要なファイルを生成しておきます。ファイルはsrc以下に作成します。document.getElementById('root'));実装まずはApp.jsでルーティングの設定を行います。各コンポーネントが無いとエラーがでるので、作成の順番に注意してください。App;Create.jsちょっと複雑にはなりますが、ここでは実践で利用する各種Form要素を利用してみたいと思います。主な要素は普通のInputSelectRadioボタンカレンダーファイルアップロードチェックボックスあたりです。alert("登録しました。className="col-form-label">■規約に同意して下さい。check>同意する。Create;Index.jsひとまず一覧表示してEditやShowにリンクするだけです。Index;Edit.jsCreate.jsの画面をベースに指定したメンバー(ドキュメント)の情報をデフォルト値としてセットし、更新があれば更新することになります。削除ボタンもEditに実装します。alert("更新しました。alert("メンバーが見つかりませんでした。className="col-form-label">■規約に同意して下さい。check>同意する。Edit;Show.jsEditと表示内容はほぼ同じなので、いらないのですが参考まで。テキストベースで表示するため型変換等が必要になります。alert("メンバーが見つかりませんでした。requestStockLike0zaburo@zaburoこんにちは。自分用のメモをだらだら公開しています。upLoginユーザーは見つかりませんでした。