State（useState）

// useStateをインポート
import React, { useState } from "react";
import { ColorfulMessage } from "./components/ColorfulMessage";

const App = () => {
  // ボタンが押されたら、State（num）をインクリメントして更新する
  const onClickCountUp = () => {
    setNum(num + 1); // UseState関数から分割代入で受け取ったState更新用の関数を呼び出す
  };
  // Stateを扱う場合、useStateという関数を使用する
  // useStateの中から配列の分割代入で1つ目として「Stateとして使用する変数名」2つ目として「Stateの更新用の関数」を受け取る
  const [num, setNum] = useState(0);   // [変数名, set変数名]と命名するのが一般的

  return (
    <> 
      <h1>こんにちは！</h1>

      <ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
      <ColorfulMessage color="pink">元気です！</ColorfulMessage>
      <!-- onClickイベントにState更新処理を登録 -->
      <button onClick={onClickCountUp}>カウントアップ！</button>
      <!-- State（num）を表示する onClickCountUpが呼ばれるたびにインクリメントされた状態で表示が更新される -->
      <p>{num}</p>
    </>
  );
};

export default App;

まとめ

Stateとはそれぞれのコンポーネントが持っている可変の状態のこと。
条件によって動的に変わる部分をStateとして定義してあげることで様々な画面を表示していくことができる。
コンポーネント内で動的に変わる部分は、useStateで定義して変数と更新関数と初期値を設定していく。
Stateが変更されると再レンダリングする。