Django ve React ile basit bir uygulama nasıl oluşturulur?

Django ve React ile basit bir uygulama nasıl oluşturulur

Güçlü bir arka uç ve dinamik bir ön uca sahip bir web uygulaması mı oluşturmak istiyorsunuz? Python çerçevesi olan Django'yu JavaScript kütüphanesi olan React ile birleştirmek, bunu başarmak için harika bir yoldur. Django, veritabanı yönetimi ve API oluşturma gibi arka uç görevlerini üstlenirken, React ise duyarlı ve etkileşimli bir kullanıcı arayüzü oluşturur.

Önemli Adımlar:

1. Ortamınızı Kurun:
   • Django için Python 3.x'i, React için Node.js'yi yükleyin.
   • Python bağımlılıklarını yönetmek için sanal ortamlar kullanın.
   • Kurulumları python --version, node --versionve npm --version.
2. Projenizi Düzenleyin:
   • Django arka ucu ve React ön ucu için ayrı klasörler oluşturun.
   • Arka uç kurulumunda django-admin startproject 'yi arka uç kurulumu için ve npx create-react-app ön uç başlatma için kullanın.
3. Arka Ucu Oluşturun:
   • Django uygulamaları oluşturun, modelleri tanımlayın ve göçleri oluşturun.
   • API uç noktalarını oluşturmak için Django REST Framework'ü kullanın.
   • Ön uç ile arka uç arasındaki iletişimi sağlamak için django-cors-headers ön uç ile arka uç arasındaki iletişimi etkinleştirin.
4. Ön Ucu Geliştirme:
   • Görevleri ve kullanıcı etkileşimlerini yönetmek için React bileşenlerini kullanın.
   • API istekleri için Axios'u yükleyin ve Django uç noktalarıyla entegre edin.
   • Temiz bir kullanıcı arayüzü için uygulamayı CSS ile şekillendirin.
5. Bağlantı Kurma ve Test Etme:
   • Django'yu localhost:8000 ve React'ı localhost:3000.
   • API uç noktalarını Postman gibi araçlarla veya doğrudan tarayıcıda test edin.
   • Sorunsuz iletişim için doğru CORS ayarlarından emin olun.

Bu kurulum, arka uç ile ön uç arasında net bir ayrım yaparak tam yığınlı bir uygulamayı verimli bir şekilde geliştirmenize olanak tanır. Ölçeklenebilir, etkileşimli bir web uygulaması oluşturmak için aşağıdaki adımları izleyin.

Yeni Başlayanlar İçin Django ve React Projesi - Tam Yığın Not Uygulaması Oluşturma

Kurulum Gereksinimleri ve Yükleme

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.

Sistem Gereksinimleri ve Araçlar

Başlamak için, geliştirme makinenizde Django için Python 3.x ve React için Node.js bulunmalıdır. Özellikle, Django 5.0 Python 3.x gerektirirken, React ise 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. Windows kullanıcıları python.org adresinden yükleyiciyi indirmelidir; Linux kullanıcıları ise apt install python3 komutuyla yükleyebilir; diğer dağıtımlar için de benzer komutlar kullanılabilir.

Node.js ve npm'yi Kurma: Node.js, npm (Node Paket Yöneticisi) ile birlikte gelir. npm sürüm 6 veya üstüne ihtiyacınız olacak; sürüm 7.5.4 güvenilir bir seçimdir. Node.js'yi nodejs.org adresinden indirin; bu, npm'yi otomatik olarak içerecektir.

Python Sanal Ortamları: Sanal ortamları kullanmak, projeye özgü bağımlılıkları çakışma olmadan yönetmenin anahtarıdır. Yerleşik venv modülünü veya pipenv veya virtualenvwrapper gibi araçları kullanabilirsiniz. Windows kullanıyorsanız, virtualenvwrapper-win paketi benzer işlevler sunar.

Yüklemelerinizi doğrulamak için terminalinizde şu komutları çalıştırın:

python --version
node --version
npm --version

Proje Yapısını Oluşturma

Arka uç ve ön uç kodlarınızı ayrı tutmak ve yönetilebilir kılmak için iyi organize edilmiş bir proje yapısı şarttır. 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 yönetmenize ve dağıtmanıza olanak tanır.

Proje dizini içinde Python sanal ortamınızı kurun:

python -m venv venv

Sanal ortamı etkinleştirin:

• macOS/Linux'ta: source venv/bin/activate
• Windows'ta: venv\Scripts\activate

Bu adım, projeniz için gerekli tüm Python bağımlılıklarının izole edilmesini sağlar.

Gerekli Paketlerin Yüklenmesi

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'yu ve destekleyici kütüphanelerini yükleyin:

pip install django
pip install djangorestframework
pip install django-cors-headers

• Django, sunucu tarafı mantığını, veritabanı yönetimini ve URL yönlendirmesini yönetir.
• Django REST Framework, RESTful API'leri oluşturma sürecini basitleştirir ve React ön ucunuz için uç noktalar oluşturmayı kolaylaştırır.
• Django-cors-headers, React ön ucunuz (3000 numaralı bağlantı noktasında çalışır) ile Django arka ucunuz (8000 numaralı bağlantı noktasında çalışır) arasındaki iletişim için gerekli olan Kaynaklar Arası Paylaşım (CORS) özelliğini etkinleştirir.

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 komut, gerekli paketler, geliştirme araçları ve derleme komut dosyalarıyla birlikte frontend dizinde, gerekli 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 dizine gidin ve Django API'nize HTTP istekleri göndermek için kullanılan Axios kütüphanesini 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ış durumdadır. Python sanal ortamı, arka uç bağımlılıklarınızın izole edilmesini sağlarken, npm ise JavaScript paketlerinizi ayrı olarak yönetir. Artık tam yığın uygulamanızı oluşturmaya hazırsınız!

Django ile Arka Uç Oluşturma

Veritabanı modelleri, API uç noktaları ve React ön ucu entegrasyonu içeren bir Django arka ucu kurun.

Django Projesi ve Uygulaması Oluşturma

Ayarlar, veritabanı yapılandırmaları ve uygulamaya özgü seçenekleri içeren bir Django projesi oluşturarak başlayın. Bu proje içinde, kullanıcı verilerini veya içeriği yönetmek gibi belirli görevler için tasarlanmış bir Python paketi olan Django uygulamasını oluşturacaksınız.

Projenizin kök dizinine (sanal ortamınızın kurulduğu yere) gidin ve Django projesini oluşturun:

django-admin startproject backend .

Bu komut, ek bir klasör oluşturmaya gerek kalmadan proje dosyalarını doğrudan geçerli dizinde oluşturur. manage.py (Django komutlarını çalıştırmak için) ve backend şu tür dosyaları içeren bir dizin settings.py, urls.py, asgi.pygibi dosyaları içeren bir wsgi.py.

Ardından, belirli işlevleri yerine getirecek bir uygulama oluşturun. Örneğin, bir görev yönetim sistemi:

python manage.py startapp tasks

Bu, tasks dizin oluşturur ve içinde models.py, views.py, admin.pyve bir migrations klasör oluşturur. "django" veya "test" gibi yerleşik adlarla ad çakışmalarından kaçındığınızdan emin olun.

Uygulamayı proje ayarlarınızdaki INSTALLED_APPS listeye ekleyerek backend/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'tasks',  # Register your app
]

Modelleri ve Seri Dönüştürücüleri Kurma

Veri yapınızı Django modelleriyle tanımlayın. Örneğin, görev yönetimi uygulaması için basit bir Task görev yönetimi uygulaması için basit bir model, tasks/models.py:

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 metinler için CharField kısa metinler için, TextField daha uzun içerik için, BooleanField doğru/yanlış değerleri ve DateTimeField zaman damgaları için alanlar içerir. Meta sınıf, varsayılan sıralama gibi seçenekleri belirler.

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, Task :

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']

Django REST Framework, ModelSerializer , modele göre alanları ve yöntemleri otomatik olarak oluşturur. Alanları açıkça listelemek, hassas verileri istemeden ifşa etmemenizi sağlar.

API Uç Noktaları Oluşturma

Django REST Framework, API oluşturmayı basitleştirir. Standart CRUD işlemleri için, ViewSets yönlendiricilerle birlikte kullanarak temiz ve REST uyumlu bir yapı elde edebilirsiniz.

İçinde tasks/views.py, 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]  # For development only

Bu ModelViewSet görevlerin listelenmesini, oluşturulmasını, alınmasını, güncellenmesini ve silinmesini otomatik olarak yönetir.

URL yönlendirmesini tasks/urls.py:

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')),
]

CORS Başlıklarını Yapılandırma

React ön ucunuzun (3000 numaralı bağlantı noktasında çalışan) Django arka ucuyla (8000 numaralı bağlantı noktasında) iletişim kurabilmesi için, Kaynaklar Arası Paylaşım (CORS) ayarlarını yapın. Bu ayar yapılmazsa, tarayıcılar güvenlik nedenleriyle kaynaklar arası istekleri engeller.

CORS yapılandırmasını eklemek için backend/settings.py dosyasını güncelleyerek CORS yapılandırmasını ekleyin:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # Add this at the top
    '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',
]

# CORS settings for development
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React development server
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

Hızlı test için CORS_ALLOW_ALL_ORIGINS = Truekullanabilirsiniz, ancak izin verilen kaynakları belirtmek daha güvenlidir.

API Uç Noktalarını Test Etme

React ön ucunu entegre etmeden önce, API uç noktalarının beklendiği gibi çalıştığından emin olmak için test edin. Django geliştirme sunucusunu başlatın:

python manage.py runserver

API'ye şu adresten erişin http://127.0.0.1:8000/api/tasks/adresinden API'ye erişin. GET ve POST istekleri gibi işlemleri test etmek için tarayıcı üzerinden erişilebilen API'yi kullanın.

Alternatif olarak, cURL veya Postman ile test edin:

# Test GET request to list tasks
curl -X GET http://127.0.0.1:8000/api/tasks/

# Test POST request to create a task
curl -X POST http://127.0.0.1:8000/api/tasks/ \
  -H "Content-Type: application/json" \
  -d '{"title": "Test Task", "description": "This is a test task"}'

Otomatik testler için, tasks/tests.py:

from rest_framework.test import APITestCase
from rest_framework import status
from .models import Task

class TaskAPITestCase(APITestCase):
    def test_create_task(self):
        # Add your assertions and test logic here
        pass

Arka uç hazır olduğuna göre, artık onu React ön ucuna bağlamaya hazırsınız.

React ile Ön Uç Oluşturma

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'ı kullanacaksınız.

React Projesi Kurma

Create React App'i kullanarak React ön ucunuzu kurarak başlayın. Projenizin kök dizinine (Django arka ucunuzun bulunduğu yere) gidin ve şu komutu çalıştırın:

npx create-react-app frontend
cd frontend

Bu komut, aşağıdakiler gibi temel dosyaları içeren bir React uygulaması kurar package.json, src/App.js, ve public/index.htmlgibi temel dosyalarla bir React uygulaması kurar. Ayrıca, paketleme için webpack, JavaScript derleme 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ırmasını yöneterek ve yerleşik fetch() işlevinden daha iyi hata işleme sunarak API çağrılarını basitleştirir. Ayrıca istek ve yanıt engelleyicileri gibi özellikleri de destekler.

Klasör yapınız artık şöyle görünmelidir:

project-root/
├── backend/
│   ├── manage.py
│   ├── backend/
│   └── tasks/
└── frontend/
    ├── package.json
    ├── public/
    └── src/

Her şeyin çalıştığından emin olmak için React geliştirme sunucusunu başlatın:

npm start

Bu, uygulamayı http://localhost:3000adresinde başlatır ve varsayılan React karşılama sayfasını görüntüler. Geliştirme süresince bu sunucuyu çalışır durumda tutun; değişiklik yaptığınızda otomatik olarak yeniden yüklenir.

React Bileşenleri Oluşturma

Django API'nizden alınan görevleri görüntülemek için bir TaskList Django API'sinden alınan görevleri görüntülemek için bir bileşen oluşturalım. Aşağıdakileri src/components/TaskList.js:

import React from 'react';

const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => {
  return (
    <div className="task-list">
      <h2>Your Tasks</h2>
      {tasks.length === 0 ? (
        <p>No tasks available. Create your first task!</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, TaskForm yeni görevler eklemek için bir bileşen oluşturun. Bunu src/components/TaskForm.js:

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('Error adding task:', 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="Task description (optional)"
          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 ayarlamaları için bir src/App.css dosya oluşturun ve şunu ekleyin:

.task-list {
  margin: 20px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 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;
  border: 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; color: black; }
.btn-delete { background: #dc3545; color: white; }

Durum Yönetimi ve API Entegrasyonu

React hook'ları gibi useState ve useEffect gibi React hook'ları, durum yönetimi ve Django arka ucunuzla etkileşimi kolaylaştırır. API çağrılarını merkezileştirmek için bir hizmet dosyası oluşturun src/services/api.js:

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:

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);
    }
  };

  // Additional methods for adding, updating, and deleting tasks would go here
}

Bu kurulumla, React ön uçunuz, Django arka ucunuzla sorunsuz bir şekilde iletişim kurarken görevleri etkileşimli bir şekilde yerine getirmeye hazırdır.

Django ve React'ı Bağlama

Artık arka uç ve ön uç sistemleriniz çalışır durumda olduğuna göre, bir sonraki adım aralarında sorunsuz bir iletişim sağlamak. Bu, API uç noktalarını kurmayı, istekleri yönetmeyi ve entegrasyonla ilgili olası aksaklıkları gidermeyi içerir.

React'te API URL'lerini Kurma

React uygulamanızın, Django API uç noktalarının nerede olduğunu bilmesi gerekir. Bunu sağlamak için, src/services/api.js dosyasını ortama özgü yapılandırmalarla güncelleyin:

import axios from 'axios';

// Determine API base URL based on environment
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 second timeout
});

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 ortamı için, React projenizin kök dizinine aşağıdaki içeriğe sahip bir .env dosyasını React projenizin kök dizinine ekleyin:

REACT_APP_API_URL=https://your-production-domain.com/api

Bu kurulum, ister yerel geliştirme ortamında olun ister üretim ortamına dağıtım yapıyor olun, React uygulamanızın Django arka ucuyla sorunsuz bir şekilde etkileşime girmesini sağlar. API uç noktaları yapılandırıldıktan sonra, arka uç verilerini alıp işlemek için hazırsınız demektir.

Arka Uçtan Veri Alma

API yapılandırması tamamlandıktan sonra, React ve Django arasındaki verileri yönetmek için CRUD işlemleri gerçekleştirebilirsiniz. Bu işlemleri yönetmek için src/App.js bu işlemleri gerçekleştirmek için:

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('Error updating task:', err);
    }
  };

  const handleDeleteTask = async (taskId) => {
    if (!window.confirm('Are you sure you want to delete this task?')) {
      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>Task Manager</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önetimini gerçekleştirir. Sorunsuz bir kullanıcı deneyimi için kullanıcı arayüzü anında güncellenir ve hatalar, değişikliklerin geri alınması veya uygun mesajların gösterilmesi yoluyla düzgün bir şekilde yönetilir.

Bağlantıyı Test Etme ve Hata Ayıklama

Django ve React'ı birbirine bağlarken karşılaşılan en yaygın engellerden biri, CORS (Cross-Origin Resource Sharing) hatalarıyla başa çıkmaktır. Bu hatalar, tarayıcıların güvenlik nedenleriyle farklı kaynaklar arasındaki istekleri engellemesi nedeniyle ortaya çıkar. Geliştirme aşamasında React genellikle localhost:3000çalışırken, Django localhost:8000çalışır; bu da kaynaklar arası bir durum yaratır.

CORS sorunlarını gidermek için, "CORS Başlıklarını Yapılandırma" bölümünde açıklandığı gibi Django ayarlarınızda CORS başlıklarını yapılandırdığınızdan emin olun. Değişiklikleri yaptıktan sonra, bunların uygulanması için Django sunucunuzu yeniden başlatın.

İşte birkaç yaygın API istek hatası ve çözümleri:

• HTTP 400 (Hatalı İstek): Bu genellikle istek yükünde bazı gerekli verilerin eksik olduğu veya biçim hatası içerdiği anlamına gelir. Örneğin, Kasım 2023'te FintanMi, bir Django REST Framework ve React projesinde bir topluluk oluştururken bir 400 hatasıyla karşılaştı; çünkü istekte owner istekte eksik olduğu için bir 400 hatasıyla karşılaştı. Ön uçunuzun, Django modellerinin beklediği tüm gerekli alanları gönderdiğini her zaman iki kez kontrol edin.
• HTTP 405 (Yöntem İzin Verilmedi): Bu hata, API uç noktası kullanılan HTTP yöntemini desteklemediğinde ortaya çıkar. Örneğin, FintanMi bir gönderiyi silmeye çalışırken bir 405 hatası bildirdi; bu sorun, Django görünümünü generics.RetrieveUpdateAPIView şeklinde güncellenmesiyle çözüldü. generics.RetrieveUpdateDestroyAPIView şeklinde güncellenerek çözüldü. DELETE requests'i destekleyecek şekilde güncellenmesiyle çözüldü.

Uygulamanın Çalıştırılması ve Test Edilmesi

Django arka ucunuz ve React ön ucunuz birbirine bağlandıktan sonra, artık her iki geliştirme sunucusunu da başlatıp uygulamayı test etme zamanı gelmiştir. Bu, iki sunucuyu aynı anda çalıştırmayı ve her şeyin sorunsuz bir şekilde birlikte çalıştığından emin olmayı gerektirir.

Geliştirme Sunucularını Başlatma

Django-React uygulamanızı çalıştırmak için, her sunucu için birer tane olmak üzere iki terminal penceresine ihtiyacınız olacaktır. Bu kurulum, arka uç ve ön ucun API çağrıları aracılığıyla iletişim kurarken bağımsız olarak çalışmasını sağlar.

Django Arka Uç Sunucusunu Başlatma:

1. İlk terminal penceresini açın ve Django projenizin kök dizinine gidin.

2. Python sanal ortamınızı etkinleştirin:

   source venv/bin/activate
   

3. Django geliştirme sunucusunu başlatın:

   python manage.py runserver
   

   Sunucuya şu adresten erişilebilir: http://127.0.0.1:8000/.

React Ön Uç Sunucusunu Başlatma:

1. İkinci bir terminal penceresi açın ve React proje dizinine gidin:

   cd frontend
   

2. React geliştirme sunucusunu başlatın:

   npm start
   

   Bu işlem, otomatik olarak şu adreste bir tarayıcı penceresi açacaktır: http://localhost:3000/.

Her iki sunucu da çalışmaya başladığında, uygulamanızın işlevselliğini test etmeye başlayabilirsiniz.

Uygulamanın Tüm İşlevlerini Test Etme

Sunucular çalışır durumda ve CORS ile API uç noktaları doğru şekilde yapılandırılmışken, artık ön uç ile arka uç arasındaki veri akışını doğrulama zamanı geldi.

Arka Uç API Doğrulaması:

• Aşağıdaki adresi ziyaret ederek Django API uç noktalarınızı doğrudan test edin:

  http://localhost:8000/api/tasks
  

  Bu adres, Django REST Framework'ün göz atılabilir API arayüzünü göstermelidir; burada CREATE ve READ işlemlerini gerçekleştirebilirsiniz.

• Django yönetici arayüzüne şu adresten erişin:

  http://localhost:8000/admin
  

  Görevleri oluşturmak, düzenlemek veya silmek için süper kullanıcı kimlik bilgilerinizle oturum açın. Ayrıca şu adresi ziyaret ederek UPDATE ve DELETE işlemlerini de test edebilirsiniz:

  http://localhost:8000/api/tasks/{id}
  

Ön Uç-Arka Uç Entegrasyon Testi:

• React uygulamanızı şu adresten açın: http://localhost:3000 adresinden açın ve Django arka ucundaki görevleri görüntüleyerek uygulamanın doğru şekilde yüklendiğini doğrulayın.
• React arayüzü üzerinden her bir CRUD işlemini test edin:
  • Yeni bir görev ekleyin ve bu görevin hem React kullanıcı arayüzünde hem de arka uçta göründüğünü kontrol edin.
  • Mevcut bir görevi düzenleyin ve değişikliklerin kaydedildiğinden emin olun.
  • Bir görevi silin ve hem ön uçtan hem de veritabanından kaldırıldığını doğrulayın.

Uygulamanızda filtreler veya diğer özellikler varsa, görevlerin beklendiği gibi görüntülendiğinden emin olmak için bunları kapsamlı bir şekilde test edin.

Yaygın Sorunları Giderme

Test sırasında herhangi bir sorunla karşılaşırsanız, deneyebileceğiniz bazı yaygın çözümler şunlardır.

API Bağlantı Hataları:

• Her iki sunucunun da kendi bağlantı noktalarında çalıştığından emin olun: Django http://localhost:8000 ve React ise http://localhost:3000.
• Tarayıcının geliştirici araçlarını (ağ sekmesi) kullanarak 404 veya 500 gibi HTTP durum kodlarını belirleyin.

• React projenizdeki proxy ayarı kontrol edin: package.json dosyasındakiayarı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 göçler olup olmadığını kontrol edin:

  python manage.py makemigrations
  python manage.py migrate
  

• React sunucusuyla ilgili sorunlar için bağımlılıkları yeniden yüklemeyi deneyin:

  npm install
  

Veri Akışı Sorunları:

• Tarayıcının geliştirici araçlarını kullanarak ağ isteklerini ve konsol hatalarını inceleyin.
• React'ta console.log() React'te veya print Django görünümlerindeki ifadeler gibi hata ayıklama ifadeleri ekleyerek veri akışını izleyin.
• React uygulamanızdaki API URL'lerinin, sondaki eğik çizgiler dahil olmak üzere (örn., /api/tasks/).

Özet ve Sonraki Adımlar

Django ve React'ı birleştiren bir web uygulaması oluşturdunuz ve bu sayede tam yığın geliştirmeye sağlam bir giriş yaptınız. Bu proje, arka ucu ön uçtan ayırma, CRUD işlemleri gerçekleştirme ve CORS ayarlarını kullanarak kaynaklar arası istekleri yönetme gibi temel kavramları vurgulamaktadır. Bu süreçte, API'ler oluşturmak için Django REST Framework ile çalıştınız ve durum yönetimi için React hook'larını kullandınız; bu beceriler, bu iki güçlü araç arasında sorunsuz bir entegrasyon sağlar.

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ğrulaması ekleyebilirsiniz. Bu, kullanıcıya özel özellikler ve kişiselleştirilmiş deneyimler sunmanıza olanak tanır.

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 panelleri, 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 önem kazanır. React’ın görüntüleme yeteneklerini verimli arka uç veri alma işlemleriyle birleştirerek, karmaşık veri kümelerini etkili bir şekilde işleyip görüntüleyebilirsiniz.

Üretime Hazırlık

Uygulamanızı üretim ortamına hazırlarken dağıtım, güvenlik ve performansa odaklanın. Mevcut kurulum yerel geliştirme için harika olsa da, üretim ortamları ek 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ş teknikleri ustalaşarak, kurumsal düzeydeki projelerin üstesinden gelmek ve bir web geliştiricisi olarak büyümeye devam etmek için gerekli donanıma sahip olacaksınız.

Sıkça Sorulan Sorular

Bir web uygulaması oluştururken arka uç için Django'yu, ön uç için React'ı kullanmanın avantajları nelerdir?

Arka uç için Django'yu, ön uç için React'ı kullanmak, modern web uygulamaları geliştirmek için güçlü bir kombinasyon oluşturur. Django, arka uç geliştirmeyi kolaylaştıran araçlarla donatılmış sağlam bir çerçeve sunarken, React dinamik ve etkileşimli kullanıcı arayüzleri oluşturmada öne çıkar.

Bu kombinasyon, sorumlulukların net bir şekilde ayrılmasını sağlar; bu da kod tabanının düzenli kalmasına ve zaman içinde daha kolay genişletilebilmesine yardımcı olur. React'ın bileşen tabanlı yapısı, kullanıcı arayüzü öğelerinin yeniden kullanımını teşvik eder; Django'nun REST Framework'ü ise API oluşturma sürecini basitleştirerek ön uç ile arka uç arasında sorunsuz bir iletişim sağlar. Bu ikisi bir araya geldiğinde, uygulama geliştirmeye hızlı, verimli ve kullanıcı odaklı bir yaklaşım sunar.

React ön ucunu bir Django arka ucuna bağlarken CORS sorunlarını nasıl çözebilirim?

React ön ucu ile Django arka ucu arasındaki CORS sorunlarını gidermek için django-cors-headers paketi kullanışlı bir çözümdür. Öncelikle pip kullanarak paketi yükleyin. Ardından, settings.py dosyanıza 'corsheaders' 'yi INSTALLED_APPS listesine ekleyin. Ardından, 'corsheaders.middleware.CorsMiddleware' dosyanın en üstüne ekleyin MIDDLEWARE dahil ederek orta katman yazılımlarının doğru yürütme sırasını sağlayın.

Geliştirme aşamasında, CORS_ORIGIN_ALLOW_ALL = True dosyanızda settings.py. Bu, herhangi bir kaynaktan gelen istekleri kabul eder. 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ı bir güvenlik sağlanmasına yardımcı olur.

Bu yapılandırma sayesinde, React uygulamanız CORS gerekliliklerine uyumlu kalırken Django API'larınızla sorunsuz bir şekilde etkileşime girebilir.

Django ve React uygulamamı üretim ortamına dağıtım için nasıl hazırlayabilirim?

Django ve React uygulamanızı üretim ortamına hazırlamak için, öncelikle güvenli bir kurulum sağlamak üzere Django ayarlarınızı düzenleyin. Buna DEBUG değerini False ve ALLOWED_HOSTS değerini belirleyerek uygulamanıza hangi etki alanlarının erişebileceğini kontrol etmeyi içerir. Bu değişiklikler, canlı ortamda uygulamanızı 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 düzeyindeki trafiği ve talepleri karşılayacak şekilde kurulduğundan 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 verecek şekilde Nginx gibi bir web sunucusu kurun. Doğru sunucu yapılandırması, uygulamanızın verimli bir şekilde çalışmasını sağlar ve kullanıcılara sorunsuz bir deneyim sunar.

Canlıya geçmeden önce, uygulamanızı üretim ortamında kapsamlı bir şekilde test edin. Bu adım, olası sorunları tespit edip çözmenize yardımcı olur ve uygulamanızın piyasaya sürüldükten sonra güvenilir bir şekilde çalışmasını sağlar.