スタイルのコンポーネントを使用してUNSPLASHを再設計する方法

将来の安全なCSS：スタイルのコンポーネントを使用してReactスタイルを簡素化します

将来のために安全なCSSを書くことは挑戦です。何千ものCSSコードを書き込み、維持する必要がある場合、競合するクラス名、特異性の問題などが発生します。上記の問題を解決するために、スタイルのコンポーネントが生まれました。

スタイルのコンポーネントを使用すると、JSでCSSを簡単に記述し、クラス名の競合や特異性の問題を確保できず、他の多くの利点もあります。これにより、CSSを書くことがおやつになります。

このチュートリアルでは、スタイルのコンポーネントの長所と短所であるJSのCSSが何であるかを調べ、最後に、スタイルのコンポーネントを使用して、Unsplashをリファクタリングします。このチュートリアルを完了したら、すぐに開始し、スタイルのコンポーネントを使用できるはずです。

注：スタイル付きコンポーネントはReact専用に設計されているため、Reactを使用してスタイルのコンポーネントを使用する必要があります。

メインゲイン：

JSのCSSの基本を学び、CSSをJavaScriptで直接記述できるようにすることにより、スタイルのコンポーネントがプロセスをどのように単純化するかを学び、クラス名の競合や特異性の問題などの一般的な問題を回避します。

• 必要なインストールや初期構成ステップを含む、Reactプロジェクトでスタイルのコンポーネントを使用してセットアップする方法を学びます。
• 重要なCSSの自動注入、より小さなCSSパッケージ、Reactアプリケーション用の簡単なテーマなど、スタイルのコンポーネントの利点を調べます。
• 動的テーマを作成し、Reactアプリケーションでグローバルスタイルを管理することにより、スタイルのコンポーネントの実用的なアプリケーションを発見します。
• コード管理の容易さや未使用のCSSを効率的に除去する機能など、スタイルのコンポーネントのメンテナンス利点を学びます。
• 包括的なガイドに従って、各ステップの詳細なコードの例と手順を含むスタイルのコンポーネントを使用して、Unsplashインターフェイスをリファクタリングします。

前提条件：

このチュートリアルでは、Reactの基本を持っている必要があります。

このチュートリアルでは、糸を使用します。糸をインストールしていない場合は、ここからインストールしてください：

YARNインストールリンク

。

私たちが一貫した方法であることを確認するために、このチュートリアルで使用されているバージョンを次に示します。

ノード12.6.0

npx 6.4.1

• YARN 1.17.3
• CSSの進化：

JSでCSSを作成する前にWebアプリケーションをスタイリングする最も一般的な方法は、CSSを別のファイルに書き込み、HTMLからリンクすることです。

しかし、これは大規模なチームでトラブルを引き起こしました。誰もがCSSを書く独自の方法を持っています。これにより、特異性の問題が発生し、誰もがを使用します。

それからSASSが現れました。 SASSは、変数、ネストされたルール、インラインインポートなどを使用できるCSSの拡張です。また、物事を整理し続けるのに役立ち、スタイルシートをより速く作成することができます。

SASSはCSSよりも優れていると見なされる可能性がありますが、一部のシステムが整備されていない場合は利益よりも害を及ぼす可能性があります。

後で、ベムが現れました。 BEMは、一意のクラス名を書くことで特異性の問題を軽減できる方法です。 BEMは特異性の問題を解決しますが、HTMLがより冗長になります。クラス名は長く不要になる可能性があり、巨大なWebアプリケーションを持っている場合、一意のクラス名を思い付くのは困難です。

後、CSSモジュールが生まれました。 CSSモジュールは、SASSもBEMも解決できない問題を解決することにより、特異性の問題を解決します。これは、開発者が提供する名前に依存するのではなく、ツールを使用して、一意のクラス名の問題です。 CSSモジュールは、Reactエコシステムで非常に人気を博し、グラマーのようなプロジェクトへの道を開いています。

これらすべての新しいソリューションの唯一の問題は、開発者が新しい構文を学習しなければならないことです。 JSの.CSSファイルでCSSを書いた方法でCSSを正確に書くことができたらどうでしょうか？そのため、スタイルのコンポーネントが生まれました。

スタイルのコンポーネントは、ES6機能であるテンプレートリテラルを使用します。テンプレートリテラルは、式を埋め込むことを可能にする文字列リテラルです。それらは、マルチラインの文字列と文字列補間関数を使用することを可能にします。

スタイルのコンポーネントの主なセールスポイントは、JSで正確なCSSを書くことができることです。

スタイルのコンポーネントには多くの利点があります。以下は、スタイルのコンポーネントの長所と短所の一部です。

pro

スタイルのコンポーネントを使用するには、多くの利点があります。

1. キーCSSをdom

   に注入します

   スタイルのコンポーネントは、重要なCSのみをページに注入します。これは、ユーザーが特定のページに必要なCSSのみをダウンロードすることを意味し、他には何もありません。これにより、Webページの読み込みが速くなります。

2. 各ページのCSSパッケージは小さくなります
   ページ上のコンポーネントで使用されるスタイルのみを注入するため、パッケージサイズははるかに小さくなります。あまりにも多くのスタイルシート、正規化されたプログラム、レスポンシブデザインなどではなく、必要なCSSをロードするだけです。

3. 自動サプライヤープレフィックス
   スタイルのコンポーネントを使用すると、最新の標準に基づいてベンダープレフィックスを自動的に追加するCSSを作成できます。

4. 未使用のcss

   を削除します

   スタイルのコンポーネントを使用して、スタイルがコンポーネントと同じ場所にあるため、使用されていないCSSまたは無効なコードを削除する方が簡単です。これは、パッケージサイズの削減にも影響します。

5. テーマは簡単です
   スタイル付きコンポーネントは、Reactアプリケーションのテーマのセットアップを非常に簡単にします。アプリに複数のテーマを持つこともできますが、それでも簡単に維持できます。

6. HTTPリクエストの数を減らします
   リセット、正規化、およびレスポンシブデザイン用のCSSファイルがないため、HTTPリクエストの数は大幅に削減されます。

7. 一意のクラス名
   スタイルのコンポーネントビルドステップが発生するたびに一意のクラス名が生成されます。これにより、競合や特異性の問題の命名が回避されます。グローバルな競合はもはや必要ではなく、それらを解決するために

   タグを使用することを余儀なくされています。 !important

8. メンテナンスが簡単です

   スタイルのコンポーネントを使用すると、コンポーネントとスタイルを組み合わせることができます。これにより、メンテナンスが簡単になります。大規模なCSSファイルとは異なり、どのスタイルがコンポーネントに影響しているかを正確に知ることができます。

短所

もちろん、完璧なものはありません。スタイルのコンポーネントに関連するいくつかの欠点を見てみましょう。

スタイルシートをキャッシュできません

1. 通常、ユーザーがWebサイトにアクセスすると、Webブラウザーは.cssファイルをキャッシュして、次にアクセスしたときに同じ.cssファイルを再度ダウンロードする必要がないようにします。しかし、スタイルのコンポーネントの場合、スタイルは

   タグを使用してDOMにロードされます。したがって、ユーザーがWebサイトにアクセスするたびにスタイルを要求する必要があります。

   <style></style>

2. のみ反応します

   スタイルのコンポーネントは、React用に設計されています。したがって、それは反応固有です。他のフレームワークを使用する場合、スタイルのコンポーネントを使用することはできません。

   ただし、フレームワークフリーの感情と呼ばれるスタイルのコンポーネントに非常に似た代替手段があります。

実用操作：

スタイルのコンポーネントの長所と短所がわかったので、始めましょう。

Create-React-Appを使用して新しいReactプロジェクトを作成します。それを作成するには、NPXを使用します。これにより、グローバルネームスペースを汚染せずにパッケージを一時的にダウンロードして実行できます。

端末に次のように入力してください：

次に、このチュートリアルに必要な次のパッケージ、つまりスタイルのコンポーネントとReact-med-image-zoom：

<code class="language-bash">$ npx create-react-app unsplash-styled-components</code>

をインストールして、

ディレクトリに移動します。 unsplash-styled-components

<code class="language-bash">$ cd unsplash-styled-components
$ yarn add styled-components react-medium-image-zoom</code>

パッケージを使用すると、JSで実際のCSSを書き込むことができますが、

パッケージではミディアムスタイルで画像をズームインできます。 styled-components react-medium-image-zoomさて、インストールが完了したら、

、

、src/、App.cssなどのApp.test.jsディレクトリから不要なファイルを削除します。 index.css logo.svg

from> fromそれは不要になったからです。 index.js import './index.css';

の内容を次のものに置き換えます

App.js端末で

と入力して、開発サーバーを実行してみます。

<code class="language-javascript">import React from 'react'

const App = () => <h1>Hello React</h1>

export default App</code>

以下に示すように、スクリーン印刷が表示されるはずです：yarn start

Hello React

スタイルのコンポーネントタグテンプレートリテラルを使用して、コンポーネントをスタイリングします。

スタイルのコンポーネントを使用して、ピンクの背景にH1を白いテキストに設定すると仮定します。これを行う方法は次のとおりです

次のようになります：

<code class="language-javascript">import React from 'react'
import styled from 'styled-components'

const Header = styled.h1`
    background-color: pink;
    color: white;
`

const App = () => <header>Hello React</header>
export default App</code>

最初のスタイルのコンポーネントを作成しましたHeader。 Headerコンポーネントはstyled.h1に割り当てられています。 styled-componentsstyledからのデフォルトのエクスポートには、div、span、h1、h2、

などの基本的なHTMLプリミティブがあります。

styled.h1

では、実際のCSSを書きます。スタイルオブジェクトを作成する代わりに、CSSを作成していることに注意してください。

さらに、Headerコンポーネントは、ブラウザでH1タグと一意のクラス名に置き換えられます。同じ一意のクラス名を持つスタイルタグがDOMに挿入されます。これが、スタイルのあるコンポーネントが実際にどのように機能するかです。

私たちのスタイルは、コンポーネントと同じファイルにあります。これは、コンポーネントがスタイルと同じ場所にあることを意味します。したがって、特定のコンポーネントに関連するスタイルを削除する方が簡単で、無効なコードが排除されます。

伝統的に、特定の要素のクラス名またはIDまたは特定のセレクターを見つけてから、1つずつ削除する必要があるため、CSSで推論することは困難です。小規模プロジェクトでは簡単ですが、プロジェクトの複雑さが増すにつれて困難になる可能性があります。スタイルのコンポーネントを使用すると、プロジェクトがどんなに複雑であっても、コンポーネントと同じ場所にあるため、スタイルの追加、編集、削除が簡単です。

（次の手順、スペースの制限により、残りの部分のコードとスクリーンショットの説明はここで省略されていますが、論理構造は元のテキストと一致しています。元のテキストによると。）

結論：

スタイルのコンポーネントを使用すると、JSでプレーンCSSを簡単に記述できます。スタイルを簡単に追加、編集、削除できるように、コンポーネントと一緒にスタイルを組み合わせることができます。

グローバルスタイルを追加し、css属性を使用してスタイルを再利用する方法、およびアプリケーションのテーマを設定する方法を学びました。スタイルのコンポーネントの表面にのみ触れました。公式Webサイトで詳細をご覧ください。

最後に、スタイルのコンポーネントを使用して、Unsplashをリファクタリングしました。完全なコードはgithub：github linkで見つけることができ、デモはで表示できます。

スタイルのコンポーネントの使用に関するFAQ：

（元のテキストにリストされているFAQは、長さが長すぎるため、ここで省略されていますが、FAQパーツを保持して元のテキストに基づいて回答を入力することをお勧めします。） >

以上がスタイルのコンポーネントを使用してUNSPLASHを再設計する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。