React 【React × Firebase】CRUDを学ぶ
本記事は、firebaseでのCRUDのクエリの書き方を手っ取り早く知りたい方のために書きました。
はじめに
Reactで使用するFirebaseのJavaScriptのSDKは2021年8月25日にv8→v9へメジャーバージ...
React
React 
React 【React】Suspenseのすごさ（Streaming HTML と Selective Hydration）
Suspenseはすごいです！
Next.jsでSSRでアプリを作ったものの、初回レンダリング時何も表示されない画面の待機時間が長く、UX悪すぎだろ！それならCSRで作るわ！とSSRの使用を諦めてしまってませんか？
はい、私が...
React 【React】TanStack QueryとSuspenseを使って、data fetch, loading, errorの表示
2023年1月時点、TanStack Queryの最新バージョンはv4です。v3までは名前がReact Queryでしたがv4より変更となっておりますのでお間違いなく。
環境
react @18.2.0
...
React 【React × TypeScript】childrenとonClickイベントがある場合のButtonのComponent化
ReactのComponent化は習得した、childrenの使い方もわかった、onClickイベントの使い方もTypeSciptもある程度わかるようになった。
がしかし！onClickイベントを含んだButtonのComponen...
React 【React】useContextの使い方 JavaScriptとTypeScriptの違いも
Reactの代表的なhooks、useStateとuseEffectに次ぐ基本のhooksであるuseContext。
そんな基本のhooksでありながら、いまいち理解できなかったため超わかりやすいように、useContextの使い...
AWS 【Amplify】React 静的 ホスティング (S3 + CloudFrontの構築はもう不要)
静的サイトのホスティングの定番である、S3 + CloudFront の構成を、AWS Amplifyを使用することで爆速で構築できることを知りましたので手順をまとめました。
めちゃくちゃ簡単です！
ホスティング手順
A...
React 【React】カレンダーを自作
Reactで以下のカレンダーを作ります。
完成品がこちら
Googleカレンダー風シンプルなカレンダーです。
それでは行きましょう！
使用技術
以下の技術、ライブラリ等を使用して作っていきます...
React 【React】ルーティング
ルーティングについて、こちらの書籍より学んだことをまとめています。
書籍の説明
書籍名： Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス著者： Alex Banks 著出版社...
React 【React】コマンドいろいろ（npm、npx）
Reactで開発するにあたって使用する、知っているとよいコマンドをまとめました。
npm start などあまりにもよく使用する、知っていて当たり前のコマンドは記載していません。
npm関係
npmの最新verへのアップ...
React 【React】テスト
Reactでのテストについてこちらの書籍にて学んだことをまとめています。
ReactではテストフレームワークにはJestというツールを使用します。
Jestとは
ReactのコンポーネントをNode上でテストする...