Netflix.js

// This file is pseudocode! Don't try to run this, it probably won't work :)
import React from "react";
import axios from "axios";
import Thumbnails from "./Thumbnails";

const Videos = ({ items }) => (
  <Thumbnails>
    {items.map(primeVideos => (
      <Thumbnail primeVides={primeVideos} />;
    ))}
  </Thumbnails>
);

// This screen will display while we are waiting for the data
// back from the API
const Loading = () => <div>Loading...</div>;

// This screen will display once ALL of the data comes back
// from the API
const VideoPage = ({ primeVideos, featuredMovies, genres }) => (
  <Layout>
    <Grid>
      <Row columns={3}>
        <Videos videos={primeVideos} />
      </Row>
      <Row columns={3}>
        <Videos videos={featuredMovies} />
      </Row>
      <Row columns={4}>
        <Videos videos={genres} />
      </Row>
    </Grid>
  </Layout>
);

class App extends React.Component {
  state = {
    primeVideos: [],
    genres: [],
    featuredMovies: [],
    loading: false
  };

  componentDidMount() {
    // We'll set loading to true, so that the Loading spinner appears
    this.setState({ loading: true });
    axios.get("path-to-netflix-api").then(response => {
      const { primeVideos, genres, featuredMovies } = response.data;
      this.setState({ primeVideos, genres, featuredMovies });
      // Once we actually get the data back, we set loading to false
      // so we can actaully display the video page
      this.setState({ loading: false });
    });
  }

  render() {
    const { primeVideos, genres, featuredMovies, loading } = this.state;
    return (
      <div>
        {this.state.loading ? (
          <Loading />
        ) : (
          <VideoPage
            primeVideos={primeVideos}
            genres={genres}
            featuredMovies={featuredMovies}
          />
        )}
      </div>
    );
  }
}