Reactで簡単なカウンターアプリを作る

Reactは、ユーザーインターフェースを構築するための人気のJavaScriptライブラリです。コンポーネントベースの設計が特徴で、再利用性の高いUI部品を作成できます。

ここでは、Reactの基本的なフックであるuseStateを使って、簡単なカウンターアプリを作成します。

import React, { useState } from 'react';

function Counter() {
  // "count" という新しい state 変数を宣言します
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

このコードは、クリックするたびに数字が増えるシンプルなカウンターを表示します。useStateが、関数コンポーネント内で状態を保持する力を与えてくれます。

Reactで簡単なカウンターアプリを作る

About