最短・最速で作る Youtube クローンアプリ React・React Hooks編

現場で使える技術が満載！ Youtubeクローンアプリを作って、React, React Hooks, ContextAPI, Module CSS,を使ったモダン開発をマスターしよう！

3.10 (277 reviews)

Udemy

platform

日本語

language

Web Development

What you will learn

Reactを使った開発

Layoutコンポーネントの利用方法

useHistory, useLocationの使い方

useStateを使ったLocal State管理

useReducer + ContextAPI + useContextを使ったGlobal State管理

CSS Moduleパターンを使ったスタイリング手法 (CSSの細かい説明は割愛)

Youtube APIの登録利用方法

Textに含まれるURLをaタグに変換して表示する方法

縦横比(アスペクト比)を保持したレスポンシブル対応

Promise allによる最適化

Why take this course?

本講義では、React + YouTube APIを使ってYouTube クローンアプリを実装しながら体系的に、

そして楽しくReact, React Hooks, Context API, CSS Moduleを使ったモダン開発を学習していきます。

本講義に含まれる内容

Functional Component中心のReact開発方法
Layoutの作成方法
React Router Domによるページ遷移
useHistory, useLocationの使い方
useStateを使ったLocal State管理
useReducer + ContextAPI + useContextを使ったGlobal State管理
CSS Moduleパターンを使ったスタイリング手法 (CSSの細かい説明は割愛)
Youtube APIの登録利用方法
Textに含まれるURLをaタグに変換して表示する方法
縦横比(アスペクト比)を保持したレスポンシブル対応
Promise.allによる最適化

一緒にYoutube クローンアプリケーションを実装し実践力を身につけていきましょう！

本講義は、中級者向けのコースになります。

講義内では、最新のreact開発手法である、react hooksを使用しています。

react hooksを初めて触る方は、
最短・最速で学ぶ React Hooks 完全ガイド！基礎〜応用編最新のReact開発+ステート管理をマスターしよう!
を先に受講することをおすすめします。

Content

はじめに

環境設定

第2回環境設定 (Node, VScode, Extentionの追加)

アプリケーション実装

第3回 Create react app

第4回 Layout + Headerコンポーネント作成

第5回 Youtube API登録

第6回リストの取得

第7回 Global Stateの追加

第8回リスト表示

第9回 Video詳細の取得

第10回動画プレーヤー追加

第11回関連動画の取得

第12回詳細ページの最適化

第13回ヘッダー検索機能追加

第14回検索結果表示

Reviews

August 11, 2023

もう少し説明が欲しかったです。説明が少ないのでただダラダラと書いている感じでした。また、エラーが出たのであれば収録しなおして編集するなどしてほしいです。本等と同じぐらいの値段なので間違えた部分はやり直してほしいです。

May 15, 2023

ReactRouter v6に対応しておりません。短い講義時間に詰め込んでいる感が有ります。その割にはCSSに関する関する解説が多いのですが、Reactに関する説明が少ないです。 Reactの教材なのですからCSSよりReactの解説に重点を置いて頂きたかったです。音楽も気が散ります。

Tttaaa

May 15, 2022

ありがとうございました。めちゃわかりやすいです！関係ないですが、youtube APIのmostPopularのレスポンスで`popular.snippet.thumbnails.standard`でurlがたまにないのがあるみたいです。 defaultとかは大丈夫でした。あとreact-youtubeで9.0.1使ってたらYouTubeコンポーネントのStyleがうまく当たらなかったのでclassName -> iframeClassName に変えたらうまくStyleが当たるようになりました。 react-router-domが6.3.0使ってたらSwitchをRoutesに変えるとうまくいきました。あと自分の環境ではYoutubeAPIのrate limit を超過してしまったのでモックを導入していきたいと思います。あと、chott-works com のトップページが真っ白でした。

Arata

November 5, 2020

403エラーが出て先に進めず、かなりストレスです… 講師はyoutubeAPIに1日の通信量制限がある可能性があり、時間を置いて試してくださいと話していますが、次の日になっても一瞬エラーが解消されるだけで、すぐにエラーになってしまいます… 途中まで講義を進めていたのに進めなくなってしまい中途半端に終わってしまいました…。推測で終えず、何らかの対処法をご考案いただきたいです…

Kiguri

October 20, 2020

声も聞き取りやすき、サクサク進み非常に快適ではありますが、一つ一つ解説していただけるわけではないので、薄らとReact-hooksを理解している人でないと迷いがあるのかなとは思いました。(cssについて常套手段ではあるのかなと思いますが、自分は理解がないので黒魔術感がありました。今回の主題ではないので問題はないです！)

Morita

September 21, 2020

useEffectなどの細い説明がないことや前提知識があることが条件だと思いますが、Reactをやったことがある人にとってはとても面白い学習教材でした！ useContext周りはもう少しだけ時間をとって解説することで、より理解がぐっと深まるかなと個人的に感じました。 youtubeApiを題材にした教材では、とても楽しくできましたので、素晴らしいと思いました。

August 28, 2020

Webアプリ開発を全くやったことがない人にとっては難しい内容かもしれませんが、他の言語での経験がある人にとってはとても、スムーズで濃い内容でした！ Reactに関しては、stateやcontextの基本的な知識を学んだ上で受講すると良いかと思います！とても良かったです！ありがとうございます！！

ryosuke

June 12, 2020

Reactを学ぶ上で、様々な技術がとてもわかりやすく理解することができました。実践的なサイトを作成することができたので、これを応用して色々作っていきたいと思います。次回もReactの講座作成していただけるのを楽しみにしています。

関口

June 5, 2020

hooks、context api等について、ある程度知識を入れた上で取り組むには最適な内容だと思いました！ hooksとは、contextとは、をある程度知っていて、その上でアプリケーションをどういう感じに組んでいけばいいかをさっと知れたので、とてもよかったです！

Charts

Price

Rating

Enrollment distribution

最短・最速で作る Youtube クローンアプリ React・React Hooks編 - Distribution chart