React勉強会

1. Reactでcomponent化
してシンプルになった話
有限会社バーチャルテクノロジー
森下大貴

2. DatePicker:
フォームをクリックするとカレンダーが表示され
日付を選択すると、選択した日付がフォームに入力され
るコンポーネント

4. DatePickerの場合
変数を用意して 変更用の関数を用意

5. フォームの書き方
UnControlled Controlled
• Reactの仕様
• 初期値を設定出来ない
• 初期値を設定出来る
• 変更用の処理を用意しなけれ
ばならない

6. UnControlled
Controlled

7. Before After

8. 名前と変数を渡すだけ

9. 今までのDatePickerは
ここで呼んでいる。
CommonDatePicker
コンポーネントの中で変更
処理を完結させている
(コンポーネント内で隠蔽)

10. ラジオボタン(CommonRadioBtn)
Before After

11. コンポーネント化したもの
• フィルターボックス(CommonFilterBox)
• セレクトボックス(CommonSelectBox)
• テキストボックス(CommonInputText)
• テーブル(CommonTable)
• ラジオボタン(CommonRadioBtn)
• カレンダー(CommonDatePicker)

12. コンポーネント化によるメリット
• 変数や変更処理を行う関数などを１つのコンポーネントにまとめ
ることで再利用が可能になる。
• 呼び出し引数が少なくなり、変更に伴う修正箇所が最小限で済む。
• コードがシンプルになったために可読性が上がる。
コンポーネント化を意識したことで、コーディングが楽になった