[CS] React Component Day-32

CDD (Component Driven Development)

UIコンポーネントをコンポーネント単位で作成し、レゴにアセンブリする開発を続行できます.

Storybook

CDDをサポートするツールの1つは、Component Explorerです.UI開発ツールには多くの種類があり、その一つがStoryBookです.
各構成部品は、1つの構成部品を一度に処理するために個別に表示するように構成できます.UI全体を一目で見て開発できます.
再利用性を向上させるために、StoryBookは構成部品を記録し、シミュレーション可能なさまざまなテストステータスを表示するために構成部品を自動的に可視化することができます.△誤りの予防に役立つ.
テストと開発の速度を速め、依存性を心配することなく構築できます.

StoryBookのインストールと設定方法

# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox

cd taskbox

# Install dependencies
yarn

CSSの発展

インターネットの発展に伴い、CSSの作成方式も絶えず発展している.
プロジェクトの規模や複雑さの増加や、各種機器(モバイル機器、タブレットPCなど)の発売に伴い、CSSはさらに複雑になった.
したがって,構造化CSSの必要性を検討し,CSSの効率化を図る必要がある.

SASS (Syntactically Awesome Style Sheets)

CSSのスクリプト言語を拡張します.
重複コードは、複数の場所で繰り返し使用できます(たとえば、1回の宣言).したがって、SASSは、SCSSコードの読み取りと前処理を担当するプリプロセッサであり、コンパイルを行い、グローバルCSSバンドルファイルを生成する.
しかし、その欠点は容量がますます大きくなることです.

問題を補うために方法論が主流になった。

コード

を繰り返し使用

コードの簡潔性(保守可能)

コードの拡張性

コードの予測性(クラス名)

これらのCSSメソッドは、チームパートナーのチームワークにも関連しているため、複数のチームメンバーが共同で作業する場合、CSSを作成するルールを作成することが重要です.

方法論にも問題がある...

クラス名が長くなり、再利用しようとする場合は、すべてのUIコンポーネントを明示的に拡張する必要があります.

Styled Componentの登場ですべての問題が解決しました

Styled Componentは、UIを機能またはステータス要素から完全に分離できる非常に簡単なモードを提供します.

サマリ

CSS
プロパティぷろぱてぃ:基本モデリングきじゅんもでる
長所:…?
欠点:統一的なパターンを形成するのは難しい.

SASS
特徴:プログラミング方法でCSSをコンパイルするフロントプロセッサを作成する
利点:変数/関数/継承コンセプトの繰り返し使用
欠点:デバッグが難しく、容量が大きい

BEM
フィーチャー:CSSクラス名のコンシステントモードを強制的に作成する方法
利点:名前を付けて問題を解決し、前処理を必要としない
短所:類名が多くなると元気がなくなる...

Styled-Component
特徴:構成部品ベースのCSSライブラリの作成に役立ちます
利点:CSSをコンポーネントにカプセル化する必要はなく、名前や最適化を考慮する必要もありません.
欠点:ページの高速ロードには不利です.