Component Driven Development(CDD)

Component Driven Development

以前に使用したUIコンポーネントが他の計画で再使用された場合、開発者は再作成する必要がありますか?結論から言えばそうではない.設計と開発段階から再利用できるUIコンポーネントがあれば、これらの問題を解決できます.
この問題を解決するには、アセンブリ可能なコンポーネントとしてコンポーネント駆動開発(CDD)を使用してUIコンポーネントを作成します.

コンポーネントUIを開発するためのStoryBook

CCDはUIを作成するためのツールであり、1つのコンポーネントで各コンポーネントを動作させ、UI全体を視覚的に見て開発するための開発ツールであり、複数のテストを決定する.

StoryBookがサポートする主な機能について説明します

1.UI 컴포넌트들을 카탈로그 화하기
2.컴포넌트 변화를 Stories로 저장하기
3.핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
4.리액트를 포함한 다양한 뷰 레이어 지원하기

なぜ構造化cssが必要なのですか?

cssには統一的なモードがなく,従来のコンピュータという限定的な装置では,移動,タブレットなど多くの装置が出現し続けたため,cssはますます大きく複雑になってきた.これらの問題を解決するために、cssを構築する方法がいくつか現れ、以下はこれらの問題を解決する方法である.

cssフロントプロセッサ(cssプリプロセッサ)

cssフロントプロセッサは、cssを構造的に作成するのに役立つツールです.
プログラミング概念(変数,関数,継承など)を用いてcssの問題を解決しようとする.しかし、問題は、Webサーバが認識できない欠点は、実際に使用しているcssドキュメントに変換するには、各cssフロントプロセッサに適したコンパイラを使用しなければならないことです.

1. SASS

cssフロントプロセッサの1つで、CSSをシステム美観スタイルシートの略に拡張するスクリプト言語です.
JSの特定属性(ex.color、margin、widthなど)の値(ex.#ffffff、25 rem、100 pxなど)を変数として宣言し、必要に応じて宣言された変数を適用したり、重複したコードを一度の宣言として複数の場所で再利用したりすることができます.
しかし、欠点は、スタイルが重なる問題を解決するために、階層の作成だけでcssの容量が急激に増加することです.

2.BEM（css方法論）

クラス名はBlock、Element、およびModifierで区切られ、Block、Element、およびModifierで区切られます.
この方法の利点は、html/css/SASS/ファイルを一貫した符号化構造にすることができることである.
その欠点は、寸法が不要になり、再使用するたびにUIコンポーネントを明示的に拡張し、カプセル化できないことです.

3. CSS- in -JS

CSSを素子領域と呼ぶためにCS-In-JSが誕生したので,CS-In-JSの代表的なStyled-Componentについて理解しよう.
スタイル→コンポーネントの作成例

まず、Styled Componentの代表的な特徴を見てみましょう.

Styled Componentの使用方法"$"
CSSコードが重複している場合は、変数を使用して再利用可能な別の変数を宣言する場合は、$記号を使用します.

自動キーCSS

スタイルコンポーネントは、画面でレンダリングされた要素を追跡することによって、対応する要素のスタイルを自動的に挿入します.したがって、コードを適切に割り当てることで、ユーザーがアプリケーションを使用するときに、画面に最小限のコードしか表示されないことを保証できます.

No class name bugs

Styled Component独自のclassNameを作成します.これにより、classNameの重複またはエラーによるエラーを低減できます.
CSS

Easierを削除するには、使用しないコンポーネントまたは削除しないコンポーネントのスタイルプロパティを削除するために、CSSファイル内のclassNameを検索する必要があります.ただし、Styled Componentのすべてのスタイル属性は特定の構成部品に関連付けられているため、構成部品を使用せずに削除すると、スタイル属性も削除されます.

単純ダイナミックスタイル

クラス名は単純で直感的であり、手動で管理する必要はなく、Reactのpropsまたはグローバル属性に基づいて構成部品にスタイル属性を付与するだけでよい.

ペーパーレスメンテナンス

コンポーネントは他のCSSファイルを検索する必要がないので、コードが大きくなってもメンテナンスは難しくありません.

自動仕入先は、

個のコンポーネントを含む既存のCSSごとにスタイル属性を定義するだけでよい.その他はStyled Componentで処理します.

Styled ComponentタグテンプレートテキストというES 6構文

を使用