ReactのコンポーネントとJSX | React入門

関数コンポーネント

Reactのコンポーネントは、大文字で始まる関数です。関数が返したJSXが画面の一部になります。

Greeting.jsxJSX

export default function Greeting() {
  return <h2>こんにちは、React！</h2>;
}

App.jsxJSX

import Greeting from './Greeting.jsx';

export default function App() {
  return <Greeting />;
}

ファイルを分けたらexport defaultとimportを対応させます。コンポーネントをHTMLタグのように使えるため、ページを小さな部品へ分割できます。

JSXのルール

JSXはHTMLに似ていますが、JavaScriptの式として処理されます。属性名、閉じタグ、複数要素の囲み方に注意します。

属性と式JSX

export default function Profile() {
  const imageUrl = '/profile.png';
  return (
    <article className="profile">
      <img src={imageUrl} alt="プロフィール画像" />
      <h2>Mika</h2>
    </article>
  );
}

HTMLのclassはclassName、onclickはonClickです。値を文字列として渡すときは引用符、変数を渡すときは波括弧を使います。

propsを渡す

親コンポーネントから子コンポーネントへ、属性のように値を渡せます。子はpropsを直接書き換えず、表示に使います。

propsの例JSX

function Score({ name, value }) {
  return <p>{name}: {value}点</p>;
}

export default function App() {
  return <Score name="数学" value={82} />;
}

表示結果OUTPUT

数学: 82点

propsは読み取り専用です。子から親へ知らせたいときは、親が関数を作ってpropsとして渡します。この一方向のデータの流れが、画面の状態を追いやすくします。

条件分岐とリスト

条件分岐には通常のif、三項演算子、&&を使えます。配列はmapでJSXへ変換し、各要素に安定したkeyを付けます。

条件とmapJSX

const subjects = ['数学', '英語'];
const isLoggedIn = true;

return (
  <>
    {isLoggedIn ? <p>ログイン中</p> : <p>ログインしてください</p>}
    <ul>{subjects.map(subject => <li key={subject}>{subject}</li>)}</ul>
  </>
);

keyはReactが各要素を識別するために使います。表示順が変わるリストでindexをkeyにすると、入力値や状態が別の項目に対応することがあります。

React入門の講座一覧

関数コンポーネント

JSXのルール

propsを渡す

条件分岐とリスト