ここでは、ユーザー入力を受け取り、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を使ってアプリを実行し、ユーザーがさまざまな都市の天気を検索できるシンプルな天気アプリを見ることができるはずです。
Here is a basic React app that takes user input, makes an API call, and displays the result in HTML. In this example, we'll use the OpenWeatherMap API to fetch the current weather data for a city.

First, create a new React app using the command line:
npx create-react-app my-app

Next, replace the contents of src/App.js with the following code:
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;

In the handleFormSubmit function, we make an API call to OpenWeatherMap, passing in the user input (city) and an API key. When the response comes back, we parse the JSON data and store it in the weatherData state variable.

In the return statement, we render a simple form with an input field and a button. When the user submits the form, the handleFormSubmit function is called. If weatherData is not null, we render the weather data returned by the API.

Finally, replace the contents of src/index.js with the following code to render the App component:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

Don't forget to replace YOUR_API_KEY with your actual OpenWeatherMap API key.

That's it! Now you should be able to run your app using npm start and see a simple weather app that allows users to search for the weather in different cities.