「30 Days of ReactJS」チャレンジの 4 日目へようこそ!今日は、React アプリケーションの構成要素である コンポーネントとプロップ について見ていきます。これらの概念を理解すると、UI を再利用可能な独立した部分に分割できるようになります。

コンポーネントとは?

React のコンポーネントはレシピの材料に似ています。さまざまな食材を組み合わせて料理を作成するのと同じように、コンポーネントを組み合わせて React アプリケーションを構築します。コンポーネントは、オプションで入力 (props と呼ばれる) を受け入れ、画面に表示される内容を記述する React 要素を返す JavaScript 関数またはクラスです。

React には主に 2 つのタイプのコンポーネントがあります:

関数コンポーネント: これらは、JSX を返す JavaScript 関数です。よりシンプルで読みやすくなりました。

クラス コンポーネント: これらは React.Component から拡張された ES6 クラスです。これらには、状態メソッドやライフサイクル メソッドなどのより多くの機能がありますが、最新の React 開発ではあまり一般的ではありません。

例: ボタン コンポーネント

簡単なボタン コンポーネントを作成しましょう:

function Button() {
  return (
    Click me!
  );
}

この Button コンポーネントは、「Click me!」というテキストを含むボタン要素を返す機能コンポーネントです。

コンポーネントが重要な理由

コンポーネントを使用すると、UI をより小さく管理しやすい部分に分割できます。これにより、コードがより整理され、保守が容易になります。複雑な料理を段階に分けずに調理しようとしているところを想像してみてください。それは混沌としているでしょう！同様に、コンポーネントを使用せずに UI を構築するのは膨大な作業になる可能性があります。

実際の例: レゴ ブロック
レゴブロックのようなコンポーネントを考えてみましょう。各ブロック (コンポーネント) はアプリケーションの一部であり、それらを組み合わせてより大きなものを作成できます。レゴ ブロックと同じように、コンポーネントはアプリケーションのさまざまな部分で再利用できます。

プロップとは
Props (「プロパティ」の略) は、あるコンポーネントから別のコンポーネントにデータを渡す方法です。これらは関数の引数に似ており、コンポーネントをカスタマイズするために使用できます。

たとえば、受け取った props に基づいてさまざまなテキストを表示できる Button コンポーネントを作成するとします。

function Button(props) {
  return (
    {props.label}
  );
}

Button コンポーネントを使用するときに、ラベル プロップを渡してテキストをカスタマイズできるようになりました。

function App() {
  return (
    

      
      
    
  );
}

ここでは、Button コンポーネントが 2 回使用されていますが、「送信」と「キャンセル」という異なるラベルが付けられています。

小道具の重要性

Props を使用すると、コンポーネントがより柔軟で再利用可能になります。コンポーネント内の値をハードコーディングする代わりに、props を介して動的データを渡すことができ、異なるコンテキストで同じコンポーネントを使用できるようになります。

Vite を使用したコンポーネントとプロップのセットアップ

開発環境に Vite を使用しているため、コンポーネントとプロップのセットアップは簡単です。手順に従って進めていけば、Vite プロジェクトはすでに構成されています。別のファイルでコンポーネントの作成を開始し、それらをメイン アプリケーションにインポートできます。

プロジェクトを構成する方法は次のとおりです:

1.新しいコンポーネントの作成: src フォルダーに新しいファイル Button.jsx を作成し、そこで Button コンポーネントを定義します。
2.アプリでコンポーネントを使用する: App.jsx ファイルで、Button コンポーネントをインポートし、さまざまなプロパティで使用します。

すべてをまとめる

コンポーネントとプロップは、React のコンポーネントベースのアーキテクチャの中心です。 UI を小さなコンポーネントに分割し、props を使用してコンポーネント間でデータを受け渡すことで、スケーラブルで保守可能なアプリケーションを構築できます。

明日は、コンポーネントが動的データを管理し、時間の経過による変化に対応できるようにするステート メソッドとライフサイクル メソッドについて詳しく説明します。