2022.03/09
ライブラリを使用して、Error Boundaryを実装。react-error-boundary
frontend,
React.js,
Library,
TypeScript,
今回はError-boundaryを実装できるライブラリの、react-error-boundaryを使用していきます。エラーが発生する可能性のあるコンポーネントをラッピングし、フォールバック用のコンポーネントを渡すことで、簡単に実装することができます。
contact
Home
Portfolio
Diary
Frontend
Infra
frontend,
React.js,
Library,
TypeScript,
今回はError-boundaryを実装できるライブラリの、react-error-boundaryを使用していきます。エラーが発生する可能性のあるコンポーネントをラッピングし、フォールバック用のコンポーネントを渡すことで、簡単に実装することができます。
frontend,
React.js,
Library,
TypeScript,
今回は、React Hook Formを使用したフォームをコンポーネント化する方法について書きます。React Hook FormではuseFormに参照したいrefを保持させることで、フォームの値を管理します。 そのため、コンポーネントにrefを受け渡さないと、registerが子コンポーネント内のどの要素を参照していいか(refを認識していいか)分からず動作しません。
frontend,
React.js,
Library,
最近、状態管理ライブラリではvaltioを使ってるのですが、久しぶりにRecoilも触ってみたいと思いコード比較してみました。Valtio、Recoilはどちらもreactの状態管理ライブラリになります。状態をオブジェクトごとに分割して(一つ一つをAtomという)管理できるのが特徴です。
frontend,
React.js,
Library,
TypeScript,
Poimandresが開発している状態管理ライブラリの一つ。特徴として、valtioはReactの外で状態を保持します。そのため、コンポーネントの外に、コードを記述できます。また、イミュータブルな関数を使用できる点も特徴です。
frontend,
ESLint,
EslintやPrettierは、プログラミングを学習し始めて割とすぐに導入すると思いますが、ファイルの設定内容については後回しにする人が多いと思います(僕がそうでした)。 今回は、設定ファイルで記述できるオプションについて簡単にまとめました。
React.js,
Library,
frontend,
react-splingは、パララックスも実装できるReactのアニメーションライブラリです。公式サイトでは、ドキュメントページ内にそれぞれのhooksで実装した、おしゃれなアニメーションのデモが見れます。 codesandboxのURLも載っており、コードをいじることもできます。個人的にですが、ドキュメントが読みにくいので、コードを触って確かめた方が理解できると思います。
frontend,
React.js,
Library,
React-chatjs-2でグラフを表示させたのですが、テキストの色を変えるのに苦戦したので記録を残しておきます。Chart.jsとは、JavaScript でグラフ(チャート)を描画するためのライブラリです。Canvasを使用しています。 React-chartjs-2はchart.jsをreactのプロジェクトで使いやすくしたものです。
Supabase,
frontend,
Supabaseとは、firebaseの大替サービスと言われるBaasです。firebaseとの大きな違いは、データベースにRDBを採用していることです。今回は、Supabaseで、Google認証を有効化していきます。
recommended
・・・
contact