最初のコンポーネント

コンポーネントはReactの核となる概念の一つです。ユーザーインターフェース（UI）を構築する基盤であり、Reactの旅を始めるのに最適な場所です！

コンポーネント：UIの構成要素

Web上では、HTMLは<h1>や<li>のような組み込みのタグセットを使って、構造化されたリッチなドキュメントを作成できます：

このマークアップは、記事<article>、その見出し<h1>、そして（省略された）目次を順序付きリスト<ol>として表現しています。このようなマークアップは、スタイルのためのCSS、インタラクティブ性のためのJavaScriptと組み合わさり、Web上で見るすべてのサイドバー、アバター、モーダル、ドロップダウン——あらゆるUIの背後に存在します。

Reactでは、マークアップ、CSS、JavaScriptをカスタム「コンポーネント」——アプリのための再利用可能なUI要素——に組み合わせることができます。上記の目次のコードは、すべてのページでレンダリングできる<TableOfContents />コンポーネントに変換できます。内部では、依然として<article>、<h1>などの同じHTMLタグを使用しています。

HTMLタグと同様に、コンポーネントを組み合わせ、順序付け、ネストしてページ全体を設計できます。例えば、今読んでいるこのドキュメントページもReactコンポーネントで構成されています：

プロジェクトが成長するにつれ、多くのデザインが既に作成したコンポーネントを再利用して構成できることに気づき、開発が加速します。上記の目次は<TableOfContents />でどの画面にも追加できます！さらに、Chakra UIやMaterial UIのようなReactオープンソースコミュニティによって共有されている何千ものコンポーネントを使ってプロジェクトを迅速に開始することもできます。

コンポーネントの定義

従来、Webページを作成する際、Web開発者はコンテンツにマークアップを施し、その後JavaScriptを少し加えてインタラクティブ性を追加していました。これは、インタラクティブ性がWeb上で「あれば良い」程度だった時代にはうまく機能しました。現在では、多くのサイトやすべてのアプリでそれが期待されています。Reactは同じ技術を使いながらもインタラクティブ性を最優先します：Reactコンポーネントは、マークアップを散りばめることができるJavaScript関数です。以下がその例です（以下の例を編集できます）：

コンポーネントの構築方法は以下の通りです：

ステップ1：コンポーネントをエクスポートする

接頭辞export defaultは標準的なJavaScript構文です（React固有のものではありません）。これにより、ファイル内のメイン関数をマークし、後で他のファイルからインポートできるようにします。（インポートの詳細についてはコンポーネントのインポートとエクスポート）

ステップ2：関数を定義する

構文function Profile() { }で、名前がProfileのJavaScript関数を定義します。

ステップ3：マークアップを追加する

このコンポーネントは、<img />タグとsrcおよびalt属性を返します。<img />はHTMLのように記述されていますが、実際には内部ではJavaScriptです！この構文はJSXと呼ばれ、JavaScript内にマークアップを埋め込むことができます。

return文は、以下のコンポーネントのように1行で記述することもできます：

しかし、マークアップがreturnキーワードと同じ行にない場合は、括弧のペアで囲む必要があります：

コンポーネントを使用する

これでProfileコンポーネントを定義したので、他のコンポーネント内にネストできます。例えば、複数のProfileコンポーネントを使用するGalleryコンポーネントをエクスポートできます：

ブラウザが表示するもの

大文字と小文字の違いに注意してください：

• <section>は小文字なので、ReactはHTMLタグを参照していると認識します。
• <Profile />は大文字のPで始まるので、ReactはProfileというコンポーネントを使用したいと認識します。

そしてProfileにはさらに多くのHTML：<img />が含まれています。最終的に、ブラウザが表示するのは次のものです：

コンポーネントのネストと整理

コンポーネントは通常のJavaScript関数なので、複数のコンポーネントを同じファイルに保持できます。これは、コンポーネントが比較的小さいか、互いに密接に関連している場合に便利です。このファイルが混雑してきた場合は、いつでもProfileを別のファイルに移動できます。これを行う方法については、すぐにインポートに関するページで学びます。

なぜなら、ProfileコンポーネントはGallery内でレンダリングされるからです（複数回でも！）。Galleryは親コンポーネントであり、各Profileを「子」としてレンダリングします。これはReactの魔法の一部です：コンポーネントを一度定義すれば、好きな場所で好きなだけ使用できます。

まとめ

Reactの最初の味を体験しました！いくつかの重要なポイントをまとめましょう。

• Reactでは、アプリのための再利用可能なUI要素であるコンポーネントを作成できます。
• Reactアプリでは、すべてのUIの断片がコンポーネントです。
• Reactコンポーネントは、以下の点を除いて通常のJavaScript関数です：
  1. 名前は常に大文字で始まります。
  2. JSXマークアップを返します。