React.jsを使用してAPIからユーザーデータを取得する方法

まず、React.jsのプロジェクトをセットアップします。ターミナルまたはコマンドプロンプトで以下のコマンドを実行します。

npx create-react-app my-app
cd my-app

次に、srcディレクトリ内に新しいファイル（例:UserData.js）を作成します。以下は、そのファイルの内容です。

import React, { useEffect, useState } from 'react';
const UserData = () => {
  const [userData, setUserData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('APIのエンドポイント');
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        console.log('データの取得に失敗しました:', error);
      }
    };
    fetchData();
  }, []);
  return (
    <div>
      <h1>ユーザーデータ</h1>
      {userData.map((user) => (
        <div key={user.id}>
          <p>名前: {user.name}</p>
          <p>メールアドレス: {user.email}</p>
          <hr />
        </div>
      ))}
    </div>
  );
};
export default UserData;

上記のコードでは、UserDataコンポーネントを作成し、userDataという状態変数とsetUserDataという状態更新関数を使用してAPIからのデータを管理しています。useEffectフックを使用して、コンポーネントがマウントされた時にAPIからデータを取得し、setUserDataを使用して状態を更新します。

fetch関数を使用してAPIのエンドポイントにリクエストを送信し、response.json()を使用してレスポンスデータをJSON形式に変換します。その後、setUserDataを使用してデータを状態にセットします。

returnブロック内では、userDataをマップして各ユーザーの名前とメールアドレスを表示しています。

最後に、src/App.jsファイルでUserDataコンポーネントをインポートして表示します。

import React from 'react';
import UserData from './UserData';
function App() {
  return (
    <div className="App">
      <UserData />
    </div>
  );
}
export default App;

これで、React.jsアプリケーション内でAPIからユーザーデータを取得して表示する準備が整いました。

以上が、React.jsを使用してAPIからユーザーデータを取得する方法の簡単な例です。このコードをベースにカスタマイズして、自身のプロジェクトに組み込んでみてください。