React电影 - Javascript

如果你是一名Javascript程序员，并且有兴趣开发Web应用程序，那么你一定听说过ReactJS。React是一个由Facebook出品的开源Javascript库，用于构建用户界面。在React中，你可以使用JavaScript编写UI组件，并将它们组装成一个完整的Web应用程序。

React可以与许多不同的框架和库进行集成，包括Redux、React Native和React Router等。与它们一起使用，可以创建出更加强大和灵活的Web应用程序。

React电影应用程序

让我们来创建一个简单的React电影应用程序，它将使用TMDB API来获取电影信息，同时使用React Router来路由页面。在我们继续之前，请确保你已经安装了Node.js，并且已经掌握了一些基本的Javascript知识。

创建React应用程序

首先，我们需要创建React应用程序。在终端中，输入以下命令：

npx create-react-app react-movie-app
cd react-movie-app
npm start

这将创建一个名为react-movie-app的新React应用程序，并启动开发服务器。在浏览器中打开http://localhost:3000，你将看到一个React默认欢迎页面。

安装依赖

接下来，我们需要安装一些我们在这个应用程序中将要使用的依赖项。输入以下命令安装axios和React Router：

npm install axios react-router-dom

创建电影页面

我们将在React应用程序中创建一个新的电影页面，以显示从TMDB API获得的电影信息。在src文件夹中创建一个新文件夹，并将其命名为pages。在pages文件夹中，创建一个名为Movie.js的新文件，并将以下代码复制到该文件中：

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";

const Movie = () => {
  const [movie, setMovie] = useState({});
  const { id } = useParams();

  useEffect(() => {
    const fetchMovie = async () => {
      const { data } = await axios.get(`
        https://api.themoviedb.org/3/movie/${id}?api_key=${YOUR_API_KEY}&language=en-US
      `);
      setMovie(data);
    };

    fetchMovie();
  }, [id]);

  return (
    <div>
      <h1>{movie.title}</h1>
      <p>{movie.overview}</p>
    </div>
  );
};

export default Movie;

在这个文件中，我们首先从React导入了useState和useEffect函数，以及axios和useParams依赖项。接下来，我们定义了一个名为Movie的React组件。

在Movie组件中，我们使用useState Hook来定义一个初始化为空对象的movie状态。我们还使用useParams Hook来获取路由参数中的电影ID。接下来，在useEffect Hook中，我们使用axios来异步获取电影数据，并将其设置为movie状态。

在组件的返回中，我们简单地将电影标题和概述显示在页面上。

创建电影列表页面

接下来，我们将创建一个包含电影列表的新页面。在src文件夹中创建一个新文件夹，并将其命名为pages。在pages文件夹中，创建一个名为MovieList.js的新文件，并将以下代码复制到该文件中：

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

const MovieList = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    const fetchMovies = async () => {
      const { data } = await axios.get(`
        https://api.themoviedb.org/3/movie/popular?api_key=${YOUR_API_KEY}&language=en-US&page=1
      `);
      setMovies(data.results);
    };

    fetchMovies();
  }, []);

  return (
    <div>
      {movies.map((movie) => (
        <div key={movie.id}>
          <h2>
            <Link to={`/movie/${movie.id}`}>{movie.title}</Link>
          </h2>
        </div>
      ))}
    </div>
  );
};

export default MovieList;

在这个文件中，我们首先从React中导入useState和useEffect Hook，以及axios和Link依赖项。接下来，我们定义了一个名为MovieList的React组件。

在MovieList组件中，我们使用useState Hook来定义一个空数组movies的状态。我们还使用useEffect Hook来使用axios异步获取电影数据，并将其设置为movies状态。

在组件的返回中，我们使用map函数将电影标题以链接的方式显示在页面上。链接的URL是动态的，并且它将根据所选电影的ID在URL中创建新的电影页面路由。

添加路由

现在，我们已经创建了两个页面：Movie和MovieList。我们将使用React Router来设置这两个页面之间的路由。

首先，在src文件夹中，创建一个新文件夹，并将其命名为components。在components文件夹中，创建一个名为App.js的新文件，并将以下代码复制到该文件中：

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Movie from "../pages/Movie";
import MovieList from "../pages/MovieList";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={MovieList} />
        <Route exact path="/movie/:id" component={Movie} />
      </Switch>
    </Router>
  );
};

export default App;

在这个文件中，我们首先从React Router中导入BrowserRouter、Switch和Route。接下来，我们导入Movie和MovieList组件，并定义一个名为App的React组件。

在App组件中，我们使用BrowserRouter来定义网站的根路径，并使用Switch和Route来为每个页面创建路由。我们使用exact关键字来确保路径精确匹配。我们还使用了URL参数来动态地为每个电影ID创建不同的页面路由。

添加API密钥

最后，我们需要在我们的应用程序中添加一个TMDB API密钥。在Movie.js和MovieList.js组件中，我们已经使用了YOUR_API_KEY作为占位符。我们需要将其替换为我们自己的TMDB API密钥。

要添加API密钥，请先访问https://www.themoviedb.org/settings/api，并创建您自己的TMDB API密钥。接下来，在src文件夹中创建一个名为.env的新文件，并将以下内容添加到文件中：

REACT_APP_API_KEY=Your_API_Key_Here

在这个文件中，我们定义了一个名为REACT_APP_API_KEY的环境变量，并将其设置为我们自己的TMDB API密钥。请确保将Your_API_Key_Here替换为您自己的API密钥。

运行应用程序

现在，我们已经完成了React电影应用程序的编写。在终端中，输入以下命令运行应用程序：

npm start

在浏览器中打开http://localhost:3000，你将看到一个包含电影列表的网站。你可以点击任何电影标题，以查看这部电影的详细信息。

结论

React是一个非常强大的Javascript库，可用于构建令人兴奋的Web应用程序。在本文中，我们已经创建了一个React电影应用程序，它使用了TMDB API和React Router。我们希望这个示例程序能够帮助你开始构建自己的React应用程序。