15 dakikalık okuma - 28 Kasım 2025
Adım adım rehberlik ile arka uç için Django ve ön uç için React kullanarak tam yığın bir web uygulamasının nasıl oluşturulacağını öğrenin.
Güçlü bir arka uç ve dinamik bir ön uca sahip bir web uygulaması mı oluşturmak istiyorsunuz? Bir Python çerçevesi olan Django'yu bir JavaScript kütüphanesi olan React ile eşleştirmek bunu başarmak için harika bir yoldur. Django, veritabanı yönetimi ve API oluşturma gibi arka uç görevlerini yerine getirirken, React duyarlı, etkileşimli bir kullanıcı arayüzü oluşturur.
Anahtar Adımlar:
Ortamınızı Kurun:- Django için Python 3.x ve React için Node.js yükleyin.
Python --version, node --version ve npm --version ile kurulumları onaylayın.Projenizi Düzenleyin:- Django arka ucu ve React ön ucu için ayrı klasörler oluşturun.
django-admin startproject ve ön uç başlatma için npx create-react-app kullanın.Arka Ucu Oluşturun:- Django uygulamaları oluşturun, modelleri tanımlayın ve geçişler oluşturun.
django-cors-headers 'ı yapılandırın.Ön Ucu Geliştirin:- Görevleri ve kullanıcı etkileşimlerini yönetmek için React bileşenlerini kullanın.
Bağlanın ve Test Edin:- Django'yu localhost:8000 ve React'i localhost:3000 üzerinde çalıştırın.
Bu kurulum, arka uç ve ön uç arasında net bir ayrım ile tam yığın bir uygulamayı verimli bir şekilde oluşturmanıza olanak tanır. Ölçeklenebilir, etkileşimli bir web uygulaması oluşturmak için bu adımları izleyin.
Django ve React uygulamanızı oluşturmaya başlamadan önce, geliştirme ortamınızı gerekli araçlar ve bağımlılıklarla kurmanız çok önemlidir. Bu temel, ilerledikçe Django ve React bileşenlerinizi sorunsuz bir şekilde oluşturmanıza, entegre etmenize ve test etmenize yardımcı olacaktır.
Başlamak için, geliştirme makinenizin Django için Python 3.x 'e ve React için Node.js 'e ihtiyacı olacaktır. Özellikle, Django 5.0 Python 3.x gerektirirken, React Node.js sürüm 12 veya üstü ile çalışır.
Python'u Yükleme: Python'u doğrudan resmi web sitesinden indirebilir veya sisteminizin paket yöneticisini kullanabilirsiniz. MacOS kullanıcıları için Homebrew, brew install python ile bunu kolaylaştırır. Windows kullanıcıları python.org'dan yükleyiciyi almalı, Linux kullanıcıları ise Ubuntu'da apt install python3 gibi komutlarla veya diğer dağıtımlar için benzer komutlarla yükleyebilir.
Node.js ve npm Kurulumu: Node.js, npm (Node Paket Yöneticisi) ile birlikte gelir. Güvenilir bir seçim olan 7.5.4 sürümü ile npm sürüm 6 veya daha yüksek bir sürüme ihtiyacınız olacaktır. Node.js'yi nodejs.org adresinden indirin, bu otomatik olarak npm'i de içerecektir.
Python Sanal Ortamları: Sanal ortamları kullanmak, projeye özgü bağımlılıkları çakışma olmadan yönetmenin anahtarıdır. Daha fazla özellik için yerleşik venv modülünü veya pipenv veya virtualenvwrapper gibi araçları kullanabilirsiniz. Windows kullanıyorsanız, virtualenvwrapper-win paketi benzer işlevsellik sağlar.
Kurulumlarınızı onaylamak için aşağıdaki komutları terminalinizde çalıştırın:
python --version node --version npm --version
İyi organize edilmiş bir proje yapısı, arka uç ve ön uç kodunuzu ayrı ve yönetilebilir tutmak için gereklidir. Projeniz için bir ana dizin oluşturarak başlayın:
mkdir django-react-app cd django-react-app
Bu dizinin içinde iki klasör oluşturun: biri Django arka ucunuz için, diğeri React ön ucunuz için. Bu ayrım, her bir parçayı bağımsız olarak korumanıza ve dağıtmanıza olanak tanır.
Python sanal ortamınızı proje dizini içindekurun:
python -m venv venv
Sanal ortamı etkinleştirin:
source venv/bin/activatevenv\Scripts\activateBu adım, projeniz için tüm Python bağımlılıklarının izole edilmesini sağlar.
Ortamınız hazır olduğuna göre, hem Django hem de React için gerekli paketleri yükleme zamanı geldi.
Django Arka Uç Paketleri: Sanal ortamınız aktifken, pip kullanarak Django ve destekleyici kütüphanelerini yükleyin:
pip install django pip install djangorestframework pip install django-cors-headers
React Ön Uç Kurulumu: React ortamınızı kurmak için create-react-app aracını kullanın. Bu komut bir React projesini başlatır ve gerekli tüm bağımlılıkları yükler:
npx create-react-app frontend
Bu, bir ön uç dizininde, temel paketler, geliştirme araçları ve derleme komut dosyalarıyla birlikte yeni bir React projesi oluşturacaktır.
Ek Ön Uç Paketi: React projenizi kurduktan sonra frontend dizinine gidin ve Django API'nize HTTP istekleri yapmak için bir kütüphane olan Axios'u yükleyin:
cd frontend npm install axios
Bu noktada, geliştirme ortamınız Python 3.x, Django, Node.js, React ve gerekli tüm araçlarla tam olarak donatılmıştır. Python sanal ortamı, arka uç bağımlılıklarınızın izole edilmesini sağlarken, npm JavaScript paketlerinizi ayrı ayrı ele alır. Artık tam yığın uygulamanızı oluşturmaya başlamaya hazırsınız!
Veritabanı modelleri, API uç noktaları ve bir React ön ucu için entegrasyon içeren bir Django arka ucu kurun.
Ayarları, veritabanı yapılandırmalarını ve uygulamaya özel seçenekleri içeren bir Django projesi oluşturarak başlayın. Bu projenin içinde, kullanıcı verilerini veya içeriği yönetmek gibi belirli görevler için tasarlanmış bir Python paketi olan bir Django uygulaması oluşturacaksınız.
Projenizin kök dizinine gidin (sanal ortamınızın kurulduğu yer) ve Django projesini oluşturun:
django-admin startproject backend .
Bu komut, proje dosyalarını doğrudan geçerli dizinde oluşturur ve fazladan bir klasör oluşmasını önler. manage.py (Django komutlarını çalıştırmak için) gibi yeni dosyalar ve settings.py, urls. py, asgi. py ve wsgi . py gibi dosyaları içeren bir backend dizini göreceksiniz.
Ardından, belirli işlevleri yerine getirmek için bir uygulama oluşturun. Örneğin, bir görev yönetim sistemi:
python manage.py startapp tasks
Bu, models.py, views.py, admin.py gibi temel dosyaları içeren bir tasks dizini ve bir migrations klasörü oluşturur. "django" veya "test" gibi yerleşik adlarla adlandırma çakışmalarından kaçındığınızdan emin olun.
Uygulamayı backend/settings.py dosyasındaki INSTALLED_APPS listesine ekleyerek proje ayarlarınıza kaydedin:
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'tasks', # Uygulamanızı kaydedin ]
Veri yapınızı Django modelleri ile tanımlayın. Örneğin, görev yönetimi uygulaması için basit bir Task modeli tasks/models.py dosyasına eklenebilir:
from django.db import models class Task(models.Model): title = models.CharField(max_length=200) description = models.TextField(blank=True) completed = models.BooleanField(default=False) created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True) class Meta: ordering = ['-created_at'] def __str__(self): return self.title
Bu model, kısa metin için CharField, daha uzun içerik için TextField, doğru/yanlış değerler için BooleanField ve zaman damgaları için DateTimeField gibi alanlar içerir. Meta sınıfı, varsayılan sıralama gibi seçenekleri belirtir.
Migrasyonları çalıştırarak modeli veritabanınıza uygulayın:
python manage.py makemigrations tasks python manage.py migrate
Model verilerini JSON'a dönüştürmek için Django REST Framework serileştiricilerini kullanın. tasks/serializers.py dosyasında, Task modeli için bir serileştirici tanımlayın:
from rest_framework import serializers from .models import Task class TaskSerializer(serializers.ModelSerializer): class Meta: model = Task fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at'] read_only_fields = ['created_at', 'updated_at']
ModelSerializer, modele dayalı olarak alanları ve yöntemleri otomatik olarak oluşturur. Alanları açıkça listelemek, hassas verileri istemeden ifşa etmemenizi sağlar.
Django REST Framework API oluşturmayı basitleştirir. Standart CRUD işlemleri için, temiz, RESTful bir yapı için yönlendiricili ViewSets kullanın.
tasks/views.py içinde API görünümleri oluşturun:
from rest_framework import viewsets from rest_framework.permissions import AllowAny from .models import Task from .serializers import TaskSerializer class TaskViewSet(viewsets.ModelViewSet): queryset = Task.objects.all() serializer_class = TaskSerializer permission_classes = [AllowAny] # Sadece geliştirme için
ModelViewSet, görevleri listeleme, oluşturma, alma, güncelleme ve silme işlemlerini otomatik olarak gerçekleştirir.
URL yönlendirmesini tasks/urls.py dosyasında ayarlayın:
from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import TaskViewSet router = DefaultRouter() router.register(r'tasks', TaskViewSet) urlpatterns = [ path('api/', include(router.urls)), ]
Bu URL'leri ana backend/urls.py dosyasına ekleyin:
from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('tasks.urls')), ]
React ön ucunuzun (3000 numaralı bağlantı noktasında çalışan) Django arka ucuyla (8000 numaralı bağlantı noktasında) iletişim kurmasına izin vermek için, Çapraz Kaynak Paylaşımı'nı (CORS) yapılandırın. Bu olmadan, tarayıcılar güvenlik nedeniyle çapraz kaynak isteklerini engeller.
CORS yapılandırmasını eklemek için backend/settings.py dosyasını güncelleyin:
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # Bunu en üste ekleyin 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] # Geliştirme için CORS ayarları CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # React geliştirme sunucusu "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True
Hızlı test için CORS_ALLOW_ALL_ORIGINS = True kullanabilirsiniz, ancak izin verilen kökenleri belirtmek daha güvenlidir.
React ön ucunu entegre etmeden önce, beklendiği gibi çalıştıklarından emin olmak için API uç noktalarını test edin. Django geliştirme sunucusunu başlatın:
python manage.py runserver
API' ye http://127.0.0.1:8000/api/tasks/ adresinden erişin. GET ve POST istekleri gibi işlemleri test etmek için göz atılabilir API'yi kullanın.
Alternatif olarak, cURL veya Postman ile test edin:
# Görevleri listelemek için GET isteğini test edin curl -X GET http://127.0.0.1:8000/api/tasks/ # Bir görev oluşturmak için POST isteğini test edin curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "Test Görevi", "açıklama": "Bu bir test görevidir"}'
Otomatik test için tasks/tests.py dosyasına test senaryoları ekleyin:
from rest_framework.test import APITestCase from rest_framework import status from .models import Task class TaskAPITestCase(APITestCase): def test_create_task(self): # İddialarınızı ve test mantığınızı buraya ekleyin pass
Arka uç yerindeyken, onu React ön ucuna bağlamaya hazırsınız.
Django arka ucunuz için ilgi çekici bir arayüz oluşturmak amacıyla, görevleri görüntülemekten yenilerini eklemeye kadar her türlü kullanıcı etkileşimini yönetmek için React'i kullanacaksınız.
Create React App'i kullanarak React ön ucunuzu kurarak başlayın. Projenizin kök dizinine gidin (Django arka ucunuzun bulunduğu yer) ve çalıştırın:
npx create-react-app frontend cd frontend
Bu komut package.json, src/App.js ve public/index.html gibi temel dosyaları içeren bir React uygulaması kurar. Ayrıca paketleme için webpack, JavaScript derlemesi için Babel ve test için bir geliştirme sunucusu gibi araçlar da içerir.
Ardından, Django API'nize gelen HTTP isteklerini işlemek için Axios'u yükleyin:
npm install axios
Axios, JSON ayrıştırmayı yöneterek ve yerleşik fetch() işlevinden daha iyi hata işleme sunarak API çağrılarını daha basit hale getirir. Ayrıca istek ve yanıt önleyicileri gibi özellikleri de destekler.
Klasör yapınız şimdi aşağıdaki gibi görünmelidir:
project-root/ ├── backend/ │ ├── manage.py │ ├── backend/ │ └─ tasks/ └─ frontend/ ├── package.json ├── public/ └─ src/
Her şeyin çalıştığını onaylamak için React geliştirme sunucusunu başlatın:
npm start
Bu, uygulamayı http://localhost:3000 adresinde başlatır ve varsayılan React karşılama sayfasını görüntüler. Geliştirme sırasında bu sunucuyu çalışır durumda tutun - değişiklik yaptığınızda otomatik olarak yeniden yüklenir.
Django API'nizden alınan görevleri görüntülemek için bir TaskList bileşeni oluşturalım. Aşağıdakileri src/components/TaskList.js dosyasına ekleyin:
import React from 'react'; const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => { return ( <div className="task-list"> <h2>Görevleriniz</h2> {tasks.length === 0 ? ( <p>Mevcut görev yok. İlk görevinizi oluşturun!</p> ) : ( <ul> {tasks.map((task) => ( <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}> <div className="task-content"> <h3>{task.title}</h3> <p>{task.description}</p> <small>Created: {new Date(task.created_at).toLocaleDateString()}</small> </div> <div className="task-actions"> <button onClick={() => onToggleComplete(task.id, !task.completed)} className={task.completed ? 'btn-undo' : 'btn-complete'} > {task.completed ? 'Undo' : 'Complete'} </button> <button onClick={() => onDeleteTask(task.id)} className="btn-delete" > Delete </button> </div> </li> ))} </ul> )} </div> ); }; export default TaskList;
Ardından, yeni görevler eklemek için bir TaskForm bileşeni oluşturun. Bunu src/components/TaskForm.js dosyasına ekleyin:
import React, { useState } from 'react'; const TaskForm = ({ onAddTask }) => { const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); if (!title.trim()) return; setIsSubmitting(true); try { await onAddTask({ title: title.trim(), description: description.trim() }); setTitle(''); setDescription(''); } catch (error) { console.error('Görev eklenirken hata oluştu:', error); } finally { setIsSubmitting(false); } }; return ( <form onSubmit={handleSubmit} className="task-form"> <h2>Add New Task</h2> <div className="form-group"> <input type="text" placeholder="Task title" value={title} onChange={(e) => setTitle(e.target.value)} disabled={isSubmitting} required /> </div> <div className="form-group"> <textarea placeholder="Görev açıklaması (isteğe bağlı)" value={description} onChange={(e) => setDescription(e.target.value)} disabled={isSubmitting} rows="3" /> </div> <button type="submit" disabled={isSubmitting || !title.trim()}> {isSubmitting ? 'Adding...' : 'Add Task'} </button> </form> ); }; export default TaskForm;
Temel stil için bir src/App.css dosyası oluşturun ve ekleyin:
.task-list { margin: 20px 0; } .task-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; kenarlık: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px; } .task-item.completed { background-color: #f0f8f0; text-decoration: line-through; opacity: 0.7; } .task-form { background: #f9f9f9; padding: 20px; border-radius: 5px; margin-bottom: 20px; } .form-group { margin-bottom: 15px; } .form-group input, .form-group textarea { width: 100%; padding: 10px; kenarlık: 1px solid #ddd; border-radius: 3px; } .btn-complete, .btn-undo, .btn-delete { margin-left: 10px; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; } .btn-complete { background: #28a745; color: white; } .btn-undo { background: #ffc107; renk: siyah; } .btn-delete { arka plan: #dc3545; color: white; }
useState ve useEffect gibi React kancaları, durum yönetimini ve Django arka ucunuzla etkileşimi kolaylaştırır. API çağrılarını merkezileştirmek için bir servis dosyası src/services/api.js oluşturun:
import axios from 'axios'; const API_BASE_URL = 'http://127.0.0.1:8000/api'; const api = axios.create({ baseURL: API_BASE_URL, headers: { 'Content-Type': 'application/json', }, }); export const taskAPI = { getTasks: () => api.get('/tasks/'), createTask: (taskData) => api.post('/tasks/', taskData), updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData), deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`), }; export default api;
Son olarak, her şeyi src/App.js dosyasına entegre edin:
import React, { useState, useEffect } from 'react'; import TaskList from './components/TaskList'; import TaskForm from './components/TaskForm'; import { taskAPI } from './services/api'; import './App.css'; function App() { const [tasks, setTasks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchTasks(); }, []); const fetchTasks = async () => { try { setLoading(true); const response = await taskAPI.getTasks(); setTasks(response.data); } catch (err) { setError(err); } finally { setLoading(false); } }; // Görev ekleme, güncelleme ve silme için ek yöntemler buraya gider }
Bu kurulumla, React ön ucunuz Django arka ucunuzla sorunsuz bir şekilde iletişim kurarken görevleri etkileşimli olarak ele almaya hazırdır.
Yavaş dağıtımlardan veya bant genişliği sınırlarından bıktınız mı? FDC Sunucuları anında tahsis edilmiş güç, küresel erişim ve her ölçek için oluşturulmuş esnek planlar sunar. Yükseltmeye hazır mısınız?
Performansın Kilidini Şimdi AçınArtık arka ucunuz ve ön ucunuz hazır ve çalışır durumda olduğuna göre, bir sonraki adım aralarında sorunsuz iletişim sağlamaktır. Bu, API uç noktalarını ayarlamayı, istekleri yönetmeyi ve herhangi bir entegrasyon sorununu ele almayı içerir.
React uygulamanızın Django API uç noktalarını nerede bulacağını bilmesi gerekir. Bunu başarmak için, src/services/api.js dosyasını ortama özgü yapılandırmalarla güncelleyin:
import axios from 'axios'; // Ortama göre API taban URL'sini belirleyin const getApiBaseUrl = () => { if (process.env.NODE_ENV === 'production') { return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api'; } return 'http://127.0.0.1:8000/api'; }; const API_BASE_URL = getApiBaseUrl(); const api = axios.create({ baseURL: API_BASE_URL, headers: { 'Content-Type': 'application/json', }, timeout: 10000, // 10 saniye zaman aşımı }); export const taskAPI = { getTasks: () => api.get('/tasks/'), createTask: (taskData) => api.post('/tasks/', taskData), updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData), deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`), }; export default api;
Üretim için, React proje kökünüze aşağıdaki içeriğe sahip bir .env dosyası ekleyin:
REACT_APP_API_URL=https://your-production-domain.com/api
Bu kurulum, ister yerel bir geliştirme ortamında ister üretime dağıtıyor olun, React uygulamanızın Django arka ucunuzla sorunsuz bir şekilde etkileşime girmesini sağlar. API uç noktaları yapılandırıldığında, arka uç verilerini almaya ve değiştirmeye hazırsınız demektir.
API yapılandırması ayarlandıktan sonra, React ve Django arasında veri yönetmek için CRUD işlemleri gerçekleştirebilirsiniz. Bu işlemleri gerçekleştirmek için src/App.js dosyasını güncelleyin:
import React, { useState, useEffect } from 'react'; import TaskList from './components/TaskList'; import TaskForm from './components/TaskForm'; import { taskAPI } from './services/api'; import './App.css'; function App() { const [tasks, setTasks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchTasks(); }, []); const fetchTasks = async () => { try { setLoading(true); setError(null); const response = await taskAPI.getTasks(); setTasks(response.data); } catch (err) { setError('Failed to fetch tasks. Please check your connection.'); console.error('Error fetching tasks:', err); } finally { setLoading(false); } }; const handleAddTask = async (taskData) => { try { const response = await taskAPI.createTask(taskData); setTasks(prevTasks => [...prevTasks, response.data]); } catch (err) { console.error('Error adding task:', err); throw err; // Re-throw to let TaskForm handle the error } }; const handleToggleComplete = async (taskId, completed) => { try { const taskToUpdate = tasks.find(task => task.id === taskId); const updatedTaskData = { ...taskToUpdate, completed }; const response = await taskAPI.updateTask(taskId, updatedTaskData); setTasks(prevTasks => prevTasks.map(task => task.id === taskId ? response.data : task ) ); } catch (err) { console.error('Görev güncellemede hata:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('Bu görevi silmek istediğinizden emin misiniz?')) { return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId)); } catch (err) { console.error('Error deleting task:', err); } }; if (loading) { return <div className="loading">Loading tasks...</div>; } return ( <div className="App"> <header className="App-header"> <h1>Görev Yöneticisi</h1> </header> <main className="container"> {error && <div className="error-message">{error}</div>} <TaskForm onAddTask={handleAddTask} /> <TaskList tasks={tasks} onToggleComplete={handleToggleComplete} onDeleteTask={handleDeleteTask} /> </main> </div> ); } export default App;
Bu kod görev oluşturma, güncelleme, silme ve hata yönetimi işlemlerini gerçekleştirir. Sorunsuz bir kullanıcı deneyimi için kullanıcı arayüzü anında güncellenir ve hatalar, değişiklikleri geri alarak veya uygun mesajları göstererek zarif bir şekilde yönetilir.
Django ve React'i birbirine bağlarken karşılaşılan en yaygın engellerden biri CORS (Cross-Origin Resource Sharing) hatalarıdır. Bunlar, tarayıcıların güvenlik nedeniyle farklı kökenler arasındaki istekleri engellemesi nedeniyle ortaya çıkar. Geliştirme sırasında, React genellikle localhost:3000 üzerinde çalışırken, Django localhost:8000 üzerinde çalışarak bir çapraz kaynak senaryosu oluşturur.
CORS sorunlarını gidermek için, Django ayarlarınızdaki CORS başlıklarını "CORS Başlıklarını Yapılandırma" bölümünde belirtildiği gibi yapılandırdığınızdan emin olun. Değişiklikleri yaptıktan sonra, uygulamak için Django sunucunuzu yeniden başlatın.
İşte birkaç yaygın API istek hatası ve çözümleri:
sahip alanı eksik olduğu için 400 hatasıyla karşılaştı. Ön ucunuzun Django modelleri tarafından beklenen tüm gerekli alanları gönderdiğini her zaman iki kez kontrol edin.generics .RetrieveUpdateAPIView 'den generics . RetrieveUpdateDestroyAPIView 'e güncellenerek DELETE istekleri için destek eklenmesiyle çözüldü.Django arka ucunuz ve React ön ucunuz bağlıyken, her iki geliştirme sunucusunu da başlatma ve uygulamayı test etme zamanı geldi. Bu, iki sunucuyu aynı anda çalıştırmayı ve her şeyin birlikte sorunsuz çalışmasını sağlamayı içerir.
Django-React uygulamanızı çalıştırmak için, her sunucu için bir tane olmak üzere iki terminal penceresine ihtiyacınız olacaktır. Bu kurulum, API çağrıları aracılığıyla iletişim kurarken arka uç ve ön ucun bağımsız olarak çalışmasına olanak tanır.
Django Arka Uç Sunucusunu Başlatma:
İlk terminal penceresini açın ve Django projenizin kök dizinine gidin.
Python sanal ortamınızı etkinleştirin:
source venv/bin/activate
Django geliştirme sunucusunu başlatın:
python manage.py runserver
Sunucu http://127.0.0.1:8000/ adresinde kullanılabilir olacaktır.
React Frontend Sunucusunu başlatma:
İkinci bir terminal penceresi açın ve React proje dizininize gidin:
cd frontend
React geliştirme sunucusunu başlatın:
npm start
Bu işlem otomatik olarak http://localhost:3000/ adresinde bir tarayıcı penceresi açacaktır.
Her iki sunucu da çalıştıktan sonra, uygulamanızın işlevselliğini test etmeye başlayabilirsiniz.
Sunucular hazır ve çalışır durumdayken, CORS ve API uç noktaları düzgün bir şekilde yapılandırılmışken, ön uç ve arka uç arasındaki veri akışını doğrulama zamanı gelmiştir.
Arka Uç API Doğrulaması:
Django API uç noktalarınızı doğrudan ziyaret ederek test edin:
http://localhost:8000/api/tasks
Bu, Django REST Framework'ün CREATE ve READ işlemlerini gerçekleştirebileceğiniz göz atılabilir API arayüzünü göstermelidir.
Django yönetici arayüzüne şu adresten erişin:
http://localhost:8000/admin
Görev oluşturmak, düzenlemek veya silmek için süper kullanıcı kimlik bilgilerinizle oturum açın. UPDATE ve DELETE işlemlerini ziyaret ederek de test edebilirsiniz:
http://localhost:8000/api/tasks/{id}
Ön Uç-Arka Uç Entegrasyon Testi:
http://localhost:3000 adresinde açın ve Django arka ucundan gelen görevleri görüntüleyerek doğru yüklendiğini onaylayın.Uygulamanız filtreler veya başka özellikler içeriyorsa, görevlerin beklendiği gibi görüntülendiğini doğrulamak için bunları iyice test edin.
Test sırasında herhangi bir sorunla karşılaşırsanız, deneyebileceğiniz bazı yaygın düzeltmeler aşağıda verilmiştir.
API Bağlantı Hataları:
Her iki sunucunun da kendi portlarında çalıştığından emin olun: http://localhost:8000 adresinde Django ve http://localhost:3000 adresinde React.
404 veya 500 gibi HTTP durum kodlarını tanımlamak için tarayıcı geliştirici araçlarını (ağ sekmesi) kullanın.
React projenizin package.json dosyasındaki proxy ayarını kontrol edin:
"proxy": "http://localhost:8000"
Değişiklik yaparsanız, React sunucusunu yeniden başlatın.
Sunucu Başlatma Sorunları:
Django sunucusu başlamazsa, eksik geçişler olup olmadığını kontrol edin:
python manage.py makemigrations python manage.py migrate
React sunucu sorunları için bağımlılıkları yeniden yüklemeyi deneyin:
npm install
Veri Akışı Sorunları:
console.log() veya Django görünümlerinde print deyimleri gibi hata ayıklama deyimleri ekleyin./api/tasks/).Django ve React'i birleştiren bir web uygulaması oluşturarak tam yığın geliştirmeye sağlam bir giriş yaptınız. Bu proje, arka ucu ön uçtan ayırmak, CRUD işlemleri gerçekleştirmek ve CORS ayarlarını kullanarak çapraz kaynaklı istekleri yönetmek gibi temel kavramları vurgulamaktadır. Yol boyunca, API'ler oluşturmak için Django REST Framework ile çalıştınız ve durum yönetimi için React kancalarını kullandınız - bu iki güçlü araç arasında sorunsuz entegrasyon sağlayan beceriler.
Uygulamanızı Bir Sonraki Seviyeye Taşımak
Uygulamanızın işlevselliğini genişletmek için bolca alan var. Örneğin, kullanıcı verilerini ve API erişimini güvence altına almak için Django REST Framework kullanarak JWT kimlik doğrul aması ekleyebilirsiniz. Bu sayede kullanıcıya özel özellikler ve kişiselleştirilmiş deneyimler sunabilirsiniz.
Uygulamanızın gerçek zamanlı güncellemelere ihtiyacı varsa, WebSocket desteğini etkinleştirmek için Django Channels 'ı kullanmayı düşünün. Bu, canlı gösterge tabloları, sohbet sistemleri veya bildirimler gibi özellikler için mükemmeldir ve uygulamanızı daha dinamik ve etkileşimli bir platforma dönüştürür.
Uygulamanız büyüdükçe, gelişmiş veri görselleştirme önemli hale gelir. React'in render yeteneklerini verimli arka uç veri getirme ile birleştirerek karmaşık veri kümelerini etkili bir şekilde işleyebilir ve görüntüleyebilirsiniz.
Üretime Hazırlanmak
Uygulamanızı üretim için hazırlarken dağıtım, güvenlik ve performans konularına odaklanın. Mevcut kurulum yerel geliştirme için harika olsa da, üretim ortamları ekstra adımlar gerektirir. Bunlar arasında ortam değişkenlerini ayarlamak, veritabanınızı optimize etmek ve güçlü hata işleme mekanizmaları uygulamak yer alır.
Bu iyileştirmeler, API tasarımı, bileşen tabanlı mimari ve tam yığın entegrasyonu gibi halihazırda geliştirdiğiniz beceriler üzerine inşa edilir. Bu gelişmiş tekniklerde ustalaşarak, kurumsal düzeydeki projelerin üstesinden gelmek ve bir web geliştiricisi olarak büyümeye devam etmek için iyi bir donanıma sahip olacaksınız.
Arka uç için Django ve ön uç için React kullanmak, modern web uygulamaları geliştirmek için güçlü bir karışım oluşturur. Django, arka uç geliştirmeyi kolaylaştıran araçlarla dolu sağlam bir çerçeve sağlarken, React dinamik ve etkileşimli kullanıcı arayüzleri oluşturmada parlıyor.
Bu kombinasyon, kod tabanının düzenli kalmasına ve zaman içinde genişletilmesinin daha kolay olmasına yardımcı olan sorumlulukların temiz bir şekilde ayrılmasını teşvik eder. React'in bileşen tabanlı yapısı kullanıcı arayüzü öğelerinin yeniden kullanımını teşvik ederken, Django'nun REST Framework'ü API oluşturma sürecini basitleştirerek ön uç ve arka uç arasında sorunsuz iletişim sağlar. Birlikte, uygulama geliştirmeye yönelik hızlı, verimli ve kullanıcı merkezli bir yaklaşım sunarlar.
Bir React ön ucu ile bir Django arka ucu arasındaki CORS sorunlarını çözmek için django-cors-headers paketi kullanışlı bir çözümdür. İlk olarak, pip kullanarak yükleyin. Ardından, settings.py dosyanızda INSTALLED_APPS listesine 'corsheaders' ekleyin. Bundan sonra, uygun ara yazılım yürütme sırasını sağlamak için MIDDLEWARE listesinin en üstüne 'corsheaders.middleware.CorsMiddleware' ekleyin.
Geliştirme sırasında, settings.py dosyanızda CORS_ORIGIN_ALLOW_ALL = True ayarını yaparak işleri basitleştirebilirsiniz. Bu, herhangi bir kaynaktan gelen isteklere izin verir. Ancak, üretim ortamında CORS_ALLOWED_ORIGINS ayarını kullanarak belirli güvenilir etki alanlarını tanımlamak çok daha güvenlidir. Bu yaklaşım, daha sıkı güvenlik sağlamaya yardımcı olur.
Bu yapılandırma ile React uygulamanız, CORS gereksinimleriyle uyumlu kalırken Django API'lerinizle sorunsuz bir şekilde etkileşime girebilir.
Django ve React uygulamanızı üretime hazırlamak için, Django ayarlarınızı güvenli bir kurulum için ayarlayarak başlayın. Bu, DEBUG 'ı False olarak ayarlamayı ve uygulamanıza hangi alan adlarının erişebileceğini kontrol etmek için ALLOWED_HOSTS 'u belirtmeyi içerir. Bu değişiklikler uygulamanızı canlı bir ortamda korumak için gereklidir.
Ardından, Django arka ucunuz ve statik dosyalarınız için güvenilir bir barındırma platformu seçin. Altyapınızın üretim seviyesindeki trafiği ve talepleri karşılayacak şekilde inşa edildiğinden emin olun. React ön ucu için, optimize edilmiş bir üretim derlemesi oluşturmak üzere uygun derleme araçlarını kullanın.
React uygulamanız hazır olduğunda, hem React ön ucuna hem de Django arka ucuna hizmet vermek için Nginx gibi bir web sunucusu kurun. Doğru sunucu yapılandırması, uygulamanızın verimli bir şekilde çalışmasını ve kullanıcılar için sorunsuz bir deneyim sunmasını sağlar.
Canlı yayına geçmeden önce uygulamanızı üretim ortamında kapsamlı bir şekilde test edin. Bu adım, tüm sorunların belirlenmesine ve çözülmesine yardımcı olarak uygulamanızın başlatıldıktan sonra güvenilir bir şekilde çalışmasını sağlar.
Yapay zeka, otomasyon ve gerçek zamanlı analitiğe odaklanarak 2025 yılında özel sunucular ve VPS için en iyi izleme araçlarını keşfedin.
12 dakikalık okuma - 28 Kasım 2025
10 dakikalık okuma - 15 Ekim 2025
Esnek seçenekler
Küresel erişim
Anında dağıtım
Esnek seçenekler
Küresel erişim
Anında dağıtım