Udemy

Platform

日本語

Language

Network & Security

Category

[Instagramクローン編] React Hooks + Django Restframework

全世界10億人が利用するInstagramアプリを作成します。React Hooks + Redux ToolKit + Formik + TypeScriptの最先端フロントエンド技術とDjango REST Framework使用。

4.59 (86 reviews)

Students

6 hours

Content

Aug 2021

Last Update
Regular Price


What you will learn

React最新技術を使ったInstagramクローンアプリ開発(ハンズオン)

Django REST Frameworkを使ったAPI Endpoint開発

Axiosを使ったフロントエンドとAPI Endpointの連携


Description

全世界10億人が利用するSNS InstagramのクローンWebアプリをハンズオンで作っていきます。

Reactを使ったフロントエンドの最先端技術とPython Web フレームワークの Django REST Frameworkの使い方を学ぶことが出来ます。


本コースの学習テーマ


[フロントエンド]

React Hooks

Redux ToolKit

TypeScript

Formik/Yup

Material UI (モダンなAvatarアイコンなど)

AxiosによりAPI連携


[バックエンド]

Django REST Framework

API Endpoint

JWT (JSON Web Token) 認証



Screenshots

[Instagramクローン編] React Hooks + Django Restframework
[Instagramクローン編] React Hooks + Django Restframework
[Instagramクローン編] React Hooks + Django Restframework
[Instagramクローン編] React Hooks + Django Restframework

Content

はじめに

Instagram cloneアプリ

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

API Endpoint 開発 (DRF)

Source Code

Djangoプロジェクトの作成

Model作成 (User モデル)

Model作成 (Instagram機能 モデル)

settings

Admin ダッシュボード

シリアライザーの作成

Viewの作成

urlsの作成

API Endpoint 動作確認

Chrome ModHeader

React フロントエンド開発

Source code

Instagramクローンアプリ完成形

Reactプロジェクト作成

VS Codeの拡張機能インストール

Redux Tool Kit

authSlice (設定)

authSlice (非同期関数 : createAsyncThunk)

authSlice (extra Reducer)

Auth コンポーネント

新規登録用モーダル作成

ログイン用モーダル作成

Auth コンポーネント動作確認

postSlice (設定)

postSlice (extraReducer)

Core コンポーネント

ログアウト機能

投稿一覧の表示

Post コンポーネント (1)

Post コンポーネント (2)

EditProfile コンポーネント

NewPost コンポーネント


Reviews

C
Coo21 July 2021

reactやdjangoを使って実際に作りながらやっていけるのは他には見当たりません。 親近感のわく声に 高い技術力を感じました。 自分のできることの幅が広がり可能性が広がり ずっとワクワクできました。 ありがとうございます。 一通り理解があるとより楽しく受講ができると思います。 個人的には中級者向けです!

ばら8 March 2021

実践的な内容で、本当に価値のある講義でした。 冗長にならないようにコードの各部分の説明も丁寧になされており、ReactとDjango、API連携について基礎知識さえあれば、受講のハードルもそこまで高くないと感じました。

H
Hiroaki1 November 2020

他の方もおっしゃっている様にコピペの説明が少し多い様な気がします。完成物としては、大変勉強になるコードです。説明の際にUIを基にしたゴールから逆算してこの機能が必要です。といった噛み砕いた解釈があれば良いのですが、コードをコピペして、これはOOを説明していますといった様な、答えを解説している様な感じでした。 まだまだ私の理解力も至らないことが多いですが、もう少し思考力のある内容だと嬉しいです。

小山弓見夫21 October 2020

ソースコードは、とても参考になりました。 有料の教材としては、Udemyで勉強しに来た人向けには全然解説が足りないと思います。サンプルとしてソースコードを独自で勉強するには良いと思います。 そのため、動画の中で念仏のような説明は、無駄だと思う。


3371476

Udemy ID

7/28/2020

Course created date

7/30/2020

Course Indexed date
Bot
Course Submitted by