使用React构建的Netflix克隆网站 – 使用的库和TMDB API的应用

2 年 ago

新, 韵

1 minute

使用React创建网站测试

1. 克隆Netflix

利用React的强大功能和丰富的库创建了一个类似于Netflix的视频流服务的复制品。搭建了一个外观漂亮的网站，几乎相当于一张备忘录。

2. 实际制作的物品

我使用React+TypeScript创建了一个应用程序，它可以显示Netflix的电影列表。

成果物如下，链接为https://ty-gcp2-96f8b.web.app/。

源代码在GitHub上。

3. 已使用的库

为了更方便地使用React，利用以下的库。

3-1. 反应式-再兴

React和Redux非常搭配，可以高效地管理状态和数据流。在本项目中，我们也通过组合react-redux来有效地管理数据。

由于Redux本身是一个独立的实体，因此也可以单独使用。

redux（GitHub）

Redux（ドキュメント）

3-2. reagir au lecteur.

在创建视频流服务时，视频播放功能是必不可少的。react-player是为React设计的出色视频播放库，可以实现无缝的视频播放。

无论如何，我想在浏览器上播放声音，我想创建一个嵌入式视频组件来实现这个目标。

react-player（GitHub）

3-3. 反应式滑动

网站上的滑块或旋转木马显示是提升用户体验的重要元素之一。react-slick是一个易于使用且高度可定制的滑块库，即使在Netflix克隆中也得到了应用。

只需在设置中指定选项，并将其传递给Slider，就可以自定义。

import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
  };

  const images = [image, image2, image3]
  return (
    <Slider {...settings}>
      {images.map(img)=>
        <div>
          <img src={img} alt="pictuer" />
        </div
      }
    </Slider>
  );
}

3-4. 反应图标

图标在网站设计中起着重要的作用。React-icons提供丰富的图标集，可以方便地使用图标。

4. 获取到的数据来自TMDB。

在Netflix克隆应用中，我们使用TMDB（The Movie Database）API来获取电影和电视节目的信息。 TMDB是提供电影相关数据的API，结合React可以实现类似Netflix的内容展示。

具体来说，可以从以下方式中获取API密钥：The Movie Database

TMDB是一个拥有大量娱乐信息的数据库。
使用Postman发送API数据进行测试。

5. 文献引用

React Slickをカスタマイズして矢印ボタンを表示させる方法 | Developers.IO

Reactで始めるNetflixクローン作成 | Zenn

react-player を使ってストリーミング動画ビューア画面をつくる

React Slickの基礎知識

膨大なアイコンを収録！React Iconsでアイコンを手軽に配置してみよう

TMDb API を利用して映画のポスターやあらすじを自分のサイトに表示する

GCPを使ってHTTPSのウェブサイトを公開す

使用React创建网站 测试

目录