Turn what you know into an opportunity and reach millions around the world.

Your cart is empty.

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

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

Highest Rated

Created byZin nux

Last updated 2/2025

Japanese

What you'll learn

React最新技術を使ったInstagramクローンアプリ開発(ハンズオン)
Django REST Frameworkを使ったAPI Endpoint開発
Axiosを使ったフロントエンドとAPI Endpointの連携

Course content

4 sections • 40 lectures • 6h 6m total length

Instagram cloneアプリ13:44
本コースで使用するツールのインストール1:07

Source code0:35
Instagramクローンアプリ完成形5:06
create-react-app オプション + "--legacy-peer-deps"オプション1:01
[注意] axios の version0:09
Reactプロジェクト作成4:46
VS Codeの拡張機能インストール1:47
[注意]最新VersionのReduxToolKitのカウンターデモ8:27
Redux Tool Kit8:32
authSlice (設定)14:21
authSlice (非同期関数 : createAsyncThunk)13:44
authSlice (extra Reducer)14:40
Auth コンポーネント14:02
新規登録用モーダル作成25:02
ログイン用モーダル作成5:35
Auth コンポーネント動作確認12:06
postSlice (設定)22:05
postSlice (extraReducer)6:36
Core コンポーネント8:34
ログアウト機能8:23
StyledBadge overlap="circle" depreciated0:16
投稿一覧の表示9:05
Post コンポーネント (1)11:35
Post コンポーネント (2)13:03
EditProfile コンポーネント13:54
NewPost コンポーネント12:25

Requirements

"最速で学ぶTypeScript" 無料コースの受講（必須）
"[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発" の受講（必須）
"[Redux編] Redux Tool KitとReact HooksによるモダンReact フロントエンド開発" の受講（推奨）
Mac OS

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) 認証

Who this course is for:

React Hooks + Redux ToolKit + TypeScriptの基礎を学んで、何かアプリを作ってみたい人
SNSのプロフィールやコメント機能の実装方法に興味のある人