はじめての React ― 画面に文字を出す

導入

まずは画面に文字を出すところから。React ではコンポーネントは「見た目を返す関数」です。関数が返している <h1>...</h1> のような HTML っぽい記法を JSX と呼びます。

説明

次が最小の React コンポーネントです。App という関数が JSX を return しています。

function App() {
  return <h1>はじめての React</h1>;
}

• function App() … コンポーネントは大文字始まりの関数で書きます。
• return <h1>...</h1> … 返した JSX がそのまま画面になります。
• JSX は HTML によく似ていますが、実体は JavaScript です（あとで変数や式を埋め込めます）。

複数の要素を返すときは、全体を1つのタグで包む必要があります。<div> で囲むか、空タグ <> ... </>（フラグメント）を使います。

function App() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>これは段落です。</p>
    </div>
  );
}

やってみよう

<h1> の文字を好きなメッセージに変えてみましょう。さらに <p> タグを増やして、段落を2つに増やしてみてください。