React Axios YoutubeApi

Git Link: https://github.com/sunnysideup0w0v/reactPractice
Youtube APIを使用して5つのビデオリストを抽出します.
意味uiを用いてアプリケーションuiを変更する作業などを行った.
propsアプリケーションを使用します.jsのstateをVideoItemに転送した後、VideoItemからVideoDetailにデータをアップロードします.

// App.js
import React from "react";
import SearchBar from "./copmonents/SearchBar";
import youtube from "./apis/youtube";
import VideoList from "./copmonents/VideoList";
import VideoDetail from "./copmonents/VideoDetail";

class App extends React.Component {
  state = { videos: [], selectedVideo: null };
  componentDidMount() {
    this.onTermSubmit("lofi playlist");
  }
  onTermSubmit = async (term) => {
    const response = await youtube.get("/search", {
      params: {
        q: term,
      },
    });
    this.setState({
      videos: response.data.items,
      selectedVideo: response.data.items[0],
    });
  };
  onVideoSelect = (video) => {
    this.setState({ selectedVideo: video });
  };
  render() {
    return (
      <div className="ui container">
        <SearchBar onFormSubmit={this.onTermSubmit} />
        <div className="ui grid">
          <div className="ui row">
            <div className="eleven wide column">
              <VideoDetail video={this.state.selectedVideo} />
            </div>
            <div className="five wide column">
              <VideoList
                videos={this.state.videos}
                onVideoSelect={this.onVideoSelect}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;


// VideoList.js
import React from "react";
import VideoItem from "./VideoItem";

const VideoList = ({ videos, onVideoSelect }) => {
  const renderedList = videos.map((video) => {
    return (
      <VideoItem key={video.etag} video={video} onVideoSelect={onVideoSelect} />
    );
  });
  return <div className="ui relaxed divided list">{renderedList}</div>;
};

export default VideoList;


// VideoItem.js
import React from "react";
import "./VideoItem.scss";

const VideoItem = ({ video, onVideoSelect }) => {
  return (
    <div className="item VideoItem" onClick={() => onVideoSelect(video)}>
      <img
        className="ui image"
        src={video.snippet.thumbnails.medium.url}
        alt="thumbnail"
      />
      <div className="content">
        <div className="header">{video.snippet.title}</div>
      </div>
    </div>
  );
};

export default VideoItem;

App.jsでonSearchTermを使用して検索する理由は、次のとおりです.
最初から何もない画面を排除するために.
apiのbaseURLはsrc/apisフォルダのyoutubeファイルでaxiosです.createを使用して、KEYは削除されました.My Unique Key....*
propsを使用すると、child componentで親componentのstateを変更する方法をより詳細に学習したり、async waitをより多く練習したりすることができます.
asyncとawaitを使用するのは,非同期処理を行うためである.
asyncとawaitを使用する前にaxios...次にnacatchを用いて応答を非同期処理し,不思議でより詳細な学習が必要であると感じた.
最初の授業でコードの勉強に追われていたら、
本期第2期読解では,コードを理解し,先にコードを書き,エラーを解決したり,解決できない場合にどのように修正するか,講義内容を重点的に理解し,Webアプリケーションを作成した.
propsでデータを渡す過程は面倒だと思いますが、なぜreduceが必要なのか、今になってやっと感じました.
次に、まずhooksを勉強して、それからreduceを勉強します.
ホークスは本当に少しも思い出せなくて、とても心配しました:)