著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

このチュートリアルでは、 React コンポーネントのスタイルを設定する3つの異なる方法を学習します。プレーンカスケードスタイルシート（CSS）、 JavaScriptスタイルオブジェクトを使用したインラインスタイル、 JSS 、JavaScriptでCSSを作成するためのライブラリ。 これらのオプションにはそれぞれ長所と短所があり、スタイルの競合に対する保護を強化したり、小道具やその他の動的データを直接参照したりできるものもあります。 ただし、すべてのオプションに共通する点が1つあります。これらのオプションを使用すると、コンポーネント固有のスタイルをコンポーネントに近づけて、プロジェクト全体または関連のない多くのプロジェクト間でコンポーネントを再利用しやすくなります。

これらの各オプションは、CSSプロパティに依存しています。 ランタイムデータなしでプレーンCSSを使用するには、スタイルシートをインポートできます。 コンポーネントと統合されたスタイルを作成する場合は、CSSプロパティ名をキーとして使用し、スタイルを値として使用するインラインスタイルオブジェクトを使用できます。 最後に、組み合わせが必要な場合は、JSSなどのサードパーティライブラリを使用して、JavaScript構文でCSSを記述できます。これは、CSS-in-JSと呼ばれるソフトウェアの概念です。

これらのメソッドを説明するために、propに応じて成功スタイルまたはエラースタイルのいずれかを表示するサンプルalertコンポーネントを作成します。 alertコンポーネントは、任意の数の子を取ります。 これは、子コンポーネントのスタイルを知る方法がないため、スタイルの競合に注意する必要があることを意味します。 alertコンポーネントを作成したら、各スタイリングオプションを使用してリファクタリングし、アプローチ間の類似点と相違点を確認できるようにします。

前提条件

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.20.1およびnpmバージョン6.14.4でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04