Webフロントエンド

Styled-Components：最新のWeb用のCSS-in-JSライブラリ

CSSは、「古いWeb」に含まれると予想されていたドキュメント用に設計されました。 SassやLessのようなプリプロセッサの出現は、コミュニティがCSSが提供する以上のものを必要としていることを示しています。 Webアプリが時間の経過とともにますます複雑になるにつれ、CSSの制限はますます目に見え、緩和するのが困難になっています。

スタイル付きコンポーネント 完全なプログラミング言語（JavaScript）の能力とそのスコープ機能を活用して、コードをコンポーネントに構造化するのに役立ちます。これは、大規模なプロジェクトでCSSを作成および保守する際の一般的な落とし穴を回避するのに役立ちます。開発者は、副作用のリスクなしにコンポーネントのスタイルを説明できます。

どうしたの？

CSSを使用する利点の1つは、スタイルがコードから完全に切り離されていることです。これは、開発者と設計者が互いに干渉することなく並行して作業できることを意味します。

一方、 スタイル付きコンポーネント 強く結合するスタイルとロジックの罠に陥りやすくなります。 Max Stoiberが、これを回避する方法を説明しています。ロジックとプレゼンテーションを分離するという考えは確かに新しいものではありませんが、Reactコンポーネントを開発するときに近道を取りたくなるかもしれません。たとえば、クリックアクションとボタンのスタイルを処理する検証ボタンのコンポーネントを簡単に作成できます。 2つのコンポーネントに分割するにはもう少し手間がかかります。

コンテナ/プレゼンテーションアーキテクチャ

これは非常に単純な原則です。コンポーネントは、物事がどのように見えるかを定義するか、データとロジックを管理します。プレゼンテーションコンポーネントの非常に重要な側面は、依存関係がないことです。彼らは小道具を受け取り、それに応じてDOM（または子）をレンダリングします。一方、コンテナはデータアーキテクチャ（状態、redux、fluxなど）について知っていますが、表示の責任を負わないようにする必要があります。そしてアブラモフの記事は、このアーキテクチャの非常に優れた詳細な説明です。

SMACSSを覚えている

が CSS用のスケーラブルでモジュラーなアーキテクチャはCSSを整理するためのスタイルガイドであり、基本的な概念は、ほとんどの場合、自動的にスタイル付きコンポーネントが続くものです。アイデアは、CSSを5つのカテゴリに分類することです。

次の評価指標のうち、収益のない企業を比較するためによく使用されるのはどれですか？

ベース すべての一般的なルールが含まれています。
レイアウト の目的は、コンテンツのさまざまなセクション（ヘッダー、フッター、サイドバー、コンテンツなど）だけでなく、構造プロパティを定義することです。
モジュール UIのさまざまな論理ブロックのサブカテゴリが含まれています。
状態要素の状態を示す修飾子クラスを定義します。例：エラーのあるフィールド、無効なボタン。
テーマ 色、フォント、およびユーザーの好みに応じて変更または依存する可能性のあるその他の外観上の側面が含まれています。

使用中にこの分離を維持する スタイル付きコンポーネント は簡単だ。プロジェクトには通常、ある種のCSSの正規化またはリセットが含まれます。これは通常、 ベース カテゴリー。一般的なフォントサイズ、行サイズなどを定義することもできます。これは、通常のCSS（またはSass / Less）を介して、またはinjectGlobalを介して行うことができます。によって提供される機能 スタイル付きコンポーネント 。

ために レイアウト ルールでは、UIフレームワークを使用する場合、おそらくコンテナクラスまたはグリッドシステムを定義します。これらのクラスは、作成するレイアウトコンポーネントで独自のルールと組み合わせて簡単に使用できます。

モジュール のアーキテクチャが自動的に続きます スタイル付きコンポーネント 、スタイルは外部ファイルに記述されるのではなく、コンポーネントに直接アタッチされるためです。基本的に、作成するスタイル付きコンポーネントはそれぞれ独自のモジュールになります。副作用を気にせずにスタイリングコードを書くことができます。

状態コンポーネント内で変数ルールとして定義するルールになります。 CSS属性の値を補間する関数を定義するだけです。 UIフレームワークを使用している場合は、コンポーネントに追加するのに役立つクラスもあるかもしれません。おそらく、CSS疑似セレクタールール（ホバー、フォーカスなど）もあります。

ヘッダーファイルc ++とは

ザ・ テーマ コンポーネント内で簡単に補間できます。テーマを、アプリケーション全体で使用される変数のセットとして定義することをお勧めします。たとえば、コントラストやハイライトを処理するために、プログラムで（ライブラリを使用して、または手動で）色を導出することもできます。あなたは自由に使えるプログラミング言語の全力を持っていることを忘れないでください！

解決策のためにそれらをまとめる

ナビゲーションを簡単にするために、これらをまとめておくことが重要です。タイプ（プレゼンテーションとロジック）ごとに整理するのではなく、機能ごとに整理します。

したがって、すべての汎用コンポーネント（ボタンなど）用のフォルダーが作成されます。その他は、プロジェクトとその機能に応じて編成する必要があります。たとえば、ユーザー管理機能がある場合は、その機能に固有のすべてのコンポーネントをグループ化する必要があります。

適用する スタイル付きコンポーネント」 SMACSSアプローチへのコンテナ/プレゼンテーションアーキテクチャでは、追加のタイプのコンポーネントが必要です：構造。最終的には3種類のコンポーネントになります。スタイル、構造、およびコンテナ。以来 スタイル付きコンポーネント タグ（またはコンポーネント）を装飾します。DOMを構造化するには、この3番目のタイプのコンポーネントが必要です。場合によっては、コンテナコンポーネントがサブコンポーネントの構造を処理できるようにすることも可能ですが、DOM構造が複雑になり、視覚的な目的で必要になる場合は、それらを分離するのが最善です。良い例はテーブルで、DOMは通常非常に冗長になります。

サンプルプロジェクト

これらの原則を説明するレシピを表示する小さなアプリを作成しましょう。 Recipesコンポーネントの構築を開始できます。親コンポーネントはコントローラーになります。状態（この場合はレシピのリスト）を処理します。また、API関数を呼び出してデータをフェッチします。

class Recipes extends Component{ constructor (props) { super(props); this.state = { recipes: [] }; } componentDidMount () { this.loadData() } loadData () { getRecipes().then(recipes => { this.setState({recipes}) }) } render() { let {recipes} = this.state return ( ) } }

レシピのリストを表示しますが、その方法を知る必要はありません（また、そうすべきではありません）。したがって、レシピのリストを取得してDOMを出力する別のコンポーネントをレンダリングします。

class RecipesContainer extends Component{ render() { let {recipes} = this.props return ( {recipes.map(recipe => ())} ) } }

ここでは、実際にタイルグリッドを作成します。実際のタイルレイアウトを汎用コンポーネントにすることをお勧めします。したがって、それを抽出すると、次のような新しいコンポーネントが得られます。

class TilesContainer extends Component { render () { let {children} = this.props return ( { React.Children.map(children, (child, i) => ( {child} )) } ) } }

TilesStyles.js：

export const Tiles = styled.div` padding: 20px 10px; display: flex; flex-direction: row; flex-wrap: wrap; ` export const Tile = styled.div` flex: 1 1 auto; ... display: flex; & > div { flex: 1 0 auto; } `

このコンポーネントは純粋に表示用であることに注意してください。スタイルを定義し、受け取った子を、タイルがどのように見えるかを定義する別のスタイル付きDOM要素内にラップします。これは、一般的なプレゼンテーションコンポーネントがアーキテクチャ的にどのように見えるかを示す良い例です。

次に、レシピがどのように見えるかを定義する必要があります。比較的複雑なDOMを記述し、必要に応じてスタイルを定義するためのコンテナーコンポーネントが必要です。私たちはこれで終わります：

class RecipeContainer extends Component { onChangeServings (e) { let {changeServings} = this.props changeServings(e.target.value) } render () { let {title, ingredients, instructions, time, servings} = this.props return ( {title} {time} Serving {ingredients.map((ingredient, i) => ( {ingredient.name} {ingredient.quantity * servings} {ingredient.unit} ))} {instructions.map((instruction, i) => ({instruction}
))} ) } }

ここで、コンテナはいくつかのDOM生成を行いますが、コンテナに含まれるロジックはこれだけであることに注意してください。ネストされたスタイルを定義できるため、スタイル設定が必要なタグごとにスタイル要素を作成する必要がないことに注意してください。ここでは、材料アイテムの名前と数量について説明します。もちろん、それをさらに分割して、材料の新しいコンポーネントを作成することもできます。プロジェクトの複雑さに応じて、粒度を決定するのはあなた次第です。この場合、これはRecipeStylesファイルの残りの部分と一緒に定義されたスタイル付きコンポーネントです。

export const Recipe = styled.div` background-color: ${theme('colors.background-highlight')}; `; export const Title = styled.div` font-weight: bold; ` export const Ingredients = styled.ul` margin: 5px 0; ` export const Ingredient = styled.li` & .name { ... } & .quantity { ... } `

この演習では、ThemeProviderを使用しました。スタイル付きコンポーネントの小道具にテーマを挿入します。単にcolor: ${props => props.theme.core_color}として使用できます。テーマの属性の欠落から保護するために、小さなラッパーを使用しています。

const theme = (key) => (prop) => _.get(prop.theme, key) || console.warn('missing key', key)

モジュールで独自の定数を定義し、代わりにそれらを使用することもできます。例：color: ${styleConstants.core_color}

長所

使用の特典 スタイル付きコンポーネント それはあなたが好きなだけそれを使うことができるということです。お気に入りのUIフレームワークを使用して追加できます スタイル付きコンポーネント その上。これは、既存のプロジェクトコンポーネントをコンポーネントごとに簡単に移行できることも意味します。ほとんどのレイアウトを標準のCSSでスタイル設定し、使用することのみを選択できます スタイル付きコンポーネント 再利用可能なコンポーネント用。