react atomic design
1.0.0
これは、Storybook、Flow、CSS モジュールなどの優れた機能をいくつか使用した Atomic Design 方法論の定型文です。すべてを自由にテスト、変更、適応させてください。
記事全文を読む
デザインの世界では広く知られている Atomic Design は、一貫性があり、堅牢で再利用可能なデザイン システムの構築に役立ちます。さらに、React、Vue、およびコンポーネント化を促進するフレームワークの世界では、Atomic Design が無意識に使用されています。しかし、正しい方法で使用すると、開発者にとって強力な味方になります。
Atomic Design という名前は、上の画像のように、コンポーネントを原子、分子、生物、テンプレート、ページに分離するという考えに由来しています。しかし、分離された各部分の責任は何でしょうか?
アトムは、ボタン、タイトル、入力またはイベントのカラー パレット、アニメーション、フォントなど、可能な限り最小のコンポーネントです。これらは、このボタンの例のように、無効、ホバー、さまざまなサイズなど、多くの状態を持つだけでなく、グローバルに、または他のコンポーネントやテンプレート内で、あらゆるコンテキストに適用できます。
それらは、原子の 1 つまたは複数の成分の構成です。ここでは、複雑なコンポーネントの作成を開始し、それらのコンポーネントの一部を再利用します。分子は、それ自体では機能や作用を持たない原子を利用することで、独自の性質を持ち、機能を生み出すことができます。
生物は、一緒に機能する分子の組み合わせ、またはさらに精巧な界面を構成する原子との組み合わせです。このレベルでは、コンポーネントは最終的な形状を持ち始めますが、独立性、移植性、およびあらゆるコンテンツで再利用できる程度の再利用性が確保されています。
この状態では、コンポーネントの作成を停止し、コンポーネントのコンテキストの設定を開始します。さらに、テンプレートはページの位置、配置、パターンを通じて生物とその他のコンポーネント間の関係を作成しますが、スタイル、色、コンポーネントはレンダリングされません。そのためワイヤーフレームのように見えます。
ページはアプリケーションのナビゲーション部分であり、コンポーネントが 1 つの特定のテンプレートで配布される場所です。コンポーネントは実際のコンテンツを取得し、アプリケーション全体に接続されます。この段階では、設計システムの効率をテストして、すべてのコンポーネントが十分に独立しているかどうか、またはコンポーネントをより小さな部分に分割する必要があるかどうかを分析できます。
React 内で Atomic Design を使用し始めたとき、コンポーネントが可能な限り再利用され、ステートレスで、位置のスタイルや非常に具体的なマージンがないことを確認して、コンポーネントでの副作用を避けるために、方法論のルールをいくつか調整する必要がありました。アプリケーションのページ。
そこで私たちは、新しいコンポーネントを作成するたびに、「これらのコンポーネントは、どのようなコンテキストで使用される場合でも、特異性やコードの繰り返しを避けるのに十分な汎用性を備えているか?」と自問しました。
したがって、いくつかのルールを書くことができました。
| スクリプト | 説明 |
|---|---|
$ yarn start | 単純な Webpack サーバーを開始する |
$ yarn dev | ポート5000で開発用のサーバーを作成します |
$ yarn storybook | インポートされたストーリーで Storybook を開始します |
$ yarn flow | フロータイプを検証する |
@danilowoz
@dileite
マサチューセッツ工科大学
