React

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上でテストする...
React

【React】型チェックツールFlow

TypeScriptでもPropTypesでもないReactの型チェックツールFlowについてまとめました。 Flowは、Create React App に未対応ですので自分でinstallする必要があります。 Flowを使...
React

【React】MUIのモーダルに閉じるボタンを追加する

MUI(Material-UI)のBasic modalを使用したところ、デフォルトで閉じるボタンがありませんでしたので、MUIのBasic modalに「閉じるボタン」を追加する方法をまとめました。 閉じる機能を明示的に表現するた...
React

【React】おしゃれなloadingアニメーションライブラリ react-spinners

おしゃれなloadingアニメーションを簡単に作ることができるreact-spinnersというライブラリの存在を知りましたので、使い方をまとめました。 アニメーションはこちらの種類があります。 ...
React

【React】データの取得・保存・状態管理

こちらのReactハンズオンラーニングより学ばせていただいたことをまとめています。 書籍の説明 書籍名: Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス著者: Alex Ba...