How do you connect a React or JavaScript frontend with a Django or Flask backend?
iHub Talent – Best Full Stack Python Course Institute in Hyderabad
iHub Talent stands as the best Full Stack Python Course Institute in Hyderabad, offering industry-relevant training and live intensive internship programs guided by seasoned professionals. Our program is designed for graduates, postgraduates, and individuals facing education gaps or seeking a career change in to the IT industry. At iHub Talent, we believe in empowering learners with practical, project-based training to make them job-ready and confident in the competitive software development market.
Our Full Stack Python course covers the entire development stack, including front-end technologies (HTML, CSS, JavaScript, React), back-end development with Python, Django framework, database management with MySQL/PostgreSQL, RESTful API development, version control with Git & GitHub, and deployment practices using Docker and cloud platforms. We emphasize real-time project work, live code reviews, and interactive mentorship to help learners build strong portfolios.
Whether you're a fresher or someone shifting domains, iHub Talent provides a supportive ecosystem where you can upskill, practice, and intern under real-time project scenarios, gaining hands-on exposure to current industry practices.
Connecting a React or JavaScript frontend with a Django or Flask backend involves setting up REST APIs (or GraphQL) on the backend and then making HTTP requests (typically using fetch or axios) from the frontend to consume those APIs.
Steps to Connect React (or JS) Frontend with Django/Flask Backend:
Set Up the Backend (Django or Flask)
Example with Flask:
python
from flask import Flask, jsonify
from flask_cors import CORS # To handle CORS
app = Flask(__name__)
CORS(app) # Enable CORS for all routes
@app.route('/api/data')
def get_data():
return jsonify({'message': 'Hello from Flask!'})
if __name__ == '__main__':
app.run(debug=True)
Example with Django + Django REST Framework:
python
# views.py
from rest_framework.decorators import api_view
from rest_framework.response import Response
@api_view(['GET'])
def get_data(request):
return Response({'message': 'Hello from Django!'})
python
# urls.py
from django.urls import path
from .views import get_data
urlpatterns = [
path('api/data/', get_data),
]
CORS Setup in Django (settings.py):
python
INSTALLED_APPS += ['corsheaders']
MIDDLEWARE += ['corsheaders.middleware.CorsMiddleware']
CORS_ALLOW_ALL_ORIGINS = True # Or specify allowed origins
Make HTTP Requests from React or JS
Using fetch:
javascript
useEffect(() => {
fetch('http://localhost:5000/api/data') // Flask port OR Django
.then(response => response.json())
.then(data => console.log(data));
}, []);
Using axios:
javascript
import axios from 'axios';
useEffect(() => {
axios.get('http://localhost:8000/api/data/') // Django port
.then(response => {
console.log(response.data);
});
}, []);
Run Both Frontend and Backend
Run React with: npm start (usually on port 3000)
Run Flask: flask run (usually on port 5000)
Run Django: python manage.py runserver (on port 8000)
CORS (Cross-Origin Resource Sharing)
Since frontend and backend are on different ports/domains during development, CORS must be enabled in the backend to allow cross-origin requests.
In Flask: Use flask-cors (pip install flask-cors)
In Django: Use django-cors-headers (pip install django-cors-headers)
Summary:
Frontend (React/JS) Backend (Django/Flask)
Makes HTTP requests (fetch, axios) Exposes REST API endpoints
Consumes JSON data Returns JSON responses
Handles UI and user interaction Handles logic, database, and authentication
Read more
How do you secure a REST API built with Django or Flask (e.g., authentication, rate limiting)?
How do you manage database migrations in Django or Flask? What tools are commonly used?
Explain the MVC (Model-View-Controller) pattern. How is it implemented in Django?
What are Python decorators, and how are they used in a web application context?
Visit ihub Talent Institution Hyderabad
Comments
Post a Comment