构建一个 React 电影应用程序。

步骤 1（获取 API 密钥）：

创建组件：

本文将介绍如何使用 OMDB API 构建一个基于 React 的电影搜索和发现应用。您可以直接克隆该仓库：https://github.com/Tk-brainCodes/OMDB-Movies.git。
查看在线演示。

步骤 1（获取 API 密钥）：

点击此链接获取此项目的免费 API 密钥：
链接：API 密钥。

API密钥的用途是追踪用户如何使用API以及每日请求次数。此API每日提供1000次搜索限额。API密钥将发送至您的邮箱，现在您可以开始使用OMDB API了。

项目设置：

在终端或命令提示符中运行以下命令：
运行：npx create-react-app OMDB-movies创建一个新的 React 应用。
进入该目录：cd OMDB-movies
运行：npm install axios从 API 请求数据。
然后运行：npm start或yarn start启动 React 应用服务器。你应该会在浏览器中看到 React 图标在旋转：

创建组件：

在 App.js 组件中，删除所有内容。它应该看起来像这样：




import './App.css';


function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

接下来，在该src文件夹内创建一个新文件夹并命名Components。在该文件夹内Components folder创建三个文件夹，分别用于存放各个组件。

卡片夹
头部文件夹
电影文件夹

您的项目结构应如下所示：

接下来，我们首先从Header.js组件入手。在Header组件文件夹中创建一个Header.js组件和Header.css一个文件。以下代码是该文件的基本CSSHeader.css代码。



/*HEADER.CSS*/


@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.input  {
    padding: 20px;
    width: 300px;
}

.heading {
    font-size: 17px;
    font-weight: bolder;
    padding: 5px;
    font-family: 'Nanum Gothic', sans-serif;
}

.paragraph {
    padding: 5px;
    color: #3da4ab ;
}

.title {
    font-family: 'Pacifico', cursive;
    color: white;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
}

.name {
    font-size: 20px;
    padding: 10px;
}

.search {
    color: white;
    font-weight: bolder;
}

.search input[type="text"]{
    border: 1px solid #f6cd61;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: bolder;
    border-radius: 2px;
    width: 40em;
    padding: 20px;

}

.search input[type="text"]:focus
{
    outline: 0;
}

button {
    background-color: #dfad31;
    border: none;
    color:white;
    font-weight: bolder;
    font-size: 16px;
    padding: 20px;
    cursor:pointer;
}


.norminee {
    border-radius: 4px;
    background: rgb(9, 136, 9);
}

/* ===========================
   ====== Medua Query for Search Box ====== 
   =========================== */

@media only screen and (min-width : 150px) and (max-width : 780px)
{
    .search
    {
        width: 40em;
        margin: 0 auto;
    }

}


.link {
    text-decoration: none;
    list-style-type: none;
}

接下来，我们将把 CSS 导入到Header.js组件中：



//HEADER.JS

import React from 'react';
import './Header.css';

const Header = () => {
    return (
        <div className="Header">
        <h1>Header Components</h1>
        </div>

    )
}

export default Header;

我们的Header.js组件已经搭建完成，但还没有合适的内容，稍后我们会再处理这个问题。
接下来，我们将设置Movies.js组件。在之前创建的Movies文件夹中，创建一个Movies.js组件和一个Movie.css文件。以下代码是该文件的基本CSSMovies.css代码。



/*MOVIES.CSS*/

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.input  {
    padding: 20px;
    width: 300px;
}

.cardlist__movies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    -webkit-box-shadow: 5px 5px 32px 5px rgba(0,0,0,0.43); 
    box-shadow: 5px 5px 32px 5px rgba(0,0,0,0.43);
}

.card {
    margin-left: 20px;
    border-radius: 4px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.movie__image {
    height: 500px;
    width: 350px;
    border-radius: 10px;
}

.flex__card {
    background-color: rgb(14, 13, 13);
    color: #f6cd61 ;
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
}

.heading {
    font-size: 17px;
    font-weight: bolder;
    padding: 5px;
    font-family: 'Nanum Gothic', sans-serif;
}

.paragraph {
    padding: 5px;
    color: #3da4ab ;
}

.title {
    font-family: 'Pacifico', cursive;
    color: white;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
}

.name {
    font-size: 20px;
    padding: 10px;
}

在下面的代码中：
我导入了之前安装的 Axios，也导入了Header.js组件和Movie.css文件。我创建了一个statefor循环movies，queries并创建了一个函数 searchMovie。在该searchMovie函数中，我调用了我的 API 并将结果传递给response.data.Search了我的setState函数setMovies。在return语句中，我将function和states作为props传递给了Header组件。



//MOVIES.JS

import React, { useState } from 'react';
import Header from '../Header/Header';
import axios from 'axios';
import './Movies.css'

const Movies = () => {
   //states
    const [movies, setMovies] = useState([]);
    const [query, setQuery] = useState('');

  //Consume the API
    const searchMovie = async (e) => {
        e.preventDefault();

        const API_KEY = "b57e0c63"; //use your personal API Key
        const apiURI = `https://www.omdbapi.com/?i=tt3896198&apikey=${API_KEY}&s=${query}`;

        try {
            const response = await axios.get(apiURI);
            const data = response.data.Search
            console.log(data);

           //setState
            setMovies(data);

        } catch (err) {
            console.error(err);
        }
    }


    return (
        <div className="shoppies">
         {/*Header component*/}
            <Header
                searchMovie={searchMovie}
                query={query}
                setQuery={setQuery}
                movies={movies}
            />
        </div>
    )
}

export default Movies;

回到我们的Header.js组件：
在下面的代码中，
我解构了从一个组件传递Movies.js到另一个Header.js组件的属性。然后，我创建了一个搜索表单，其中包含一个onSubmit处理程序，该处理程序接收一个在组件中定义的函数，以及一个用于更新用户在输入框中输入的值的内联函数。searchMovieMovies.jsonChange



//HEADER.JS

import React, { Fragment } from 'react';
import './Header.css';

//destructure props
const Header = ({ searchMovie, query, setQuery, movies }) => {
    return (
        <Fragment>
            <div className="header">
                <h1 className="title">Movie-search</h1>

                {/*Search form*/}

                <div className="search">
                    <form className="search-form" onSubmit={searchMovie}>
                        <label
                            htmlFor="query"
                            className="name"
                        >
                        </label>
                        <input
                            type="text"
                            name="query"
                            placeholder="i.e Guardians of the Galaxy Vol. 2"
                            value={query}
                            onChange={(e) => setQuery(e.target.value)}
                        />
                        <button type="submit">Search</button>
                    </form>
                </div>
            </div>

        </Fragment>
    )
}

export default Header;

让我们看看我们完成了多少！：将组件
导入Movie.js到App.js组件中。
代码如下：



//APP.JS


import './App.css';
import Movies from './Component/Movies/Movies';


function App() {
  return (
    <div className="App">
      {/*Movie component*/}
      <Movies />
    </div>
  );
}

export default App;

现在运行：npm start启动应用程序。您将在浏览器中看到带有搜索框的标题栏。

目前，搜索电影时没有任何内容渲染。接下来，我们进入包含电影image、电影title和电影的卡片组件year。

在之前创建的卡片文件夹中Card.js，创建一个组件。

在下面的代码中：
我解构了组件movies中尚不存在Card.js但Header.js组件中存在的元素，然后过滤掉所有没有海报图像的图像{movies.filter(movie => movie.Poster)，并使用电影数组进行映射.map((movie,index) =>，然后传入{movie.Title}和{movie.Year}。



//CARD.JS


import React from 'react';

const Card = ({ movies }) => {
    return (

        <div className="cardlist__movies">
            {movies.filter(movie => movie.Poster).map((movie, index) => (
                <div className="card" key={index}>
                    <img
                        className="movie__image"
                        src={movie.Poster}
                        alt="postal"
                    />
                    <div className="flex__card">
                        <p className="heading">{movie.Title}</p>
                        <p className="paragraph">{movie.Year}</p>
                        <br />
                    </div>
                </div>
            ))}
        </div>
    )
}

export default Card;

接下来，我们将Card.js组件导入到Header.js主组件中，并在底部渲染它。你的代码应该如下所示：



//HEADER.JS


import React, { Fragment } from 'react';
import './Header.css';
import Card from '../Card/Card';



const Header = ({ searchMovie, query, setQuery, movies }) => {
    return (
        <Fragment>
            <div className="header">
                <h1 className="title">Movie-search</h1>

                {/*Search form*/}

                <div className="search">
                    <form className="search-form" onSubmit={searchMovie}>
                        <label
                            htmlFor="query"
                            className="name"
                        >
                        </label>
                        <input
                            type="text"
                            name="query"
                            placeholder="i.e Guardians of the Galaxy Vol. 2"
                            value={query}
                            onChange={(e) => setQuery(e.target.value)}
                        />
                        <button type="submit">Search</button>
                    </form>
                </div>
            </div>

             {/*Card component*/}

            <div className="list-movie">
                <Card movies={movies} />
            </div>
        </Fragment>
    )
}

export default Header;

现在，如果您搜索一部电影，您应该会看到电影海报图片、上映年份和电影名称。

欢迎随时提问任何你不明白的地方。
如果你喜欢这些内容，可以在推特上关注我@tkworldclass。

文章来源：https://dev.to/thankgod/building-a-react-movie-application-2f55

菜单

分享

构建 React 电影应用。步骤 1（获取 API 密钥）：创建组件：

构建一个 React 电影应用程序。

步骤 1（获取 API 密钥）：

创建组件：

步骤 1（获取 API 密钥）：

项目设置：

创建组件：

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码