React YouTubeレッスン1

5339 ワード
テキストリンク
今回YouTubeのクローンプロジェクトを行った時YouTube APIを使い、便利なツールPostmanを使います.
(APIカテゴリのPostmanの使い方を参照)

Videosの情報をロードし、Fetchコードとして受信します.
次のアプリ上のコードをコピーしてjsxに貼ればいいです.
hooksを使用して、次の内容を記述します.

App.jsx

import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';
import VideoList from './components/video_list/video_list';

function App() {
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    const requestOptions = {
      method: 'GET',
      redirect: 'follow'
    };
    
    fetch("https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=나의 키", requestOptions)
      .then(response => response.json())
      .then(result => setVideos(result.items))
      .catch(error => console.log('error', error));

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

export default App;
varをconstに変更します.
USState([])を使用して、ビデオ値を格納するビデオを作成します.
ビデオに保存し、setVideosは更新可能な関数です.
USStateに空のlist[]初期値を割り当てる
更新時にコールバックを登録するにはuseEffectを設定します.
構成部品を更新するたびに呼び出されます

空の配列をパラメータとしてuserEffectの最後に渡すと、ロード時にのみuserEffectが呼び出されます。

useEffect(() => {
    const requestOptions = {
      method: 'GET',
      redirect: 'follow'
    };
    
    fetch("https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=나의 키", requestOptions)
      .then(response => response.json())
      .then(result => setVideos(result.items))
      .catch(error => console.log('error', error));

  }, []);
ビデオリストおよびビデオitemコンポーネントの作成

video_list

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;

video_item

import React from 'react';

const VideoItem = (props) => (
        <li>
            <img src={props.video.snippet.thumbnails.medium.url} alt="video thumbnail" />

            <div>
                <p>{props.video.snippet.title}</p>
                <p>{props.video.snippet.channelTitle}</p>

            </div>

        </li>
    );

export default VideoItem;
これまでの実施
[WEEK02] DAY16 & TMI
Orchard運用-カスタムブログページング表示