Udemy

Platform

日本語

Language

Network & Security

Category

[Youtube編] React Hooks + Django RestFramework API でフルスタックWeb

React Hooks フロントエンド+Django RestFramework バックエンドAPIでYoutubeの簡易クローンシステムを作ります。

4.35 (59 reviews)

Students

5 hours

Content

Aug 2021

Last Update
Regular Price


What you will learn

Django RestFramework (DRF)

React Hooks

動画ファイル(mp4)のDjango+Reactでの処理方法

JWT(JSON Web Token)認証

Material UI


Description

Facebook, Instagram, Slack, Uber, Paypalなどのフロントエンドに使われているReact、YoutubeやInstagramのバックエンドに使われているPythonのWebフレームワークDjangoのRestFrameworkを使って、Youtubeクローンアプリケーション開発を行います。


[Youtube Clone編]の目玉は、Django+Reactを使った動画データの処理とJWT(JSON Web Token)の具体的な実装例です。


本コースでは、アプリケーションを開発していくため、事前に下記の基礎コースの受講をおすすめしています。


"Django REST APIでデバイス管理ツールを作ってみよう"

"React Hooks + Django REST Framework API でフルスタックWeb開発(基礎編)"


[フロントエンドで使用する技術]

React Hooks

Material UI

React Cookies

React Player (動画ファイル)

SPA (Single Page Application)

axios (async/await)


[バックエンドで使用する技術]

DRF (Django RestFramework)

JWT 認証 (Token 有効期限など)

動画データ(mp4) + サムネイル管理データベース

API Endpoint




Screenshots

[Youtube編] React Hooks + Django RestFramework API でフルスタックWeb
[Youtube編] React Hooks + Django RestFramework API でフルスタックWeb
[Youtube編] React Hooks + Django RestFramework API でフルスタックWeb
[Youtube編] React Hooks + Django RestFramework API でフルスタックWeb

Content

はじめに

はじめに

コースで使用するツールのインストール

[バックエンド] Django Rest Framework

Source Code

仮想環境構築

新規DRFプロジェクト

settings.py設定

urls.py設定

データベースモデルの作成(1)

データベースモデルの作成(2)

Admin ダッシュボードパネル

シリアライザー

Views

Postman JWT トークン + API動作確認

「フロンドエンド」React

Source Code

動作確認用 mp4 + png ファイル

React プロジェクト作成

VS Code Prettier 設定

Material UI Theme設定

NavBar

Router

Login (theme設定)

Login (useReducer)

Login (JSX)

Login (バックエンドとの連携 API)

ApiContext (useEffect)

ApiContext (newVideo)

ApiContext (deleteVideo)

ApiContext(いいね機能)

ApiContextProvider

Mainコンポーネント

Mainコンポーネント(Grid)

Mainコンポーネント(Modal)

Mainコンポーネント(API連携動作確認)

VideoItemコンポーネント

Video一覧表示

Video詳細表示


Reviews

小山弓見夫17 October 2020

素人向けの内容ではない。どんな人向けかよくわからない。 ソースコードは、とても参考になるが、説明を聞いていても何故そうしないといけないのか等の説明は一切無い。 なので、ソースコードを見て勉強するにはとても良い。 動画の有料教材としては、最低と思う。

真先9 September 2020

今回、大変お世話になりありがとう御座いました。特にすばやい解答に助けていただき、なんとか終了することができました。 また、内容的にもすばらしい内容ありがとう御座います。 Material UI 、動画の投稿、閲覧をreact , django rest frameworkとの連携大変勉強になりました。 1つお願いがあります。いろいろの講座を作成されていますが、どの順番で受講したら良いか分からないので、受講の順番を教えて、いただければ、ありがたいです。

M
Masahiro10 July 2020

最新の技術を使って分かりやすく解説しており、非常に良い。 ReactとDjangoを組み合わせることを検討している場合、Kazu Takehana氏の講座を全て受けるとかなりレベルアップできると思う。 少し文字が小さい時もあるが、サンプルコードが配布されており問題ない。 今後新しい講座を作る場合は、同様の成果物でReactとDjangoにテストを入れる場合について解説頂けると助かる。

Y
Yosuke14 June 2020

Rails+Reactの認証周りの実装方法について学びたく学習させていただきました。 何かしらの言語を経験されている方であれば、Djangoの経験がなくても何をしたいかのイメージはつきやすいと思います。 また、つまづいた際の質問に関しても丁寧でとてもよかったです。


3188176

Udemy ID

5/31/2020

Course created date

6/11/2020

Course Indexed date
Bot
Course Submitted by