JSX｜基礎を学ぶ - ゆめさくコード

JSX とは

React のコンポーネントは、見た目を JSX という記法で書きます。JSX は「JavaScript の中に HTML のようなタグを直接書ける記法」です。

export default function App() {
  return <h1>あおいのプロフィール</h1>;
}

return のうしろに <h1> がそのまま出てきます。文字列ではありません。クォートで囲んでいないところに注目してください。

JSX はブラウザがそのまま読める記法ではありません。実行される前に、次のような普通の JavaScript に変換されています。

// あなたが書くもの
<h1>あおいのプロフィール</h1>

// 変換されたあとのもの
React.createElement("h1", null, "あおいのプロフィール")

つまり JSX は「関数呼び出しの短い書き方」です。だから JSX の中には JavaScript の値を混ぜられますし、JSX 自体を変数に入れることもできます。

見出しと段落のように、要素を 2 つ以上返したいときがあります。そのときは全体を 1 つのタグで包みます。

export default function App() {
  return (
    <div>
      <h1>あおいのプロフィール</h1>
      <p>Web エンジニアです</p>
    </div>
  );
}

return のうしろが複数行になるときは、丸かっこ ( ) で囲みます。囲まないと JavaScript が return の行で文を終わらせてしまい、何も返らない関数になります。これは JSX を書きはじめた人が最初につまずくところです。

HTML では <img src="..."> や <br> のように閉じタグを省略できましたが、JSX では省略できません。<img src="..." /> や <br /> のように、末尾を /> で閉じます。閉じ忘れると画面が真っ白になり、エラーが出ます。

自分のプロフィールサイトの一番上に出す、見出しと自己紹介文を JSX で書きます。