[第六章]インポートモードと画像

38116 ワード
React はんのう テキストリンク

ムービーをリストするためのRow構成部品の作成


row componentを適用します.jsでまず5つ取りましょう
function App() {
  return (
    <div className="App">

      <Nav />
      <Banner/>
      <Row 
        title="NETFLIX ORIGINALS"
        id="NO"
        fetchUrl={requests.fetchNetflixOriginals}
        isLargeRow
      />
      <Row
        title="Trending Now"
        id = "TN"
        fetchUrl={requests.fetchTrending}
      />
      <Row
        title="Top Rated"
        id = "TR"
        fetchUrl={requests.fetchTopRated}
      />
      <Row
        title="Action Movies"
        id = "AM"
        fetchUrl={requests.fetchActionMovies}
      />
      <Row
        title="Comnedy Movies"
        id = "CM"
        fetchUrl={requests.fetchComedyMovies}
      />
    </div>
  );
}
このようにしてRowを5個作ります
isLargeLowとは一番前に出てくる大物のこと.

公開されたPropsを受け入れる

import React from 'react'

export default function Row({isLarge, title, id, fetchUrl}) {
  return <div></div>
  
}

ムービー情報の取得

import React, { useEffect, useState } from 'react'
import axios from '../api/axios';


export default function Row({isLargeLow, title, id, fetchUrl}) {
    const [movies, setMovies] = useState([]);
    useEffect(()=>{
        fetchMovieData();
    },[]);

    const fetchMovieData = async () => {
        const request = await axios.get(fetchUrl);
        setMovies(request.data.results);
    }


    return <div></div>
}
このように持ってきてください.

UIの作成

    return(

    <section>
        <h2>{title}</h2>
        <div className='slider'>
            <div className='slider__arrow-left'>
                <span className='arrow'>{"<"}</span>
            </div>
    <div id={id} className="row_posters">
        {movies.map(movie => (
            <img
                key={movie.id}
                className={`row__poster ${isLargeRow && "row__posterLarge"}`}
                src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path: movie.backdrop_path}`}
                alt={movie.name}
            />
        ))}
        <div className='slider__arrow-right'>
        <span className='arrow'>{">"}</span>
        </div>

    </div>
        

        </div>
    </section>
    )
こうしてUIが生成される.

こいつのせいで、横に並んでいられなかった.
マットを1つ追加して、死ぬべきだ......もう直った以上、スライド機能を追加しましょう.

スライド機能の追加


矢印の方向をクリックしたときのスライド機能


innerwidth


scrollLeft


使用
<span
                    className='arrow' 
                    onClick={()=>{
                        document.getElementById(id).scrollLeft -= window.innerWidth - 80;
                    }}>
矢印ボタンをクリックするたびに、移動させてください!
            <div className='slider__arrow-left'>
                <span
                    className='arrow' 
                    onClick={()=>{
                        document.getElementById(id).scrollLeft -= window.innerWidth - 80;
                    }}
                    >
                        {"<"}
                </span>
            </div>
            <div id={id} className="row__posters">
                {movies.map((movie) => (
                    <img
                        key={movie.id}
                        className={`row__poster ${isLargeRow && "row__posterLarge"}`}
                        src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path: movie.backdrop_path}`}
                        loading ="lazy"
                        alt={movie.name}
                    />
                ))}
            </div>
            <div className='slider__arrow-right'>
                <span 
                className='arrow'
                onClick={()=>{
                    document.getElementById(id).scrollLeft += window.innerWidth - 80;
                }}
                >{">"}</span>
            </div>
右側にプラス記号を行けばいいです.
これで書くことに成功しました.

Styled componentを使用したFooterの作成



この部分を作ろう
import React from "react";
import styled from "styled-components";

export default function Footer() {
  return (
    <FooterContainer>
      <FooterContent>
        <FooterLinkContainer>
          <FooterLinkTitle>넷플릭스 대한민국</FooterLinkTitle>
          <FooterLinkContent>
            <FooterLink href="https://help.netflix.com/ko/node/412">
              넷플릭스 소개
            </FooterLink>
            <FooterLink href="https://help.netflix.com/ko">
              고객 센터
            </FooterLink>
            <FooterLink href="https://help.netflix.com/ko/">
              미디어 센터
            </FooterLink>
            <FooterLink href="https://help.netflix.com/ko/">
              이용 약관
            </FooterLink>
            <FooterLink href="https://help.netflix.com/ko/node/412">
              자막 및 설정
            </FooterLink>
            <FooterLink href="https://help.netflix.com/ko">
              음성 지원
            </FooterLink>
            <FooterLink href="https://help.netflix.com/ko/">
              기프트카드
            </FooterLink>
            <FooterLink href="https://help.netflix.com/ko/">
              쿠키 설정
            </FooterLink>
          </FooterLinkContent>
          <FooterDescContainer>
                <FooterDescRights>
                    Netflix Rights Reserved.
                </FooterDescRights>
          </FooterDescContainer>
        </FooterLinkContainer>
      </FooterContent>
    </FooterContainer>
  );
}

const FooterContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid rgb(25, 25, 25);
  width: 100%;
  position: relative;
  z-index: 100;

  @media (max-width: 769px) {
    padding: 20px 20px;
    padding-bottom: 30px;
  }
`;

const FooterContent = styled.div``;

const FooterLinkContainer = styled.div`
  width: 500px;

  @media (max-width: 768px) {
    width: 100%;
  }
`;

const FooterLinkTitle = styled.h1`
  color: gray;
  font-size: 17px;
`;

const FooterLinkContent = styled.div`
  display: flex;
  justify-content: space-bewteen;
  flex-wrap: wrap;
  margin-top: 35px;

  @media (max-width: 768px) {
    margin-top: 26px;
  }
`;

const FooterLink = styled.a`
  color: gray;
  font-size: 14px;
  width: 110px;
  margin-bottom: 21px;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    margin-bottom: 16px;
  }
`;

const FooterDescContainer = styled.div`
  margin-top: 30px @media (max-width: 768px) {
    margin-top: 20px;
  }
`;

const FooterDescRights = styled.h2`
  color: white;
  font-size: 14px;
  text-align: center;
`;
ちょっと長いけど…styled構成部品でFooterを作成します.

ムービーの詳細をクリックしてモードを作成

import React, { useEffect, useState } from 'react'
import axios from '../api/axios';
import MovieModal from './MovieModal';
import "./Row.css";


export default function Row({isLargeRow, title, id, fetchUrl}){

    const [movies, setMovies] = useState([]);
    const [modalOpen, setmodalOpen] = useState(false);
    const [movieSelected, setMovieSelected] = useState({});

    useEffect(() => {
        fetchMovieData();
    },[fetchUrl]);

    const fetchMovieData = async () => {
        const request = await axios.get(fetchUrl);
        setMovies(request.data.results);
    };

    const handleClick = (movie) =>{
        setmodalOpen(true) //모달 오픈이 트루 
        setMovieSelected(movie);

    }

    return(
    <section className="row">
        <h2>{title}</h2>
        <div className='slider'>
            <div
                className='slider__arrow-left'               
                onClick={()=>{ //스크롤 기능(완)
                        document.getElementById(id).scrollLeft -= window.innerWidth - 80;
                    }}>
                <span
                    className='arrow' 

                    >
                        {"<"}
                </span>
            </div>
            <div id={id} className="row__posters">
                {movies.map((movie) => (
                    <img
                        key={movie.id}
                        className={`row__poster ${isLargeRow && "row__posterLarge"}`}
                        src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path: movie.backdrop_path}`}
                        loading ="lazy"
                        alt={movie.name}
                        onClick={()=> handleClick(movie)}
                    />
                ))}
            </div>
            <div 
                className='slider__arrow-right'
                onClick={()=>{ //스크롤 기능(오)
                    document.getElementById(id).scrollLeft += window.innerWidth - 80;
                }}>
                <span 
                className='arrow'
                
                >{">"}</span>
            </div>
        </div>
        {
            modalOpen && ( //모달 오픈시 
                <MovieModal {...movieSelected} setmodalOpen={setmodalOpen} /> //컴포넌트 가져오기 
            )
        }
    </section>
    )
}
これにより、モードを開いたときに構成部品をインポートできます.
次に、Movie Modal UIを作成します.

Movie Modal UIの作成


UIの作成


index.次のようにjsを作成します.
import React from 'react';
import "./MovieModal.css";

function MovieModal({
    backdrop_path,
    title,
    overview,
    name,
    release_date,
    first_air_date,
    vote_average,
    setModalOpen
}){
    return <div className="presentation">
        <div className='wrapper-modal'>
            <div className='modal'>
                <span onClick={()=> setModalOpen(false)} className='modal-close'>
                    X
                </span>

                <img 
                    className='modal__poster-img'
                    src={`https://image.tmdb.org/t/p/original/${backdrop_path}`}
                    alt="modal__poster-img"
                />
                <div className='modal__content'>
                    <p className='modal__details'>
                        <span className='modal__user_perc'>
                            100% for you 
                        </span>
                        {release_date ? release_date : first_air_date}
                    </p>
                    <h2 className='modal__title'>{title? title : name}</h2>
                    <p className='modal__overview'>평점 : {vote_average}</p>
                    <p className='modal__overview'>{overview}</p>
                </div>
            </div>
        </div>

    </div>;
}

export default MovieModal;

これで月が昇る
C#のページングクラスを共有
iOSプレミアム開発runtimeの件実戦(2)