著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

React 開発では、Web アプリケーションプログラミングインターフェイス(API)は、シングルページアプリケーション(SPA)設計の不可欠な部分です。 APIは、アプリケーションがプログラムでサーバーと通信してユーザーにリアルタイムデータを提供し、ユーザーの変更を保存するための主要な方法です。 Reactアプリケーションでは、APIを使用して、ユーザー設定の読み込み、ユーザー情報の表示、構成またはセキュリティ情報の取得、およびアプリケーションの状態変更の保存を行います。

このチュートリアルでは、useEffectおよびuseStateフックを使用して、テスト目的のローカルAPIとして JSONサーバーを使用し、サンプルアプリケーションで情報を取得して表示します。 コンポーネントが最初にマウントされたときに情報をロードし、APIを使用して顧客の入力を保存します。 また、ユーザーが変更を加えたときにデータを更新し、コンポーネントがアンマウントされたときにAPIリクエストを無視する方法を学びます。 このチュートリアルを終了すると、ReactアプリケーションをさまざまなAPIに接続できるようになり、リアルタイムデータを送受信できるようになります。

前提条件

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.22.0およびnpmバージョン6.14.6でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04