1日目: React Hooksの基本的な概念とuseStateの理解

React Hooksの導入

React HooksはReact 16.8で導入された機能で、クラスコンポーネントを使わずに状態やライフサイクル機能を関数コンポーネントから利用できるようにするものです。Hooksは再利用性が高く、コードの見通しを良くすることができます。

useStateを使った状態管理

useStateは最も基本的なHookで、これを使うことで関数コンポーネント内で状態を持つことができます。このセクションでは、シンプルなカウンターアプリを作成しながら、useStateの使い方を学びます。

        import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={increment}>カウントアップ</button>
    </div>
  );
}

export default Counter;