React公式ドキュメントを読む

UIの記述

初めてのコンポーネント

• コンポーネントとはUIの構成部品である
• HTMLタグを組み合わせて構造化されたコンポーネントを作成できる
• 下記HTMLタグの組み合わせを<TableOfContents />としてコンポーネント化して再利用できる

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

Reactコンポーネントの定義

• マークアップを添えることができる JavaScript関数と定義する
• コンポーネントは下記のような見た目となる

// export default"がJavaScriptの構文
// "function Profile() { } "と書くことでProfileという名前のJavaScript関数を定義する
// JSXマークアップである"img"タグをreturnする
// JSX（JavaScript XML）は、JavaScriptの構文拡張で、JavaScriptファイル内にHTMLのようなコードを記述できるようにするもの
export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

名前はProfileのように大文字から始めなければ動作しません

• 下記のようにコンポーネントを使用する

App.js

// "section"は小文字なのでHTMLタグと解釈される
// "Profile"は大文字なので独自コンポーネントと解釈される
function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

• 最終的にブラウザが解釈するUI構成

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

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

• 同じファイルに複数のコンポーネントを書いておくことも可能
• コンポーネントは、1 回しか使わないような UI コードやマークアップであっても、それらを整理するために有用