Reactコンポーネントの規約
ファイル内の構造順序を守る
すべてのコンポーネントファイルは、上から順に次の流れで構成します。
- デザイン定義 —
sva/cva/cssなどのstyled-system呼び出し - props定義 —
type Props = ...やinterface Props { ... } - Functional Component定義 —
export const Foo: React.FC<Props> = ...やexport function Foo(props: Props): React.ReactElement { ... }
import群は当然この前に置きます。 純粋な振る舞いだけのコンポーネントならデザイン定義は省略可能ですが、 それ以外で順序の入れ替えは認めません。
理由: 「見た目」「インターフェース」「振る舞い」の責務分離をファイル内の縦方向で表現することで、 コンポーネントを読むときの認知の階段を一定に保つため。
1ファイル1コンポーネント
1つのファイルの中にex
[Description truncada. Veja o README completo no GitHub.]