React コンポーネント
コンポーネントは、HTML要素を返す関数のようなものです。
Reactコンポーネント
コンポーネントは、独立した再利用可能なコードです。JavaScript関数と同じ役割をしますが、独立して動作しHTMLを返します。
コンポーネントには、Class(クラス)コンポーネントとFunction(関数)コンポーネントの2種類があります。このチュートリアルでは、関数コンポーネントに集中します。
古いReactコードベースでは、Classコンポーネントが主に使用されている場合があります。React16.8で追加されたフックと一緒にFunctionコンポーネントを使用することをお勧めします。参照用にクラスコンポーネントに関するオプションのセクションがあります。
最初のコンポーネントを作成する
Reactコンポーネントを作成する場合、コンポーネントの名前しなければならない大文字で始めます。
クラスコンポーネント
クラスコンポーネントにはextends React.Componentステートメントを含める必要があります。このステートメントはReact.Componentへの継承を作成し、コンポーネントがReact.Componentの関数にアクセスできるようにします。
コンポーネントには、render()メソッドの場合、このメソッドはHTMLを返します。
例
Carというクラスコンポーネントを作成します。
関数コンポーネント
以下は上記と同じ例ですが、代わりにFunctionコンポーネントを使用して作成されています。
関数コンポーネントもHTMLを返し、クラスコンポーネントとほぼ同じように動作しますが、関数コンポーネントははるかに少ないコードで記述でき、理解しやすく、このチュートリアルでは優先されます。
例
Carという関数コンポーネントを作成します。
コンポーネントのレンダリング
これで、Reactアプリケーションには<h2>要素を返すCarというコンポーネントが追加されました。
このコンポーネントをアプリケーションで使用するには、通常のHTML<Car />と同様の構文を使用します。
例
Car「root」要素内のコンポーネントを表示します。
小道具
propsコンポーネントは、プロパティを表すとして渡すことができます。
propsは関数の引数のようなもので、属性としてコンポーネントに送信します。
propsは、次の章で詳しく説明します。
例
属性を使用して色をCarコンポーネントに渡し、render()関数で使用します。
コンポーネントのコンポーネント
他のコンポーネント内のコンポーネントを参照できます。
例
Garageコンポーネント内でCarコンポーネントを使用します。
ファイル内のコンポーネント
Reactはコードの再利用がすべてであるため、コンポーネントを個別のファイルに分割することをお勧めします。
これを行うには、新しいファイルを作成します.jsファイル拡張子を変更し、その中にコードを入れます。
ファイル名は大文字で始める必要があることに注意してください。
例
これが新しいファイルで、「Car.js」という名前を付けました。
Carコンポーネントを使用できるようにするには、アプリケーションにファイルをインポートする必要があります。
例
これで、「Car.js」ファイルをアプリケーションにインポートして、Carコンポーネントがここで作成されたかのように表示されます。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。