Django ve React ile Fullstack Uygulama

Django ve React ile Fullstack Uygulama

Bu yazıda Django ve React kullanarak hem backend hem frontend için çalışan bir fullstack uygulama geliştirme adımlarını göreceğiz.

  • Django: Python tabanlı, açık kaynak kodlu, Model-Template-View (MTV) mimarisini temel alan güçlü bir web framework’tür.
  • React: Kullanıcı arayüzlerini component bazlı olarak oluşturmamıza olanak sağlayan popüler bir JavaScript kütüphanesidir.

Kurulum

İlk olarak bir Django projesi oluşturuyoruz. Ardından proje dizininde frontend için ayrı bir klasör oluşturacağız. Bu şekilde Node js. dosyaları ve Django dosyaları birbirine karışmayacak proje daha düzenli görünecek.

npx create-react-app frontend
cd frontend
npm start

Komutları çalıştırdıktan sonra React uygulaması otomatik olarak http://localhost:3000/ adresinde açılacaktır.

Django ve React Kullanma Amacımız?

  • Django → Backend tarafında güçlüdür. API oluşturma, veritabanı işlemleri, güvenlik, kimlik doğrulama, ORM gibi konularda hızlı çözüm sağlar.
  • React → Frontend tarafında güçlüdür. Kullanıcı arayüzünü çok hızlı ve dinamik hale getirir, component tabanlı yapısı ile modern bir deneyim sunar.

Bu yüzden Django “arka planda” veri ve iş mantığını yönetirken, React “ön yüzde” kullanıcı deneyimini geliştirmek için kullanılır.

Artıları

  1. Ayrık ama uyumlu mimari
    • Django → REST API / GraphQL ile veri sağlar.
    • React → Bu verileri çeker ve kullanıcıya gösterir.
    • Böylece frontend ve backend birbirinden bağımsız geliştirilip ölçeklenebilir.
  2. Modern ve güçlü frontend
    • React ile SPA (Single Page Application) yapılabilir → sayfa yenilenmeden hızlı etkileşim.
    • UI kütüphaneleri (Material UI, Ant Design) kolay entegre edilir.
  3. Hızlı backend geliştirme
    • Django’nun “batteries included” yaklaşımı sayesinde kullanıcı yönetimi, admin panel, ORM gibi özellikler hazır gelir.
    • Bu da backend geliştirmeyi çok hızlandırır.
  4. Performans & Kullanıcı Deneyimi
    • React’in sanal DOM yapısı → hızlı UI güncellemeleri.
    • Django’nun cache, query optimizasyonları → backend performansını artırır.
  5. Esneklik ve Ölçeklenebilirlik
    • Frontend ve backend ayrı sunucularda çalışabilir.
    • Mikroservis veya container (Docker, Kubernetes) yapıları için uygundur.
  6. Geniş topluluk ve kaynak
    • Django: Python ekosisteminin gücü.
    • React: JavaScript ekosisteminin gücü.
    • İkisini birleştirmek → bolca eğitim kaynağı, paket ve destek bulmak kolaydır.

Django ve React’i Birlikte Çalıştırmak

1. CORS Ayarları

React ile Django arasında iletişim kurabilmek için Django tarafında CORS ayarlarını yapmamız gerekir. Bunun için:

pip install django-cors-headers settings.py içerisine ekleyelim:

INSTALLED_APPS = [
    ...
    'corsheaders',
]
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
]
CORS_ALLOW_ALL_ORIGINS = True

2. Proxy Ayarı

React tarafında her API çağrısında http://127.0.0.1:8000 yazmak yerine  package.json dosyasına şu satırı ekleyebiliriz:

"proxy": "http://127.0.0.1:8000"

3. Üretime Hazırlık

React tarafını deploy etmek için şu komutu çalıştırıyoruz: npm run build

Bu işlem ile React projesi statik dosyalar haline gelir ve Django üzerinden servis edilebilir.

React ile Temel Bilgiler

1. Fonksiyonel Bileşen Nedir?

React’te iki tür bileşen vardır: Sınıf bileşenler ve Fonksiyonel bileşenler.
Modern React’te hook’lar sayesinde fonksiyonel bileşenler sınıf bileşenlerinin yaptığı her şeyi yapabilir.

function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

2. useState Hook’u (State Yönetimi)

Bir component içerisinde state yönetmek için useState hook’u kullanılır: const [books, setBooks] = useState([]);

3. useEffect Hook’u (Yan Etkiler)

useEffect component render olduktan sonra çalışır. Veri çekme, event listener ekleme gibi işlemler için kullanılır.

useEffect(() => {
  
setBooks([
  
  { name: "Otostopçunun Galaksi Rehberi", author: "Douglas Adams", description: "Lorem ipsum" },
    { name: "Hikayeler", author: "Edgar Allan Poe", description: "Lorem ipsum sit amet" }
  ]);
}, []);

State’e eklenen bu kitapları JSX içerisinde map ile ekrana basabiliriz:

books.map((book, index) => (
  <div key={index} className="book-item">  
  <h2>{book.name}</h2>  
  <p>{book.author}</p>  
  <p>{book.description}</p>  </div> ));

Django REST API’den Veri Çekmek

Django REST Framework ile oluşturduğumuz bir API’den veri çekmek için fetch veya axios kullanabiliriz.

Fetch Örneği

useEffect(() => {
  
	async function fetchBooks() {
    
		const res = await fetch("http://127.0.0.1:8000/books/");
    
		res.json()
      
		.then(res => setBooks(res))
      
		.catch(err => console.error(err));
  
	}
  
fetchBooks();
}, []);

Axios ile Kullanım

 Fetch API kullanılabileceği gibi Axios kütüphanesi de tercih edilebilir. Axios daha okunabilir bir sözdizimine sahiptir, otomatik JSON dönüşümü yapar ve hata yakalama mekanizması daha basittir. Ayrıca request ve response interceptor gibi gelişmiş özellikler sunar.

npm install axios

Örnek GET isteği:

useEffect(() => {
  axios.get("http://127.0.0.1:8000/books/")    
.then(res => setBooks(res.data))   
 .catch(err => console.error(err));
 },
 []);

Form Oluşturma ve POST İsteği

Bir form aracılığıyla kullanıcıdan veri alıp Django’ya gönderebiliriz.

import React, { useState } from "react";
import axios from "axios";
function BookForm() {  
const [name, setName] = useState(""); 
const [author, setAuthor] = useState(""); 
const [description, setDescription] = useState("");
const handleSubmit = async (e) => {
     e.preventDefault();  
try {     
      const res = await axios.post("http://127.0.0.1:8000/books/",
 {        name,        author,        description      });      
console.log("Kitap kaydedildi:", res.data);
} catch (err) {   
   console.error("Hata:", err);  
}  };  
return (  
 <form onSubmit={handleSubmit}>     
      <input type="text" placeholder="Kitap adı" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="text" placeholder="Yazar" value={author} onChange={(e) => setAuthor(e.target.value)} />     
      <textarea placeholder="Açıklama" value={description} onChange={(e) => setDescription(e.target.value)} />  
      <button type="submit">Kaydet</button>  
 </form>  );
  } 
export default BookForm;

Django REST Framework Tarafı

Model

 Django’da Model veritabanındaki tabloları temsil eder. Her model bir tabloya, her alan (field) ise bir sütuna karşılık gelir

from django.db import models class Book(models.Model):  
  name = models.CharField(max_length=200)  
  author = models.CharField(max_length=200)   
 description = models.TextField()   
 def __str__(self):    
    return self.name

Serializer

 Serializer , Django model verilerini JSON formatına dönüştürür ve aynı zamanda gelen JSON verilerini model nesnelerine çevirmemizi sağlar. Yani API ile React arasındaki veri alışverişini kolaylaştırır.

from rest_framework import serializers
from .models import Book class BookSerializer(serializers.ModelSerializer):
   class Meta:
       model = Book 
        fields = '__all__'

ViewSet

ViewSet, Django REST Framework’te CRUD (Create, Read, Update, Delete) işlemlerini kolayca tanımlamamıza olanak tanır. ModelViewSet kullandığımızda tüm temel işlemler (GET, POST, PUT, DELETE) otomatik olarak sağlanır.

from rest_framework import viewsets 
from .models import Book 
from .serializers import BookSerializer
class BookViewSet(viewsets.ModelViewSet):   
    queryset = Book.objects.all()    
    serializer_class = BookSerializer

URL’ler

 Django’da URL’ler  hangi isteğin hangi view’e yönlendirileceğini belirler. Router kullanarak ViewSet’i kolayca URL’ye bağlayabiliriz.

from django.urls import path, include
from rest_framework.routers import DefaultRouter from .views import 
BookViewSet router = DefaultRouter() 
router.register(r'books', BookViewSet) 
urlpatterns = [    path('', include(router.urls)), ]

Artık http://127.0.0.1:8000/books/ adresi üzerinden GET ve POST işlemleri yapılabilir.

Sonuç

Bu yazıda şunları öğrendik:

  1. Django ve React projelerini ayrı klasörlerde kurduk,
  2. CORS ve proxy ayarları ile iki tarafı konuşturduk,
  3. React’te useState ve useEffect hook’larını kullandık,
  4. Fetch ve Axios ile Django API’sinden veri çektik,
  5. Form aracılığıyla kullanıcıdan veri alıp Django veritabanına kaydettik.

Kaynakça

Şevval İşlekter
Şevval İşlekter • 5 Eylül 2025 10:18

Benzer Yazılar