Skip to content

SystemEngineeringTeam/react-workshop

Repository files navigation

Reactポイント集

あくまでも個人的な意見です. 他の人が違う意見を持っているかもしれません.

クソコードとして紹介していますが、決してそのコードを書いた人の人格を否定をしているわけではありません.

命令形はよくない書き方. 意志形(~しよう)はよりよい書き方. 宗教がある場合は ※ を付けている.

レベル: ☆: 初心者も含た全人類 ☆☆: 一人で作り上げられるレベル ☆☆☆: 完璧レベル ☆☆☆☆: 勉強会で扱っていいレベルを超えている

はじめに

React 大学附属 useState を乱用するな高校校歌 https://www.bearwapps.com/posts/react-school-song-dont-overuse-usestate

項目

  • ☆ 命名規則は従え
  • ☆ コンポーネントのファイル名は大文字にしろ
  • ☆☆ ステートだからと useState を乱用するな
  • ☆ as は身を滅ぼす
  • ☆ステートに依存するステートは useState で持たせるな ※例外あり
  • ☆ Propsバケツリレーはやめろ
  • ☆☆☆ コンポーネントにmarginを持たせるな
  • ☆ ステートの更新はset関数を使え
  • ☆☆ 現在のステートを元にステートを更新するなら callback を使え
  • ☆☆ index.{ts, tsx} ファイルはいいぞ
  • ☆☆ フォルダー構造を意識しろ
  • ☆ key は正しく指定しろ
  • ☆ JSX内の条件分岐は気をつけろ
  • ☆☆☆☆ useReducer を活用しよう
  • ☆☆ 依存配列を正しく指定しろ
  • ☆☆ ステートをリセットしたいときは key を活用しよう
  • ☆☆ as const はReact人生を豊かにする
  • ☆☆ コンポーネントは細かく分割しろ
  • ☆☆ コンポーネントを細かく分割しすぎるな
  • ☆☆ useEffects の callback を正しく指定しろ
  • ☆☆ 無闇にコンポーネント外の変数を使うな
  • ☆☆ カスタムフックでビューとロジックを分けよう
  • ☆☆ コンポーネント内でコンポーネントを定義するな
  • ☆☆ 引数を増やしすぎるな ※場合による
  • ☆☆ useRef を活用しよう
  • ☆ React 単体はインポートするな
  • ☆☆ if 文の中身を増やしすぎるな
  • ☆☆ 早期 return をしろ
  • ☆☆ 型推論を活用しよう ※宗教あり
  • ☆ フックはコンポーネントかカスタムフック内でのみ使え
  • ☆ スペース開けるのに (スペース)を使うな
  • ☆ 変数と文字列の結合はテンプレートリテラルを使え
  • ☆☆ useCallcack, useMemoでレンダリングを抑えよう
  • ☆☆☆☆ render hooks パターンを使おう

Releases

No releases published

Packages

No packages published