How To Connect React Js With Django

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

virtualenv envrec

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

Final Steps for connection.

'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