react_1

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false
    };
  }
  componentDidMount() {
    fetch('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=20&playlistId=PLq_HnfNV635qKUDfIVKWBX0F243UbEw7r&key=AIzaSyBoJtE5EX5c1mXS7wzzx6HwsBtcdaUdbIk')
     .then(res => res.json())
     .then(data => {
       this.setState({
         items: data,
         isLoaded: true
       });
     });
  }
  render() {
    const {isLoaded, items} = this.state;
    if(!isLoaded) {
      return <div>Loading...</div>
    }
    return (
      <div className="App">
        {items.items.map(item => (
          <div key="{item.id}">
            <b>Title:</b> {item.snippet.title}
          </div>
        ))}
      </div>
    );
  }
}

export default App;