Firebase

1/2ページ
  • 2020.06.28

React-Redex-Firebase掲示板の作成-5(Firebaseに登録)

前回までの新規作成が無事コンソールに表示されましたら、そちらの情報をFirebaseに登録してみたいと思います。 編集ファイル名 src/index.js Firebaseと繋ぐ設定をします。compose を使用してstoreにまとめます。 src/store/action/index.js 新規作成エラーの為の定数を追加します。 src/store/action/projectActions. […]

  • 2020.06.23

React-Redex-Firebase掲示板の作成-4(ローカル新規作成)

前回までのRedex管理まで出来たら、新規作成を作っていきたいと思います。 編集ファイル名 src/index.js thunkはstoreのdispatchメソッドを受け取り、Actionオブジェクトの代わりに渡された非同期関数処理が完了した後に、通常の同期処理をディスパッチするために利用します。 src/store/actions/index.js 新規作成のための定数宣言。 src/stor […]

  • 2020.06.21

掲示板アプリの作成-3(Redux・Reducer 一覧表示)

前回で表示まではできたと思いますので、このデータをReduxで管理して、表示させたいと思います。 編集ファイル名 src/store/reducers/projectReducer.js まずはアクションに従って、状態を更新するReducerを作成します。今回はデモデータを持たせて、このデータを一覧に表示させたいと思います。 src/store/reducers/rootReducer.js Re […]

  • 2020.06.21

掲示板アプリの作成-2(ローカル 一覧表示)

前回で前準備をしました。 まずはローカルで動くよう作っていきたいと思います。※classNameはMaterializedを使用するための名前です。 編集ファイル名 src/components/layout/Navbar.js 共通のレイアウトのナビゲーションバーを作成します。 src/App.js こちらをsrc/App.jsから呼び出してあげます。 yarn startのコマンドで動いている […]

  • 2020.06.21

掲示板アプリの作成-1(下準備)

今回使用する技術・React・Redux・Firebase Firebaseの設定とReactプロジェクトの作成をしていきます。 Firabaseにてプロジェクトの作成 プロジェクトの作成方法は以下を参考にしてください。https://kazunaka.com/firebase-react-loginapp-1/ プロジェクトの名前を「bulletin-board」とします。アプリの名前を「bul […]

  • 2020.06.18

reactでチャット風独り言アプリ-2

前回記事の続編ということになります。まだみていないという方はどうぞ。 独り言を呟いても更新をかけてしまうと、今までボヤいていたことが消えてしまいます。それでもいいならそのままでもOKですが、せっかくなので、更新をかけても消えないように、データベースにボヤいたことを覚えててもらいましょう。 今回はFireBaseを使います。無料で使えますので、こちらより、プロジェクトを立ち上げ、apikey、aut […]

  • 2020.06.15

reactでチャット風独り言アプリ-1

下記のようなチャット風アプリを作成したいと思います。 プロジェクト名は任せます。本記事では「chat-app」としています。 下記にてHellowWorldまで出力してください。できる人はそのまま進んでください。 HellowWorldまで表示できましたら、早速作っていきましょう!! TweetIndex.jsの編集 でsrc直下にファイルを作成します。下記書いていきましょう。 App.jsの編集 […]

  • 2020.06.10

Firebase + Reactでログイン④認証の実装

①Firebaseの設定②Reactプロジェクト作成③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)&ユーザ削除 ← 今ここ 前回の③認証のためのユーザ登録の実装からの続きをしていきます。ユーザが登録できたと思うので、いよいよログインの実装をしていきます。 ファイルを編集 src/auth/AuthProvider.js 2個所追加場所があります。コメントにて記入してあります […]

  • 2020.06.10

Firebase + Reactでログイン③ユーザの登録

①Firebaseの設定②Reactプロジェクト作成③認証のためのユーザ登録の実装 ← 今ここ④認証(ログイン・ログアウト)&ユーザ削除 前回の②Reactプロジェクト作成からの続きをしていきます。 認証に必要なユーザの登録のための実装をしていきます。 ファイルを編集 src/auth/AuthProvider.js src/auth/SignUp.jsx src/App.js アプリを […]

  • 2020.06.10

Firebase + Reactでログイン②Reactプロジェクト作成

①Firebaseの設定②Reactプロジェクト作成 ← 今ここ③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)&ユーザ削除 前回の①Firebaseの設定からの続きをしていきたいと思います。 こちらではReactのプロジェクトの作成&前準備をしていきます。 Reactプロジェクト作成 コマンド(ターミナル)での操作をしていきます。 任意のディレクトリに移動して、プロジェクトを作成しま […]