Reactにおけるコンポーネント指向入門

私たちにウェブサイトがあるとします。このウェブサイトでは、いくつかのブロックを区別することができます：ヘッダー、コンテンツ、サイドバー、フッターなどです。各ブロックは、より小さなサブブロックに分割することができます。例えば、ヘッダー内では通常、ロゴ、メニュー、連絡先ブロックなどを区別することができます。

Reactでは、そのような各ブロックをコンポーネントと呼びます。各コンポーネントは、その内部により小さなコンポーネントを含むことができ、それらはさらにより小さなコンポーネントを含むことができ、以下同様です。

Reactにおける各コンポーネントは、 srcフォルダー内に配置された ES6モジュールに対応します。モジュールのファイル名は大文字で始まり、そのファイル内のコードに記述されている関数名と一致しなければなりません。

例えば、App.jsという名前のファイルは、その内部に関数Appを含んでいる必要があります：

import React from 'react';

function App() {
	// コンポーネントのコード
}

export default App;

コンポーネントのうちの1つはメイン、つまり、他のコンポーネントが追加されるべきコンポーネントでなければなりません。 Reactでは、デフォルトでそのようなコンポーネントは Appコンポーネントとなります。このコンポーネントには他のコンポーネントが接続されます。これがどのように行われるかは、このチュートリアルの後半で見ていきます。