下記の環境での話をしますが、特に全てに当てはまらなくても解決できると思います VSCode webpack babel typescript React alias(エイリアス)について 簡単にaliasについて説明します。JSを書いてると、importして他のコンポーネントを使うということがよく…

ReactのテストでJestやenzymeを使うことは多いと思うのですが、React v16.8以降でFunctionComponentでの書き方を使う機会が増えたにもかかわらず、useSelectorやuseDispatchあたりをclassでなくFunctionComponentで使ったテストケースがあまり見つからず困っ…

StorybookをReact, Typescript, Atomic Designな環境に導入する手順を紹介します。 Why Storybook? Frontendの開発を行っていると、再利用性を高めたいという意識が湧いてくると思うのですが、それをチーム間で共有したり、デザイナーさんと認識を合わせるの…

Reactでドロップダウンメニューを作成する機会があったのですが、いくつかハマりポイントがあったので書いておきます。まずはじめに要件としては下記のことがあげられます。 ボタンを押すとdropdownメニューが開く ドロップダウンメニュー以外の場所を押すと…

こんにちは。この記事ではredux-formをReact.jsで使った際のテストについて紹介したいと思います。 話をシンプルにするために、簡単なcomponentとreducerのテストを見せます。 下記がテスト用に使っているライブラリになります。 mocha chai enzyme sinon ※…

最近onBoardingページにReact.jsをredux, redux-formと使い始めました。 今回はその際に私が躓いた3つのポイントを紹介します。 デフォルト値の設定方法 ラジオボタンを使ったラベル選択方法 ユーザーが次のフォームに移った時にどうやって自動的に値を設定…