Reactを使用した映画アプリの開発方法

プロジェクトのセットアップ: 最初に、Reactプロジェクトをセットアップする必要があります。create-react-appというツールを使用して、簡単に新しいReactプロジェクトを作成できます。以下のコマンドを実行して、新しいプロジェクトを作成します。

npx create-react-app movie-app

import axios from 'axios';
const apiKey = 'your_api_key';
const apiUrl = `https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}`;
axios.get(apiUrl)
  .then(response => {
    // データを処理するコード
  })
  .catch(error => {
    // エラーハンドリングのコード
  });

コンポーネントの作成: Reactでは、UIをコンポーネントとして作成します。映画リストを表示するためのMovieListコンポーネントと、個々の映画を表示するためのMovieCardコンポーネントを作成します。

import React from 'react';
const MovieList = ({ movies }) => {
  return (
    <div>
      {movies.map(movie => (
        <MovieCard key={movie.id} movie={movie} />
      ))}
    </div>
  );
};
const MovieCard = ({ movie }) => {
  return (
    <div>
      <h2>{movie.title}</h2>
      <p>{movie.release_date}</p>
      {/* 他の映画情報を表示するコード */}
    </div>
  );
};

データの表示: APIから取得した映画データを表示するために、MovieListコンポーネントを使用します。AppコンポーネントでAPIからデータを取得し、MovieListコンポーネントに渡します。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    axios.get(apiUrl)
      .then(response => {
        setMovies(response.data.results);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);
  return (
    <div>
      <h1>映画アプリ</h1>
      <MovieList movies={movies} />
    </div>
  );
};
export default App;