- The how and why of flexible React components - Speaker Deck
- Defining Component APIs in React
-
The fewer new things you need to learn, the easier it is for others to know how to use the components that you create, making them more reusable.
- コンポーネントのAPIが少ないほど、読み手が学ぶことは少なく済む
-
Apropcalypse
- props増加 → コンポーネントの責任増加を意味する
-
- Avoid soul-crushing components | Epic React by Kent C. Dodds
- レイアウトプリミティブ
- コンポーネントにmargin混ぜない
- フロントエンドのコンポーネント設計に立ち向かう #JavaScript - Qiita
- Margin considered harmful
-
Margin makes reusability harder. Good components are usable in any context or layout.
- 再利用性の問題。優れたコンポーネントはコンテキストやレイアウト問わず再利用可能。
- デザインは、コンポーネントにmarginを持つ形じゃなくて、要素間の空間について考えられている → marginじゃなくてスペースで実装することがデザインと近い形になる
-
Use spacer components. Ban margin.
-
- ESLint plugin - Usage - Components - Atlassian Design System / no-margin
- Reactで余白をどうスタイリングするか
- 分かりにくいmarginの相殺
- Margin considered harmful
- Don't Override Component CSS | Michael Thiessen
- component driven
- Component Driven User Interfaces
-
Components enable interchangeability by isolating state from application business logic. That way, you can decompose complex screens into simple components. Each component has a well-defined API and fixed series of states that are mocked. This allows components to be taken apart and recomposed to build different UIs.
- uiとアプリケーションロジックは切り離す。そうしてシンプルなuiコンポーネントが分解可能になって、再構成して異なる画面を組み立てられる
- Build one component at a time → Combine components → Assemble pages → Integrate pages into your project
-
- Component-Driven Development
- Component Driven User Interfaces
- scope
- 内部品質
- Design System
Last active
February 28, 2024 17:14
-
-
Save makotot/134dfd4ccb4082d732ef7280405c06bb to your computer and use it in GitHub Desktop.
ui component architecture
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment