使用 ReactJS 的电影 Web 应用程序

ReactJS 是一种 JavaScript 库，用于构建用户界面。它由 Facebook 和 Instagram 的工程师开发，并已在许多网络应用程序中得到广泛使用。在本文中，我们将介绍如何使用 ReactJS 构建一个电影 Web 应用程序。

前提条件

为了使用 ReactJS 构建电影 Web 应用程序，你需要具备以下技术和经验：

• HTML
• CSS
• JavaScript
• Node.js 和 npm
• react 和 react-dom 库

准备工作

首先需要通过 Node.js 安装好 npm，这里就不再赘述。

安装 react 和 react-dom 库

打开终端，输入以下命令：

npm install react react-dom

上述命令将在项目中添加 react 和 react-dom 库。

创建电影 Web 应用程序

创建项目

首先需要创建一个文件夹，任何你要创建你的 ReactJS 应用程序的地方。

在终端中，用以下命令创建一个新的 ReactJS 应用程序：

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

上述命令将创建一个名为 movie-app 的应用程序，并运行在 http://localhost:3000。

你可以使用你最喜欢的代码编辑器打开 movie-app。

构建应用程序基本结构

接下来，我们将在创建的 ReactJS 应用程序中添加组件。 在 src 目录中，创建一个名为 components 的文件夹，并创建一个名为 App.js 的 JavaScript 文件。在 App.js 文件中添加以下代码：

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>电影 Web 应用程序</h1>
      </div>
    );
  }
}

export default App;

上述代码创建了一个名为 App 的 React 组件，并返回一个带有 h1 元素的 div。

接下来，我们将在 src 文件夹中创建一个名为 assets 的文件夹，用于存储图像。在 assets 文件夹中，创建一个名为 no-image.jpg 的文件，并添加以下图片（或您选择的任何图像）：

我们将在后面使用它。

获取和显示电影列表

在本例中，我们将使用一个名为 OMDB 的免费电影数据库。该 API 可以允许我们通过电影标题搜索电影，并返回有关电影的信息。

首先在终端中，安装一个名为 axios 的库，该库将用于从 OMDB API 中检索电影信息：

npm install axios

接下来，在 command/file terminal 中，使用 OMDB API 搜索电影。在 src/components 目录中，创建一个名为 Movies.js 的文件，并将以下代码添加到 Movies.js 文件顶部：

import React from 'react';
import axios from 'axios';

class Movies extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: '',
      movies: [],
    };
  }

  onChange = (event) => {
    const title = event.target.value;

    this.setState({ title }, () => {
      axios
        .get(`http://www.omdbapi.com/?apikey=<API_KEY>&s=${title}`)
        .then((response) => {
          this.setState({ movies: response.data.Search });
        });
    });
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.onChange} />

        {this.state.movies.map((movie) => (
          <div key={movie.imdbID}>
            <h2>{movie.Title}</h2>

            {movie.Poster !== 'N/A' ? (
              <img src={movie.Poster} alt={movie.Title} />
            ) : (
              <img src="./assets/no-image.jpg" alt={movie.Title} />
            )}

            <p>{movie.Year}</p>
          </div>
        ))}
      </div>
    );
  }
}

export default Movies;

上述代码创建了一个名为 Movies 的 React 组件，并允许我们通过输入电影标题进行搜索。搜索完成后， Movies 组件将循环遍历返回的电影列表，并为每个电影显示标题、图像和年份。

添加组件到应用程序

我们刚刚创建了两个组件： App 和 Movies。 现在我们需要在应用程序中引用它们。

在 src 文件夹中，打开 index.js 文件，并用以下代码替换：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

项目基本的结构就搭建好了。

运行应用程序

现在，你可以使用以下命令在应用程序中启动 movie-app：

npm start

运行电影 Web 应用程序之后，你可以输入电影标题（例如：“The Godfather”）进行搜索。好了，这样就成功的搭建出使用 ReactJS 的电影 Web 应用程序啦。

参考链接

• ReactJS：https://reactjs.org/
• OMDB API：http://www.omdbapi.com/
• axios：https://axios-http.com/
• 项目示例：https://github.com/amanrajneesh/react-movie-app#readme

附录

下载本项目

git clone https://github.com/amanrajneesh/react-movie-app.git
cd react-movie-app
npm install
npm start

代码片段

下面是该示例中的代码片段：

import React from 'react';
import axios from 'axios';

class Movies extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: '',
      movies: [],
    };
  }

  onChange = (event) => {
    const title = event.target.value;

    this.setState({ title }, () => {
      axios
        .get(`http://www.omdbapi.com/?apikey=<API_KEY>&s=${title}`)
        .then((response) => {
          this.setState({ movies: response.data.Search });
        });
    });
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.onChange} />

        {this.state.movies.map((movie) => (
          <div key={movie.imdbID}>
            <h2>{movie.Title}</h2>

            {movie.Poster !== 'N/A' ? (
              <img src={movie.Poster} alt={movie.Title} />
            ) : (
              <img src="./assets/no-image.jpg" alt={movie.Title} />
            )}

            <p>{movie.Year}</p>
          </div>
        ))}
      </div>
    );
  }
}

export default Movies;