Django & React App

I’m trying to create simple web-app with Django, React.

Using Django for backend, React for frontend.

Manual- How to replicate)

1. Create project folder and python virtual environment

django-admin startproject backend

npx create-react-app frontend

install yarn

delete useless file (logo, sort of..)

create folder in ‘src’ folder: img(for saving static image), components(for saving javascript and css file), container(for wrapping files in components folder: this folder is directly routing!), services(for saving API files)

create folder in ‘components’ folder: Home, Diagnose, Recommendation.. whatever you want

2. Setting Backend

usually… 1) Product DB, 2) User demo DB, 3) User Specify DB (e.g. user response data in case of diagnose system)

python startapp {name of your app} initialize models

(create) make serializer make view register DB

createsuperuser → makemigrations → migrates → runserver

import os

add INSTALLED_APPS: your installed apps, corsheaders, restframework

add MIDDLEWARE: for cors setting

add CORS_ORIGIN_WHITELIST: for proxy frontend request

add TEMPLATES → ‘DIRS’: for register template from frontend


add STATICFILES_DIRS: for register image files from frontend

import routers from rest_framework, from app folder

API setting: (baseline — here)

Difference1. HometemplateView setup → from django.views.generic import ProductView is wrong
Difference2. as_view() should need argument (e.g. {‘get’: ‘list’})
*Limitation: this ref don’t have show interaction precisely btw frontend and backend → tunneling through axios should be edited!



인적자원개발과 학습분석에 관심이 있습니다. Interested in HRD and Learning Analytics

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jee Hun Sung

인적자원개발과 학습분석에 관심이 있습니다. Interested in HRD and Learning Analytics