人気動画リストを表示(1)-サムネイルを表示

5196 ワード
React youtube テキストリンク
まずはYouTube公式サイトで親切に紹介してくれたので参考にしたほうがいいです.韓国語で翻訳するのも良いですが、英語サイトではソースなどを作ることができ、より多く利用できます!(もちろん、postmanを使ってもコードを簡単に書くことができます...ははは、英語と漢文の間で往復するはははは.)
YouTube apiドキュメントサイトを参照して開発します.
リンク→ビデオ、ビデオのフォーマットを知る
リンク→サムネイル、インポートされたビデオ情報のサムネイルがどのように組織されているかを知る
今回のリリースの概要は次のとおりです.

App


データをインポートする方法は多様ですが、これは基本的な方法です.
import { useEffect, useState } from 'react';
import './app.css';
import VideoList from './components/video_list/video_list';

function App() {
  const apiKey = process.env.REACT_APP_API_KEY;
  const [videos, setVideos] = useState([]);


  useEffect(() => {
    console.log('useEffect');

    const requestOptions = {
      method: 'GET',
      redirect: 'follow',
    };

    fetch(
      `https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${apiKey}`,
      requestOptions
    )
      .then((response) => response.json()) //반응을 json으로 변환
      .then((result) => {
        setVideos(result.items);
        // console.log(result.items);
      })
      .catch((error) => console.log('error', error));
  }, []);   // 컴포넌트가 업데이트 될 때마다 호출이 되는 것은 안 좋으니 []추가

  return (
    <>
      <VideoList videos={videos} />
    </>
  );
}

export default App;
まず、25の人気ビデオを入手するために
https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${apiKey}
はい.
そしてビデオリストをビデオリストに渡しました

VideoList

import React from 'react';
import VideoItem from '../video_item/video_item';

const VideoList = (props) => (
  <ul>
    {props.videos.map((video) => (
      <VideoItem key={video.id} video={video} />
    ))}
  </ul>
);

export default VideoList;
ビデオリストから値を1つずつ減算し、VideoItemを入れます.
各ビデオには、次の情報が含まれています.ここでサムネイルを使います!

VideoItem

import React from 'react';

const VideoItem = (props) => (
  <li>
    <h1>{props.video.snippet.title}</h1>
    <img src={props.video.snippet.thumbnails.default.url} alt=""></img>
  </li>
);

export default VideoItem;

サムネイルはこのように構成されています.

デフォルトバージョン



中程度のバージョン



高バージョン

HTML-2(午後)
毎日1モードの構築者モード