★前回の記事 yucatio.hatenablog.com モジュールのインストール 開発を始めるにあたり、firebaseのモジュールをインストールします。 $ yarn add firebase 次に、React + Redux + Firebaseでの開発を簡単に行うために、react-redux-firebase モジュールをイ…

FirebaseをReactと共に使う時に、firebaseの設定をファイルに書く必要があるのですが、どこに書かれているかすぐにわからなくなるので、スクリーンショット付きで手順を示します。 １. Firebase console (https://console.firebase.google.com/)のProject Ov…

★前回の記事 yucatio.hatenablog.com 今回のチュートリアルでは読み込み部分を先に作るため、先にデータベースにデータを登録します。 データファイルの準備 テキストエディタを開いて、以下の内容を記載します。ファイル名は、initial_todo.jsonにします。 …

★前回の記事 yucatio.hatenablog.com firebase-toolsのインストールとfirebase initを実行して、プロジェクトにFirebaseの設定ファイルを追加します。 firebase-toolsのインストールとログイン まず、firebase-tools (firebaseのコマンドラインツール)をイン…

★前回の記事 yucatio.hatenablog.com Firebaseでアプリを開発するのには、まずプロジェクトをFirebase consoleで作成する必要があります。プロジェクトの作成の手順を示します。 １. Firebase Console (https://console.firebase.google.com/)を開きます。 …

★前回の記事 yucatio.hatenablog.com 今回のチュートリアルでは、Reduxの公式ページのサンプルコードを使用するので、準備をします。 React + Reduxプロジェクトの作成 React + Reduxのプロジェクトの作成をします。 create-react-appを使用してReactアプリ…

★前回の記事 yucatio.hatenablog.com STEP 1ではFirebaseをReact+Reduxのアプリに統合していきます。Reduxの公式ページに記載されているタスク管理アプリを使用します。 Firebaseからタスク一覧を読み込んだり、Firabaseへタスクを追加したり、タスクの完了…

React + Redux + Firebaseで開発を始めました。まだまだ勉強中のところもありますが、自身の力でアプリを作成できるようになってきたので、ここまでどのように学んできたか書いておきます。主に他言語の経験者でwebの経験があると参考になると思います。 習…

React + Redux + Firebase + Material-UI で、タスク管理アプリを作ります。Reduxの公式ページに載っているサンプルを元に、react-reduxで作られたアプリにfirebaseとMaterial-UIを導入します。 目次 準備 STEP 1 : 誰でも読み込み・書き込みできるタスク管…

ReactとReduxの勉強中です。react-reduxのconnect()の理解に時間がかかったので、同じように悩んでいる方に向けて図にして説明します。初心者向けの説明なので、正確さよりもわかりやすさを重視しています。 目次 Reduxの世界 Reactの世界 React-reduxの世界…

Railsも5.2がリリースされ、フロントエンド周りがいい感じになってきたと聞いたので、思い立ってReactを勉強し始めました。"React Tutorial"で検索した時に、一番上に出てきたのが英語のチュートリアルだったので、思いつきで英語で読むことにしました。 読…