コード品質

Reactは，HTMLやJS,CSSを混同して記述できるJSXが使われています。
そのため、多様な書き方で実装することが出来てしまいます。

以下のQiitaの記事がかなり良い内容なので、おすすめです。

基本編

【コード品質】綺麗なReactコード 基本7例

1. 文字連結は直感的で分かりやすく
2. ifの乱用は行数を多く取る
3. Importに規則性はあるか
4. AND/OR文はReactと相性良い，ただ使いすぎに注意
   1. OR: 変数に値が存在するとき代入したいとき
   2. AND: 変数に値が存在するか確認して代入したいとき
5. render内イベント命令系は切り離す
6. Styleも適度に切り出す
7. オブジェクトは使いこなせているか
8. UIライブラリは使いこなせているか

中級編

【コード品質】綺麗なReactコード 中級 7例

1. 値の受け渡しは簡潔であるか
   1. 受取：値をまとめて受け取る
   2. 代入：プロパティ値の省略形を使えているか
2. 関数コンポーネントの方が可読性は高い
3. useEffectは複数書いても良い
4. 少ないuseStateでデータを流す
5. 使用するPropsの値の見える化
6. データ保持系はルール通りに使えているか
7. Style方法 の使い分けはできているか
   1. CSS Module：基本はCSS/SCSSベースでデザインする
   2. Inline CSS: 一部の動的な変更
   3. CSS In Js 変更できないクラス名のスタイルを動的に変更したいとき

上級編

【コード品質】綺麗なReactコード 応用７例

1. 無駄なアルゴリズムの適応はするな
2. <>JSX部分</>に集中できる構成になっていること
3. データの入力でuseStateを多用しない
4. オプショナルに対して、デフォルト引数は使用できているか
5. ファイルImport記述を意識しているか
6. 配列メソッドを使いこなそう
7. サービス独自の値の管理方法は統一する