human
ユーザー入力を取得し、APIを呼び出して結果をHTMLに表示できるReactアプリを作成します。
gpt
ここでは、ユーザー入力を受け取り、APIコールを行い、結果をHTMLで表示する基本的なReactアプリを紹介する。この例では、OpenWeatherMap APIを使用して、ある都市の現在の天気データを取得します。

まず、コマンドラインを使って新しいReactアプリを作成する：
npx create-react-app my-app

次に、src/App.jsの内容を以下のコードに置き換える：

```
import React, { useState } from "react"；

function App() {
  const [city, setCity] = useState("");
  const [weatherData, setWeatherData] = useState(null);

  const handleInputChange = (event) => {
    setCity(event.target.value);
  };

  const handleFormSubmit = async (event) => {
    event.preventDefault();

    const apiKey = "YOUR_API_KEY";
    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;
    const response = await fetch(apiUrl);
    const data = await response.json();

    setWeatherData(data);
  };

  return (
    <div>
      <h1>Weather App</h1>
      <form onSubmit={handleFormSubmit}>
        <label htmlFor="city">City:</label>
        <input
          type="text"
          id="city"
          name="city"
          value={city}
          onChange={handleInputChange}
        />
        <button type="submit">Get Weather</button>
      </form>
      {weatherData && (
        <div>
          <h2>{weatherData.name}</h2>
          <p>Temperature: {weatherData.main.temp} &deg;C</p>
          <p>Feels like: {weatherData.main.feels_like} &deg;C</p>
          <p>Humidity: {weatherData.main.humidity} %</p>
        </div>
      )}
    </div>
  );
}

export default App；
```

handleFormSubmit関数では、OpenWeatherMapにAPIコールを行い、ユーザー入力（city）とAPIキーを渡す。レスポンスが戻ってきたら、JSON データを解析して、weatherData ステート変数に格納する。

return ステートメントでは、入力フィールドとボタンを持つ単純なフォームをレンダリングします。ユーザーがフォームを送信すると、handleFormSubmit関数が呼び出されます。weatherData が NULL でない場合は、API から返された天気データをレンダリングします。

最後に、src/index.jsの内容を以下のコードに置き換えて、Appコンポーネントをレンダリングする：

```
import React from "react"；
import ReactDOM from "react-dom"；
import App from "./App"；

ReactDOM.render(<App />, document.getElementById("root"))；
```

YOUR_API_KEY を実際の OpenWeatherMap API キーに置き換えるのを忘れないでください。

これで完了です！これで、npm startを使ってアプリを実行し、ユーザーがさまざまな都市の天気を検索できるシンプルな天気アプリを見ることができるはずです。