Reactにおけるスタイリングの選択肢

Reactは、コンポーネントのスタイリング方法を一つに限定していません。プロジェクトの要件に応じて、スタイルの適用方法を柔軟に選択できます。

Reactにおけるスタイリングは、依然としてCSSが基盤となっています。違いは、スタイルの整理方法やコンポーネントへの適用方法にあります。

このコースでは、2つの主要なスタイリング手法に焦点を当てます：

• インラインスタイル：style属性とJavaScriptオブジェクトを使用して、要素に直接スタイルを適用する方法；
• 外部CSSファイル：従来のCSSファイルにスタイルを記述し、クラス名を使って適用する方法。

ライブラリやフレームワークを使ったスタイリング

実際のプロジェクトでは、Reactアプリケーションはサードパーティ製ライブラリやフレームワークを使ってスタイリングされることが多いです。代表的な選択肢には以下があります：

• CSS Modules;
• Styled Components;
• Emotion;
• Tailwind CSS;
• Material UI (MUI);
• Chakra UI。

これらのツールは、スコープ付きスタイル、デザインシステム、ユーティリティベースのスタイリングなど、高度な機能を提供します。

ここで取り上げない理由

スタイリングライブラリは強力ですが、追加の複雑さをもたらし、Reactの基礎を超えた新しい概念を導入します。 本コースの目的は、強固な基礎を築き、Reactコンポーネントの仕組みを理解し、初期段階で不要な混乱を避けることです。