【React+TypeScript】Netflixのクローンを作る 追加コンテンツ

てりー

こちらは以前書いたNetflixクローンを作るチュートリアルの追加コンテンツです！！

内容は

  • react-queryを使ったデータフェッチ

    • それに伴うパフォーマンス改善

  • useContextを使ったグローバルなstate管理

  • Youtubeトレイラーを本家Netflixの様に画面上部に表示

  • 音量のOn/Off機能の追加

  • デザイン修正

を行っています。

実際の画面の動きはこんな感じです！

ヘッダー部分に広々とYoutubeトレイラーが表示され、クリックした映像の予告動画が流れます。(映像がない場合はポスター画像)

音声のOn/Offは左上に設置し、表示する映像一覧の数も少し絞って画像サイズを大きくしています。

受け取り方

追加コンテンツは受け取り方を2つ用意しています。

  1. 有料noteを購入

  2. チュートリアルのnoteの口コミを書く

購入に関しては本noteを購入して頂ければOKです！！
てりーにコーヒー１杯分ぐらい奢りたいなーって感じたら買って下さい。

もう1つの方法として口コミをXで投稿して無料で受け取ることが出来ます
！！

⬇️詳しい条件はこちら

✅このnoteリンクを貼って、40文字以上の口コミを書いたポストを投稿
✅Xアカウント(https://twitter.com/teriteri_code)にDMにて完了報告頂けたら追加コンテンツをプレゼントします

頂いた口コミの一部

ぜひ受け取って下さい。


ここから先は

27,113字 / 4画像

¥ 500

この記事が気に入ったらサポートをしてみませんか？