Reactを支える基本コンセプトのひとつが「コンポーネント」です。「コンポーネント（component）」の意味は「部品」、「パーツ」で、React開発ではブラウザに表示されるアプリの画面を「小さな部品の積み重ね」と考えます。具体例で確認してみましょう。

下記URLにアクセスしてください。これはセクション4から開発していく見本アプリです。

(*本トライアルサイトではURLは隠されています)

ぱっと見ただけだとわかりませんが、次のように線で区切ると、この画面は「1：ヘッダー」、「2：ボタン欄」、「3：入力フォームとボタン」、「4：テキスト欄」の4つの部品、つまり4つのコンポーネントから構成されているのがわかります。

次は、入力フォームに「sushi」と入力して検索してみましょう。寿司のレシピが表示されます。この画面では、先ほどの「4：テキスト欄」の代わりに、「4：検索履歴」と「5：レシピ」が表示され、合計5つのコンポーネントから構成されているのがわかります。

このようにReactでは、画面の構成をひとつひとつのパーツに分割して見る「コンポーネント指向」の考え方をします。これは、ページに表示されるすべてのコードを1枚の.htmlファイルに書くHTML開発とは大きく異なる点です。

画面をこのように分割して設計するメリットのひとつは、共通要素を共有できることです。

先ほどの見本アプリで、例えば「ramen」と入力して検索するとラーメンのレシピが出てきます。他にも「udon」、「tempura」と調べてもレシピが出てきますが、ここで注目してもらいたいのは、それぞれのURLが異なることです。

URLが違うことは、ページも違うことを意味しますが、それでもすべてのページで「ヘッダー」、「ボタン欄」、「入力フォームとボタン」の3つが表示されています。つまりこれら3つは、どのページでも表示される共通のコンポーネントといえます。

HTML開発時、このような共通部分はコピー&ペーストですべてのHTMLファイルに貼り付けていました。このデメリットは、「ヘッダーの画像を変える」などの変更があったとき、すべてのHTMLファイルに手を加える必要があることです。当然手間がかかりますし、ミスも誘発します。

一方のReact開発において共通部分は、「一度作って使い回す」という方法を取ります。そのため、何らかの変更が必要なときにはひとつのファイルを修正すればよく、それによって、そのファイルを使っている他のページでも変更が反映されるのです。共有は画面上の目に見える部分だけでなく、「データを取得する」といった何らかの操作を行うコードもReact開発では積極的に共有します。これはセクション4以降、開発を進めていく中で実際に確認しましょう。

このような共有を可能にしているのは、export／importというJavaScriptの仕組みです。「export」とは「輸出する」、つまり「なかのものを外に出す」、一方で「import」とはその逆で「輸入する」、「外のものを中に取り入れる」という意味です。「import／export」と「コンポーネント」の関係を、コードで実際に確認してみましょう。コードの詳細はセクション4でくわしく解説するので、今の時点でわかる必要はありません。

まずコンポーネントです。次のコードを見てください。これはReactのコードになります。

const Header = () => {
    return (
        <header>ヘッダー</header>
    )
}

const Buttons = () => {
    return (
        <button>ボタン</button>
    )
}

const FormAndButton = () => {
    return (
        <form>
            <input/>
            <button>ボタン</button>
        </form>
    )
}

const App = () => {
    return (
        <div>
            <Header/>
            <Buttons/>
            <FormAndButton/>    
        </div>
    )
}

大きく4つのかたまり、「Header」、「Buttons」、「FormAndButton」、「App」がここには確認でき、それぞれの中にコードが数行書いてあります。

もっとよく見ると、最初の3つのかたまり（Header／Buttons／FormAndButton）が「App」の中に入っているのもわかります。実はこれはそれぞれが「Headerコンポーネント」、「Buttonsコンポーネント」、「FormAndButtonコンポーネント」で、その3つが「Appコンポーネント」によってまとめられているのです。さらにこれは、先ほど見たレシピアプリの画面のコンポーネントと構成が同じで、ブラウザではわかりませんが、コードの上では「Appコンポーネント」によって全体がまとめられています。

上のように、1枚のファイルに複数のコンポーネントのコードを書くことも可能ですが、通常はコンポーネントごとに個別のファイルに分割します。

// Header.jsx
export const Header = () => {
    return (
        <header>ヘッダー</header>
    )
}

// Buttons.jsx
export const Buttons = () => {
    return (
        <button>ボタン</button>
    )
}

// FormAndButton.jsx
export const FormAndButton = () => {
    return (
        <form>
            <input/>
            <button>ボタン</button>
        </form>
    )
}

ここで、それぞれのコードにexportが書き加えられているのに気がついたと思います。個別のファイルに分割した各コンポーネントを「Appコンポーネント」で読み込むにはexport、つまり「外に出す」必要があるためです。外に出したコンポーネントを中に取り入れるにはimportを使い、「Appコンポーネント」のファイルの上部に次のように書きます。

// App.jsx
import Header from "./Header.jsx"
import Buttons from "./Buttons.jsx"
import FormAndButton from "./FormAndButton.jsx"

const App = () => {
    return (
        <div>
            <Header/>
            <Buttons/>
            <FormAndButton/>    
        </div>
    )
}

importとexportの仕組みを使うことで、コンポーネントをファイルごとに分割でき、コードの管理が容易になります。React開発では、1枚のファイルに多くのコードを書くよりも、複数のファイルに細かく分割して書くことが好まれるため、HTML／CSS開発よりもファイルやフォルダの数が多くなる傾向があります。Reactを使い始めたビギナーは、慣れるまでに少し違和感を覚えるでしょう。