CATEGORY

React

[React] useEffect内のコールバック関数でstateが更新されない問題

本記事はReactのuseEffect内で作成するコールバック関数にてstateを更新しようとしても更新されない問題を扱います。 説明はイベントハンドラとイベントリスナのコールバック関数を比較して行います。ここで言うイベントハンドラとはJSX要素にてonClickなどで呼び出すイベント処理のことで、 […]

AWS Amplifyの公式Reactチュートリアルをやってみる

本記事はAWS Amplifyの公式チュートリアル(React版)の手順を解説したものです。 チュートリアルで完成するアプリは認証機能付きのToDoアプリで、デプロイして公開するところまで学べます。なおチュートリアルにはサインアウト機能はないのですが、それだとアプリの動作確認がやり辛いので本記事では […]

React/TypeScriptでFirestoreのCRUD処理を実装する

前回の記事(以下にリンク添付)ではFirebaseのAuthenticationを使って認証アプリを作成しましたが、本記事ではログインすると表示されるページにメモを追加/表示/更新/削除できる機能を実装します。データの保存にはFirebaseのCloud Firestoreを利用します。   […]

【React/TypeScript】Firebaseでメール認証とGoogle認証を実装する

本記事ではReact(TypeScript)アプリにFirebaseを使った認証機能を組み込む方法を紹介します。認証はメールアドレスとパスワードを使った認証とGoogleアカウントを使った認証の2種類で行えるようにしています。見栄えは多少よくしてレスポンシブ対応も軽く行っています。なおコンポーネント […]

React Hooksで作ったWeb版ニュースアプリをTypeScript化

以前React Hooksを使ってWeb上で動作するニュースアプリの開発について記事にしました。そのニュースアプリをTypeScriptで書き直しましたので今回記事にしました。 以降前提としてNode.jsとパッケージ管理に使うyarnはインストール済みとしています。 ソースコードはGitHubにあ […]

React HooksでWebニュースアプリを作ってみる

UdemyにあるReact Nativeでニュースアプリを作るeラーニングコースに触発され、学習目的でReact Hooksを使ったWeb版ニュースアプリを作ってみました。 グローバルステート管理にReduxは使わずHooksのみで実装しています。 ソースコードはGitHubで公開していますので、よ […]

React公式チュートリアルのアプリをHook化してみる

Reactの公式チュートリアルで作成する完成版アプリをHookを使って書き直してみました。 あまり大したことはやっていないのですが、Hook化するにあたりクラスコンポーネントを関数コンポーネントに書き直し、ステート管理はHookのuseStateを使いました。関数は全てアロー表記で書いています。 H […]