This content originally appeared on DEV Community and was authored by ShivamRohilllaa
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.
Write the react app path in settings.py DIR
'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
This content originally appeared on DEV Community and was authored by ShivamRohilllaa
ShivamRohilllaa | Sciencx (2021-05-13T15:33:39+00:00) How to connect React js with Django. Retrieved from https://www.scien.cx/2021/05/13/how-to-connect-react-js-with-django/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.