Udemy

Platform

日本語

Language

Network & Security

Category

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

今話題のReact Hooks徹底入門。Python Web フレームワークDjango REST Framework APIとの連携手法も網羅。世界中のフロントエンジニアに愛されるReact Hooks。

4.30 (360 reviews)

Students

5.5 hours

Content

Aug 2021

Last Update
Regular Price


What you will learn

React Hooksの使い方

Django REST FrameworkでのAPI開発

React と Django REST FrameworkのAPI連携

SPA(シングルページアプリケーション)のReactでの基礎

ReduxのcombinedReducesとHooksの組み合わせ


Description

2019年2月、React開発者に衝撃を与えたReact Hooksの登場により, React開発はクラスコンポーネントを使わない新たな開発手法に変わっていきます。

Facebook, Instagram, Slack, Uber, Paypalなど今の時代を牛耳るアプリケーションのフロントエンドに使われているReactを使えるエンジニアの希少価値は高まる一方です。


本コースでは、これからのReact開発の主流になるReact Hooksを基礎から学んで行きます。更に、YoutubeやInstagramのバックエンドに使われているPythonのWebフレームワークDjangoのRestFrameworkを使って、オリジナルのAPIを作成しReactとの連携手法を解説します。

これにより、シンプルなWebアプリケーションのフルスタック開発を行う基礎力を身に付けることが出来ます。


本コースの構成内容

1. React Hooks

-useState

-useEffect

-useContext

-useReducer

-useMemo

-useCallback

-useReducer + useContextの合わせ技

-axios を使ったAPI End point へのアクセス

-fetchを使ったAPI End point へのアクセス

-"Redux CombineReduces" とHooksの組み合わせ


2. Django REST Framework API

-models

-urls

-serializers

-permissions

-CORS

-Token


3. React + Django REST API 連携

-トークン認証の処理

-GET method (リストデータ取得)

-GET method (idによる要素取得)

-DELETE method

-DELETE method : SPA対応

-CREATE method : SPA対応

-Update method : SPA対応


Screenshots

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

Content

React + Djangoを学ぶモチベーション

React + Djangoを学ぶモチベーション

React Hooks Bootcamp

React開発環境

プロジェクトフォルダー構造

Functional コンポーネント

Props

イベントハンドラー

React Hooksの凄さ

UseState 基礎1

UseState 基礎2

UseState (Object)

UseState (配列)

UseEffect

UseEffect (条件付きレンダリング)

UseEffect (Cleanup)

APIデータ取得(axios + fetch)

APIデータ取得(axios + fetch) : id

useContext コンセプト

useContext 実装

useReducer コンセプト

useReducer 実装

useReducer + useContext組み合わせ

useReducer + useContext組み合わせ : 実装

useMemo

useCallback

Django REST Framework API

Django REST Frameworkの無料コース

ツールのインストール

仮想環境の構築

プロジェクト作成

モデルの作成

シリアライザー

API Endpoint コンセプト

Views

動作確認(POSTMAN)

Permissions

CORS

React Hooks と Django REST API連携

ReactからAPI Endpointにアクセス(GET)

IDを使ったGET Method

IDを使ったDELETE Method

SPA : DELETE Method

SPA : Create タスク

SPA : Update タスク

更に勉強したい人向け

応用編コースのご案内


Reviews

Y
Yusuke6 June 2021

React Hooksの内容がメインで非常にわかりやすいです。初心者にもおすすめです。ただ作成するアプリに関してTokenをそのままソースコードに書くなど実践的とは思えない箇所がありその辺りだけ残念に感じました。

D
Daisuke16 March 2021

構成も非常に良いし、Rest APIを学ぶのに非常に良い内容だと思うのだが全体的に説明が足りないと感じます。 何か変更を加える際にしばらく黙って画面を操作して何事もなかったかのように進めるのは辞めてほしかったです

H
H22 February 2021

djangoのセクションに入ってから特に感じましたが、完成形が分からないままコードを書いているので、何をしているのか分からないままコードを書く作業になってしまいました。あらかじめ完成形が示されていると分かりやすいと思います。

T
The23 January 2021

全体的に説明不足だと感じた。書き写すだけという感じになるのであればYoutubeで英語ならいくらでもあります。 もっとなぜそうするのか、そうすべきなのか、実際の業務では〇〇がよく使われる、といった説明が欲しかった。 DRFとReactの組み合わせがないから仕方なく選んでしまった感じ。

Y
Yasuhiro3 January 2021

ただ写経するだけなら問題なく進められますが、Web系未経験者の場合、説明が足りないと思う点が多々あるでしょう。例えば、CORSの導入で、CORSが何かという具体的な説明はないです。REST APIも一つ一つの関数の説明がほぼなく、この関数を使えば実現できるといったことしか言わないです。自力で調べられる人でないと勧められないです。

中野辰典28 November 2020

説明がわかりやすい。声も聞き取りやすい。 他の評価の高い講師のReactコースも受講してみたがわかりづらく断念(返金)した経緯があり、Reactが難しいのかと打ちひしがれそうになりかけたが、このコースに出会えてよかった。まだ途中ですがこのまま修了できれば基礎は身につくだろうなと確信しながら進めています。 このコースの完了後は別に出されている応用版?ですかね、YoutubeクローンアプリやTypeScriptのコースを受講する予定です。よろしくお願いします。

小山弓見夫24 September 2020

Node.jsを理解している前提で、React Hooksの説明が進むので、Node.jsを知らないと理解不能。 逆にNode.jsを理解しているのであれば、このコースを学習しなくてもReact Hooksを理解できると思うので、このコースの存在が無意味。

D
Daisuke6 August 2020

Hooks周りの巧拙はわからないが、拡張子の jsx/js の区別、あるいはTypeScriptの不使用、型に対する無関心が個人的には合わなかった。TypeScriptを採用しないにしても型の観点で正しい作法で記述してほしかった

Y
Y1 August 2020

・Hooksをリファレンス的に解説してくださるので、短時間で習得可能 ・当然Djangoはコース内での習得は不可(別で学習必要。APIを動かすことに特化) ・Reactを使ったことが無い人には難しいかも (React未経験者にはHooksが今までの何を解決するのかピンとこないかも)

U
U24 June 2020

レビューに書かれている、文字が小さくて見えにくいという点は改善されておられて、特に違和感なく受講できています。 動画の内容もしっかりまとまっていて、初歩的な知識に関してでも質問するとすぐに、かつ次にも質問しやすいような親切な回答の仕方をしてくださるのでモチベーションも維持しやすく本当に素晴らしい講座です。 ありがとうございました!

富山健作13 June 2020

内容自体はとても勉強になるものになってると思います。 Reactの基本的な使い方も非常に分かりやすかったです。今後、React / Redux開発でのTips集のような講座があると、良いと思いました。 改善点としては、画面のズームインが行われておらず、どんなコマンドを打ち込んでるのか不明瞭な場面がある点がやや残念です。

K
K-Matsuura26 May 2020

以下の点が個人的に不満が残っている ・コードを参照する際に拡大されておらず見えづらい、或いは拡大しすぎて見えなかったりする場面が散見され、動画を止めたり戻る必要が多かった ・reactの各機能紹介の説明が必要最低限であり、初めてreactに触れる人間にとって敷居が高め ・各レクチャー後のサンプルがなく、実装が適切か不安が残る(フロント言語に触れていない人間にとって、VSCodeのインテリセンスだけでは厳しいと思う)


3070816

Udemy ID

4/30/2020

Course created date

5/9/2020

Course Indexed date
Bot
Course Submitted by