はじめに

  • 4 分

対話型のアプリケーションを作成する場合、データを変更し、ユーザーの要求に応答できる必要があります。 React でこの機能は、状態とイベントによって管理します。

"状態" とは、お使いのアプリケーション全体のコンポーネント間で更新および共有されるデータです。 "イベント" は、お使いのアプリケーションに対するユーザーのすべての対話 (クリック、入力、タップ) を処理します。

目標

このモジュールでは、次のことを行います。

  • アプリケーションに状態を追加します。
  • イベント ハンドラーを追加します。
  • Effect フックを使用し、状態の変更に応答します。

前提条件

  • JavaScript、HTML、CSS に関する知識
  • React のコンポーネントに関する基本知識
  • コード エディター (Visual Studio Code など)。
  • Node.js がローカルにインストールされていること
  • Git がローカルにインストールされていること
  • 次のセクションで説明しているスタート プロジェクト

プロジェクトの複製

このモジュールでは、スタート プロジェクトを使用します。 そのプロジェクトを複製し、Visual Studio Code で開きます。

  1. スタート プロジェクトを取得するには、コマンド ウィンドウまたはターミナル ウィンドウで次の手順を実行します。 この手順では、リポジトリを複製し、Visual Studio Code でスタート フォルダーを開きます。

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\3-state-events\start
code .

    # macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/3-state-events/start
code .

  2. Visual Studio Code で、 [表示]>[ターミナル] の順に選択して、統合ターミナルを開きます。 または、Ctrl+` キーを選択します。 (Mac では、Cmd + ` を選択します。)

  3. ターミナルで、次のコードを実行して必要なパッケージをインストールし、開発サーバーを起動します。

    npm install
npm start

  4. お使いの既定のブラウザーが自動的に開きます。 開かない場合は、お使いのブラウザーを開き、http://locahost:8080. に移動します スタート ページが開きます。