React でユニットテストをするときのベストプラクティスはいつも悩むのですが、とりあえず 2021 年 2 月時点では、こうかなーというのをまとめてみます。 まずテストランナーは jest で確定です。ここで悩む要素はまずありません。 では、React のテストをどうやるか？です。 公式の react-dom/test-utils を使う 公式の react-test-renderer を使う @testing-library/react を使う 選択肢としてはこの三種類が有名なところでしょう。 公式という響きはとても魅力的ですが、実は公式ドキュメントから「ボイラープレートを減らすため、エンドユーザが使うのと同じ形でコンポーネントを使ってテストが記述できるように設計されている、React Testing Library の利用をお勧めします。」という形で、@testing-library
◆ key を使う ◆ 変えるとコンポーネントを再作成してくれる ◆ 配列の map 以外でも並び替えるために必要 ◆ 埋め込むインスタンスを指定するわけじゃないので同じものを判断するのに必要 ◆ props のみならいいけど state が入ると引き継げない React で親コンポーネントから子コンポーネントの state を更新したい React 系の state がクリアされない問題 これを簡単に解決できる方法がありました key を使います key でリセットkey は配列を map して要素の配列として埋め込むときに同じものであることを判断するために使うものくらいのイメージでした しかし それ以外の場所でも使えて key が前回と異なればコンポーネントを作り直してくれます 以前は自分で key 的なものを管理して 違いがあれば state の更新で初期値を手動で入れてましたが そ
Intro I’ve been working with React for over four years. During this time, I’ve formed some opinions on how I think applications should be. This is part 6 in the series. Why When I started writing React, I would often use an isLoading boolean to indicate that I was loading some data asynchronously. This is fine for a simple example, but as I learned it does not scale well. Why It's a Bad Idea - an
こういう風に投稿すると(左)、esa.ioにこういう感じ(右)で投稿される分報風のアプリを自分用に年末年始に作りました。 作った動機 使った要素技術 Firebase Authentication Firebase Hosting + React Firebase Cloud Functions デプロイ自動化 所感 作った動機 きっと皆さんそうしているように、私も日々ログを残しながら作業をしている。仕事ではscrapboxを使っているが、プライベートではesa.ioを愛用している。プレビューを見つつmarkdownで書けたり、タグとカテゴリがいい感じに使えたりするところが気に入っている。あと、アイコンがかわいい。 ちゃんと作業をするときにはesa.ioにページを作るが、そうでない雑なものも記録したいときが度々ある。例えばこういうの。 今度コンビニ行ったとき、忘れずにXXXを買う 統計の本
制御コンポーネント (controlled components)React コンポーネントでフォームを構成する場合、コンポーネントの状態 (state) に基づいて表示を行うように実装すると、フォームの表示内容を制御しやすくなります。 このように、コンポーネントの表示内容が、完全にその状態 (state) によって決まるように実装されたものを、制御されたコンポーネント (controlled components) と呼びます。 このように設計することで、若干コード量は増えますが、表示内容を変更したいときはコンポーネントの state を変更するだけで済むようになります。 例えば、ネットワークから取得したデータをフォームに表示するような場合、そのフォームの構造を知る必要はなく、単純に state を更新するだけでよくなります。 これは、データとビューが分離された設計になっており、アプリ設
初投稿から一年くらい経って、各種ライブラリも少し様変わりしたので書き直しました。 21spring verです。 こちらでメモしつつ、変更したのでよかったら参照ください。 https://zenn.dev/sh090/scraps/3a6fed549d4716 チェケラ はじめに create react app with tsなプロジェクトにeslintとprettierを入れる記事です。 やりたいこと react × typescript なLint設定 Lintエラーの解消 VScode保存時に自動整形 3は別記事がたくさんありますが一応 注意書きみたいなの node, yarnがinstallされてる前提で話進めます yarn 使います Create React App 使います style guide はAirbnb ルールは各プラグインの推奨設定 ＋ α 各種version p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
