React 영화 애플리케이션을 구축합니다.

47413 단어 webdev react javascript css

본 논문에서 OMDB API를 사용하여 영화를 검색하고 발견하는 데 사용할react 영화 프로그램을 구축할 것입니다.복제 재구매 계약 https://github.com/Tk-brainCodes/OMDB-Movies.git을 직접 복제할 수 있습니다.
Live-Demo을 보십시오.

1단계(API 키 획득):

이 항목에 대한 무료 API 키를 보려면 이 링크를 계속하십시오.
링크: API Key.
API 키는 사용자가 API를 사용하는 방법과 하루에 얼마나 많은 요청을 보내는지 추적하는 데 사용됩니다.이 API는 매일 1000개의 검색 제한을 제공합니다.API 키가 이메일 주소로 전달되므로 이제 OMDB API를 사용할 수 있습니다.

프로젝트 설정:

터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다.
실행: npx create-react-app OMDB-movies 새 react 프로그램을 만듭니다.
디렉토리에 cd 넣기: cd OMDB-movies실행: npm install axios에서 API로부터 데이터를 요청합니다.
그리고 실행: npm start 또는 yarn start을 실행하여react 응용 프로그램 서버를 시작합니다.브라우저에서 react 로고가 회전하는 것을 볼 수 있습니다.

어셈블리를 생성하려면 다음과 같이 하십시오.

응용 프로그램에서js 구성 요소가 모든 것을 벗어났다.이렇게 해야 합니다.


import './App.css';


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

    </div>
  );
}

export default App;

그런 다음 src 폴더에 새 폴더를 만들고 이름을 Components으로 지정합니다.Components folder에서 각 구성 요소에 대해 세 개의 폴더를 생성합니다.

카드 폴더

제목 폴더

영화 폴더

프로젝트 구조는 다음과 같습니다.

이제 Header.js 구성 요소부터 시작하겠습니다.Header components 폴더에 Header.js 구성 요소와 Header.css 파일을 만듭니다.다음 코드는 Header.css 파일의 기본 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 파일이 생성됩니다.다음 코드는 Movies.css 파일의 기본 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 파일도 가져왔습니다.나는 state과 movies을 위해 queries을 만들었고 함수 searchMovie을 만들었다. searchMovie 함수에서 나는 나의 API를 사용했고 response.data.Search을 내게 전달한 setState 함수 setMovies을 사용했다.return 문장에서 나는 function과 states을 도구로 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 프로세서로 검색 폼을 만들었습니다. 이 프로세서는 searchMovie 구성 요소에 정의된 함수 Movies.js과 onChange 프로세서를 받아들였습니다. 이 프로세서는 입력에 입력한 값을 업데이트하는 내연 함수를 가지고 있습니다.

//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;

현재, 만약 당신이 영화 한 편을 검색한다면, 포스터 이미지, 발행 연도, 영화 제목을 표시하는 것을 볼 수 있을 것이다.

네가 알지 못하는 어떤 분야에서도 자유롭게 질문할 수 있다.
만약 당신이 이 내용을 좋아한다면 트위터에서 나를 주목할 수 있다.

Reference

이 문제에 관하여(React 영화 애플리케이션을 구축합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tkbraincodes/building-a-react-movie-application-2f55

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

하이픈은 여러 종류가 있는데, PHP를 반각 하이픈으로 통일한 견본이다

변량

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다