How To Connect React Js With Django
- Shivam Rohilla
- May 22, 2022
- 3 comments
- 455 Views
<meta name="clckd" content="6301244fb7ed470eb1cd6b8c31d01ac4" />
Hello Everyone, in this post you'll learn how to connect react js with Django in simple steps.
As you guys know React js is a very powerful and famous frontend js library and some people suggest react as a framework.
Today we connect react js with one of the most powerful backend framework Django.
Step1:- Create a Django project
django-admin startproject backend
Step2:- Now Create a virtual environment
Step3:- Install Django Rest Framework in a virtual environment.
pip install django djangorestframework
Step4:- Now make a frontend app.
django-admin startapp frontend
Step5:- Now add this app and rest framework in Installed Apps:-
INSTALLED_APPS = [ 'rest_framework', 'frontend', ]
Step6:- Now write some URLs in your project urls.py
from django.contrib import admin from django.urls import path,include urlpatterns = [ path('admin/', admin.site.urls), path('', include('frontend.urls')), ]
Step7:- Now create some urls in your app
from django.urls import path from . import views urlpatterns = [ path('', views.index) ]
Step8:- Now write a basic command in your app views.py file
from django.shortcuts import render def index(request): return render(request, 'build/index.html') python manage.py runserver
Now finally run this command and your Django project start running on your localhost server
Now we set up react project.
for Setting up a react project install Node js and some other requirements in your pc.
Open a terminal and run this command.
npx create-react-app frontend
After running this command your project will be created successfully.
Now run the react project
npm run build
'DIRS': [os.path.join(BASE_DIR, '../frontend')],
and for serving static files paste this command at the bottom in settings.py
STATICFILES_DIRS = [ os.path.join(BASE_DIR, '../frontend/build/static'), ]
that's it. your settings and connection is done now run the project.
python manage.py runserver
My social media links