[React] useEffect内のコールバック関数でstateが更新されない問題
本記事はReactのuseEffect内で作成するコールバック関数にてstateを更新しようとしても更新されない問題を扱います。 説明はイベントハンドラとイベントリスナのコールバック関数を比較して行います。ここで言うイベントハンドラとはJSX要素にてonClickなどで呼び出すイベント処理のことで、 […]
本記事はReactのuseEffect内で作成するコールバック関数にてstateを更新しようとしても更新されない問題を扱います。 説明はイベントハンドラとイベントリスナのコールバック関数を比較して行います。ここで言うイベントハンドラとはJSX要素にてonClickなどで呼び出すイベント処理のことで、 […]
本記事はAWS Amplifyの公式チュートリアル(React版)の手順を解説したものです。 チュートリアルで完成するアプリは認証機能付きのToDoアプリで、デプロイして公開するところまで学べます。なおチュートリアルにはサインアウト機能はないのですが、それだとアプリの動作確認がやり辛いので本記事では […]
本記事では、前回記事でFirebase HostingにデプロイしたReactアプリ(Firebase Authenticationによる認証とFirestoreによるCRUD機能があるメモアプリ)を対象にGitHubと連携することでCI(Continuous Integration: 継続的インテ […]
本記事では以前FirebaseのAuthenticationとFirestoreを使って作ったWebアプリをFirebase Hostingにサクッとデプロイした後に独自ドメインを追加する方法までを解説します。 FirebaseのHosting機能はReactとも相性がよくお手軽にデプロイできます。 […]
前回の記事(以下にリンク添付)ではFirebaseのAuthenticationを使って認証アプリを作成しましたが、本記事ではログインすると表示されるページにメモを追加/表示/更新/削除できる機能を実装します。データの保存にはFirebaseのCloud Firestoreを利用します。   […]
本記事ではReact(TypeScript)アプリにFirebaseを使った認証機能を組み込む方法を紹介します。認証はメールアドレスとパスワードを使った認証とGoogleアカウントを使った認証の2種類で行えるようにしています。見栄えは多少よくしてレスポンシブ対応も軽く行っています。なおコンポーネント […]
以前React Hooksを使ってWeb上で動作するニュースアプリの開発について記事にしました。そのニュースアプリをTypeScriptで書き直しましたので今回記事にしました。 以降前提としてNode.jsとパッケージ管理に使うyarnはインストール済みとしています。 ソースコードはGitHubにあ […]
UdemyにあるReact Nativeでニュースアプリを作るeラーニングコースに触発され、学習目的でReact Hooksを使ったWeb版ニュースアプリを作ってみました。 グローバルステート管理にReduxは使わずHooksのみで実装しています。 ソースコードはGitHubで公開していますので、よ […]
Reactの公式チュートリアルで作成する完成版アプリをHookを使って書き直してみました。 あまり大したことはやっていないのですが、Hook化するにあたりクラスコンポーネントを関数コンポーネントに書き直し、ステート管理はHookのuseStateを使いました。関数は全てアロー表記で書いています。 H […]
本記事はReactの公式チュートリアルアプリ(完成版)をローカル環境に構築してからGitHub Pagesに公開し、さらにPWA(Progressive Web Apps)化する手順を紹介します。 先行作業として別記事に書いたGitHub PagesにReactの初期ページを公開するところまで完了し […]