Django ve React ile Etkile\u015fimli To-Do Uygulamas\u0131 Nas\u0131l Geli\u015ftirilir?<\/title><br \/>\n<body><\/p>\n<p>Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn art\u0131yor. Dinamik, h\u0131zl\u0131 ve etkile\u015fimli uygulamalar olu\u015fturmak i\u00e7in do\u011fru teknoloji kombinasyonunu se\u00e7mek kritik \u00f6nem ta\u015f\u0131yor. Peki, hem sa\u011flam bir arka plan (backend) hem de zengin bir kullan\u0131c\u0131 aray\u00fcz\u00fc (frontend) sunan bir To-Do uygulamas\u0131 geli\u015ftirmek m\u00fcmk\u00fcn m\u00fc? Bu makalede, Python tabanl\u0131 g\u00fc\u00e7l\u00fc Django framework’\u00fcn\u00fc ve JavaScript’in pop\u00fcler k\u00fct\u00fcphanesi React’\u0131 bir araya getirerek, s\u0131f\u0131rdan modern bir To-Do uygulamas\u0131 nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli bilgiler sunacak, b\u00f6ylece projelerinizi bir \u00fcst seviyeye ta\u015f\u0131yabileceksiniz.<\/p>\n<h2>Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?<\/h2>\n<p>Web uygulamas\u0131 geli\u015ftirirken, genellikle iki ana bile\u015fene odaklan\u0131r\u0131z: verilerin y\u00f6netildi\u011fi ve i\u015f mant\u0131\u011f\u0131n\u0131n y\u00fcr\u00fct\u00fcld\u00fc\u011f\u00fc arka plan (backend) ile kullan\u0131c\u0131lar\u0131n etkile\u015fimde bulundu\u011fu \u00f6n y\u00fcz (frontend). Bu iki katman\u0131n do\u011fru bir \u015fekilde entegre edilmesi, uygulaman\u0131n performans\u0131, \u00f6l\u00e7eklenebilirli\u011fi ve genel kullan\u0131c\u0131 deneyimi i\u00e7in hayati \u00f6neme sahiptir. \u0130\u015fte bu noktada Django ve React ikilisi devreye giriyor. Django, sa\u011flam bir API olu\u015fturmak i\u00e7in gerekli t\u00fcm ara\u00e7lar\u0131 sunarken, React bu API’yi kullanarak dinamik ve h\u0131zl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc in\u015fa etmemizi sa\u011fl\u0131yor. Bu ayr\u0131m, her bir katman\u0131n kendi uzmanl\u0131k alan\u0131na odaklanmas\u0131na olanak tan\u0131yarak geli\u015ftirme s\u00fcrecini daha verimli hale getiriyor.<\/p>\n<h3>Django Nedir ve Backend Geli\u015ftirmede Neden Tercih Edilmeli?<\/h3>\n<p>Django, “web geli\u015ftiricileri i\u00e7in m\u00fckemmeliyet\u00e7i bir framework” slogan\u0131yla bilinen, Python tabanl\u0131, y\u00fcksek seviyeli bir web framework’\u00fcd\u00fcr. H\u0131zl\u0131 geli\u015ftirme ve “DRY” (Don’t Repeat Yourself – Kendini Tekrar Etme) prensibini benimser. Django’nun en b\u00fcy\u00fck avantajlar\u0131ndan biri, bir\u00e7ok temel web geli\u015ftirme ihtiyac\u0131n\u0131 (kullan\u0131c\u0131 kimlik do\u011frulama, y\u00f6netim paneli, veritaban\u0131 ORM’i vb.) “pil dahil” (batteries-included) bir yakla\u015f\u0131mla sunmas\u0131d\u0131r. Bu, geli\u015ftiricilerin s\u0131f\u0131rdan her \u015feyi yazmak yerine, projenin \u00f6zg\u00fcn mant\u0131\u011f\u0131na odaklanmas\u0131na olanak tan\u0131r. \u00d6zellikle API geli\u015ftirme s\u00f6z konusu oldu\u011funda, Django REST Framework (DRF) gibi g\u00fc\u00e7l\u00fc eklentiler sayesinde, dakikalar i\u00e7inde RESTful API’ler olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr. DRF, serile\u015ftirme, kimlik do\u011frulama, yetkilendirme ve viewset’ler gibi \u00f6zellikleriyle API geli\u015ftirme s\u00fcrecini olduk\u00e7a basitle\u015ftirir. G\u00fcvenlik konusunda da Django, SQL enjeksiyonu, XSS ve CSRF gibi yayg\u0131n web sald\u0131r\u0131lar\u0131na kar\u015f\u0131 yerle\u015fik korumalar sunarak geli\u015ftiricilere b\u00fcy\u00fck bir y\u00fck\u00fc hafifletir. Bu sayede, backend taraf\u0131nda sa\u011flam, g\u00fcvenli ve \u00f6l\u00e7eklenebilir bir yap\u0131 kurmak \u00e7ok daha kolay hale gelir.<\/p>\n<h3>React Nedir ve Kullan\u0131c\u0131 Deneyimine Nas\u0131l Katk\u0131 Sa\u011flar?<\/h3>\n<p>React, Facebook taraf\u0131ndan geli\u015ftirilen, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 yap\u0131s\u0131yla \u00f6ne \u00e7\u0131kar; bu, uygulaman\u0131n k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara (component’lere) ayr\u0131lmas\u0131n\u0131 sa\u011flar. Bu yakla\u015f\u0131m, karma\u015f\u0131k UI’lar\u0131 y\u00f6netmeyi ve geli\u015ftirmeyi olduk\u00e7a kolayla\u015ft\u0131r\u0131r. React’\u0131n en \u00f6nemli \u00f6zelliklerinden biri Virtual DOM (Sanal DOM) kullanmas\u0131d\u0131r. Geleneksel olarak, bir web sayfas\u0131nda de\u011fi\u015fiklik oldu\u011funda taray\u0131c\u0131 t\u00fcm DOM’u yeniden \u00e7izmek zorunda kal\u0131r, bu da performans sorunlar\u0131na yol a\u00e7abilir. Virtual DOM ise, \u00f6nce de\u011fi\u015fiklikleri sanal ortamda hesaplar ve sadece gerekli olan k\u0131s\u0131mlar\u0131 ger\u00e7ek DOM’a yans\u0131t\u0131r. Bu optimizasyon, \u00f6zellikle yo\u011fun veri ak\u0131\u015f\u0131 olan ve s\u0131k g\u00fcncellenen uygulamalarda inan\u0131lmaz bir h\u0131z ve ak\u0131c\u0131l\u0131k sa\u011flar. Tek sayfa uygulamalar\u0131 (SPA) geli\u015ftirmek i\u00e7in ideal olan React, kullan\u0131c\u0131lar\u0131n sayfalar aras\u0131nda ge\u00e7i\u015f yaparken tam bir sayfa yenilemesi ya\u015famamas\u0131n\u0131 sa\u011flar, bu da daha ak\u0131c\u0131 ve masa\u00fcst\u00fc uygulamas\u0131 benzeri bir deneyim sunar. Kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn dinamikli\u011fi ve etkile\u015fimlili\u011fi, React’\u0131n sundu\u011fu en b\u00fcy\u00fck avantajlardand\u0131r.<\/p>\n<h3>Frontend ve Backend Ayr\u0131m\u0131 Neden \u00d6nemli?<\/h3>\n<p>Frontend ve backend’in ayr\u0131 katmanlar olarak geli\u015ftirilmesi, modern yaz\u0131l\u0131m mimarisinin temel ta\u015flar\u0131ndan biridir. Bu “decoupled” veya “ayr\u0131k” mimari, bir\u00e7ok avantaj sunar. \u0130lk olarak, \u00f6l\u00e7eklenebilirlik a\u00e7\u0131s\u0131ndan \u00f6nemlidir. Her iki katman da birbirinden ba\u011f\u0131ms\u0131z olarak \u00f6l\u00e7eklendirilebilir; \u00f6rne\u011fin, backend’iniz \u00e7ok fazla API iste\u011fi al\u0131rken, frontend’iniz ayn\u0131 oranda trafik g\u00f6rmeyebilir veya tam tersi. \u0130kinci olarak, farkl\u0131 ekiplerin ayn\u0131 proje \u00fczerinde e\u015f zamanl\u0131 ve ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r. Frontend ekibi kullan\u0131c\u0131 aray\u00fcz\u00fcne odaklan\u0131rken, backend ekibi veri modelleri ve API mant\u0131\u011f\u0131 \u00fczerinde \u00e7al\u0131\u015fabilir. Bu, geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r ve ekip i\u00e7i koordinasyonu kolayla\u015ft\u0131r\u0131r. \u00dc\u00e7\u00fcnc\u00fc olarak, bu ayr\u0131m farkl\u0131 platformlara destek vermeyi kolayla\u015ft\u0131r\u0131r. Ayn\u0131 backend API’si, hem web tabanl\u0131 bir React uygulamas\u0131 hem de mobil (React Native ile) veya masa\u00fcst\u00fc uygulamalar\u0131 taraf\u0131ndan kullan\u0131labilir. Bu da kod tekrar\u0131n\u0131 azalt\u0131r ve tutarl\u0131 bir veri eri\u015fimi sa\u011flar. Son olarak, teknolojileri ba\u011f\u0131ms\u0131z olarak g\u00fcncelleme ve de\u011fi\u015ftirme esnekli\u011fi sunar. \u00d6rne\u011fin, gelecekte React yerine ba\u015fka bir frontend k\u00fct\u00fcphanesine ge\u00e7i\u015f yapmak isterseniz, backend’iniz bu de\u011fi\u015fiklikten etkilenmez. Bu esneklik, uzun vadeli projeler i\u00e7in kritik bir avantajd\u0131r.<\/p>\n<h2>Proje Ortam\u0131n\u0131 Kurma: Geli\u015fime Haz\u0131rl\u0131k Ad\u0131mlar\u0131 Nelerdir?<\/h2>\n<p>Ba\u015far\u0131l\u0131 bir uygulama geli\u015ftirmek i\u00e7in sa\u011flam bir temel atmak \u015fartt\u0131r. Bu temel, do\u011fru geli\u015ftirme ortam\u0131n\u0131 kurmaktan ge\u00e7er. Django ve React projelerimizi ayr\u0131 ayr\u0131 y\u00f6netmek, hem ba\u011f\u0131ml\u0131l\u0131k \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nleyecek hem de her bir katman\u0131n kendi ekosisteminde sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacakt\u0131r. Bu b\u00f6l\u00fcmde, gerekli ara\u00e7lar\u0131n kurulumundan ba\u015flayarak, Django backend’i ve React frontend’i i\u00e7in ilk ad\u0131mlar\u0131 nas\u0131l ataca\u011f\u0131n\u0131z\u0131 detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Do\u011fru yap\u0131land\u0131rma, ilerleyen ad\u0131mlarda kar\u015f\u0131n\u0131za \u00e7\u0131kabilecek bir\u00e7ok potansiyel sorunu \u00f6nleyecektir.<\/p>\n<h3>Gerekli Ara\u00e7lar: Neler Y\u00fcklemeliyiz?<\/h3>\n<p>Bu projeye ba\u015flamadan \u00f6nce bilgisayar\u0131n\u0131zda kurulu olmas\u0131 gereken temel ara\u00e7lar \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Python 3.x:<\/strong> Django’nun \u00e7al\u0131\u015fmas\u0131 i\u00e7in gereklidir. python.org adresinden indirilebilir.<\/li>\n<li><strong>pip:<\/strong> Python paket y\u00f6neticisi. Python ile birlikte gelir.<\/li>\n<li><strong>Node.js ve npm (veya yarn):<\/strong> React uygulamalar\u0131 i\u00e7in JavaScript \u00e7al\u0131\u015fma zaman\u0131 ve paket y\u00f6neticisi. nodejs.org adresinden indirilebilir.<\/li>\n<li><strong>virtualenv (veya venv):<\/strong> Python projeleri i\u00e7in izole edilmi\u015f sanal ortamlar olu\u015fturmak amac\u0131yla kullan\u0131l\u0131r. Ba\u011f\u0131ml\u0131l\u0131k \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nler.<\/li>\n<\/ul>\n<p>Bu ara\u00e7lar\u0131n kurulumunu tamamlad\u0131ktan sonra, projemizin temel dizin yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Genellikle, ana dizinde hem backend hem de frontend projelerini bar\u0131nd\u0131r\u0131r\u0131z:<\/p>\n<pre><code>\n todo-app\/\n \u251c\u2500\u2500 todo-backend\/\n \u2514\u2500\u2500 todo-frontend\/\n <\/code><\/pre>\n<h3>Django Backend Kurulumu ve \u0130lk Ad\u0131mlar<\/h3>\n<p>\u015eimdi s\u0131ra backend projemizi kurmaya geldi. \u0130lk olarak, <code>todo-backend<\/code> dizinine gidelim ve bir sanal ortam olu\u015ftural\u0131m:<\/p>\n<pre><code>\n cd todo-backend\n python -m venv venv\n source venv\/bin\/activate # Linux\/macOS\n # venv\\Scripts\\activate # Windows\n <\/code><\/pre>\n<p>Sanal ortam\u0131 etkinle\u015ftirdikten sonra, Django ve Django REST Framework’\u00fc kural\u0131m:<\/p>\n<pre><code>\n pip install django djangorestframework django-cors-headers\n <\/code><\/pre>\n<p>Ard\u0131ndan, Django projemizi ve bir uygulama (app) olu\u015ftural\u0131m:<\/p>\n<pre><code>\n django-admin startproject todo_backend .\n python manage.py startapp api\n <\/code><\/pre>\n<p>Proje yap\u0131m\u0131z a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnecektir:<\/p>\n<pre><code>\n todo-backend\/\n \u251c\u2500\u2500 venv\/\n \u251c\u2500\u2500 todo_backend\/\n \u2502 \u251c\u2500\u2500 __init__.py\n \u2502 \u251c\u2500\u2500 asgi.py\n \u2502 \u251c\u2500\u2500 settings.py\n \u2502 \u251c\u2500\u2500 urls.py\n \u2502 \u2514\u2500\u2500 wsgi.py\n \u251c\u2500\u2500 api\/\n \u2502 \u251c\u2500\u2500 migrations\/\n \u2502 \u251c\u2500\u2500 __init__.py\n \u2502 \u251c\u2500\u2500 admin.py\n \u2502 \u251c\u2500\u2500 apps.py\n \u2502 \u251c\u2500\u2500 models.py\n \u2502 \u251c\u2500\u2500 tests.py\n \u2502 \u2514\u2500\u2500 views.py\n \u2514\u2500\u2500 manage.py\n <\/code><\/pre>\n<p>\u015eimdi <code>todo_backend\/settings.py<\/code> dosyas\u0131n\u0131 a\u00e7arak gerekli yap\u0131land\u0131rmalar\u0131 yapal\u0131m. <code>INSTALLED_APPS<\/code> listesine <code>'rest_framework'<\/code>, <code>'corsheaders'<\/code> ve <code>'api'<\/code> uygulamalar\u0131m\u0131z\u0131 eklemeliyiz:<\/p>\n<pre><code>\n # todo_backend\/settings.py\n\n INSTALLED_APPS = [\n # ... di\u011fer Django uygulamalar\u0131 ...\n 'rest_framework',\n 'corsheaders',\n 'api', # Kendi api uygulamam\u0131z\n ]\n\n MIDDLEWARE = [\n 'corsheaders.middleware.CorsMiddleware', # CORS middleware'\u0131 en \u00fcste ekleyin\n # ... di\u011fer middleware'ler ...\n ]\n\n CORS_ALLOW_ALL_ORIGINS = True # Geli\u015ftirme ortam\u0131 i\u00e7in t\u00fcm origin'lere izin veriyoruz.\n # \u00dcretim ortam\u0131nda belirli origin'leri belirtmelisiniz.\n <\/code><\/pre>\n<p class=\"expert-tip\">Uzman \u0130pucu: \u00dcretim ortam\u0131nda <code>CORS_ALLOW_ALL_ORIGINS = True<\/code> kullanmak g\u00fcvenlik a\u00e7\u0131\u011f\u0131 olu\u015fturur. Bunun yerine, <code>CORS_ALLOWED_ORIGINS<\/code> listesini kullanarak sadece frontend uygulaman\u0131z\u0131n URL’sini belirtmelisiniz. \u00d6rne\u011fin: <code>CORS_ALLOWED_ORIGINS = [\"http:\/\/localhost:3000\"]<\/code><\/p>\n<p>Veritaban\u0131 tablolar\u0131n\u0131 olu\u015ftural\u0131m:<\/p>\n<pre><code>\n python manage.py makemigrations\n python manage.py migrate\n <\/code><\/pre>\n<p>Backend sunucumuzu \u00e7al\u0131\u015ft\u0131rarak her \u015feyin yolunda olup olmad\u0131\u011f\u0131n\u0131 kontrol edebiliriz:<\/p>\n<pre><code>\n python manage.py runserver\n <\/code><\/pre>\n<p>Taray\u0131c\u0131n\u0131zda <code>http:\/\/127.0.0.1:8000\/<\/code> adresine giderek Django’nun varsay\u0131lan kar\u015f\u0131lama sayfas\u0131n\u0131 g\u00f6rmelisiniz.<\/p>\n<h3>React Frontend Kurulumu ve \u0130lk Ad\u0131mlar<\/h3>\n<p>Frontend taraf\u0131nda ise, <code>todo-frontend<\/code> dizinine ge\u00e7erek React projemizi olu\u015ftural\u0131m:<\/p>\n<pre><code>\n cd ..\/todo-frontend\n npx create-react-app .\n <\/code><\/pre>\n<p><code>npx create-react-app .<\/code> komutu, mevcut dizine React projesi dosyalar\u0131n\u0131 kurar. Kurulum tamamland\u0131ktan sonra, API istekleri yapmak i\u00e7in <code>axios<\/code> k\u00fct\u00fcphanesini kural\u0131m:<\/p>\n<pre><code>\n npm install axios\n # veya\n yarn add axios\n <\/code><\/pre>\n<p>Frontend sunucumuzu ba\u015flatmak i\u00e7in:<\/p>\n<pre><code>\n npm start\n # veya\n yarn start\n <\/code><\/pre>\n<p>Taray\u0131c\u0131n\u0131zda <code>http:\/\/localhost:3000\/<\/code> adresine giderek React’\u0131n varsay\u0131lan kar\u015f\u0131lama sayfas\u0131n\u0131 g\u00f6rmelisiniz. Art\u0131k hem Django backend’imiz hem de React frontend’imiz \u00e7al\u0131\u015fmaya haz\u0131r. Bir sonraki ad\u0131mda, Django REST Framework ile API’mizi geli\u015ftirmeye ba\u015flayaca\u011f\u0131z.<\/p>\n<h2>Django REST Framework ile API Geli\u015ftirme: G\u00f6revleri Nas\u0131l Y\u00f6netiriz?<\/h2>\n<p>Uygulamam\u0131z\u0131n kalbi, g\u00f6revleri (To-Do \u00f6\u011felerini) y\u00f6netebilece\u011fimiz bir API olacakt\u0131r. Bu API, g\u00f6revlerin olu\u015fturulmas\u0131, okunmas\u0131, g\u00fcncellenmesi ve silinmesi (CRUD i\u015flemleri) gibi temel i\u015flevleri yerine getirecektir. Django REST Framework (DRF), bu s\u00fcreci olduk\u00e7a kolayla\u015ft\u0131ran g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Model tan\u0131m\u0131ndan ba\u015flayarak, verileri JSON format\u0131na d\u00f6n\u00fc\u015ft\u00fcren serializer’lara ve son olarak API u\u00e7 noktalar\u0131n\u0131 olu\u015fturan viewset’lere kadar her ad\u0131m\u0131 detayl\u0131ca inceleyece\u011fiz. Bu b\u00f6l\u00fcmde, frontend’in ihtiya\u00e7 duyaca\u011f\u0131 t\u00fcm veri etkile\u015fimlerini sa\u011flayacak sa\u011flam bir backend altyap\u0131s\u0131 kuraca\u011f\u0131z.<\/p>\n<h3>Model Olu\u015fturma: G\u00f6rev Verilerini Nas\u0131l Tutar\u0131z?<\/h3>\n<p>\u0130lk olarak, <code>api\/models.py<\/code> dosyas\u0131n\u0131 a\u00e7arak To-Do \u00f6\u011felerimiz i\u00e7in bir model tan\u0131mlayal\u0131m. Bu model, her bir g\u00f6revin hangi \u00f6zelliklere sahip olaca\u011f\u0131n\u0131 belirleyecektir:<\/p>\n<pre><code>\n # api\/models.py\n\n from django.db import models\n\n class Todo(models.Model):\n title = models.CharField(max_length=120)\n description = models.TextField()\n completed = models.BooleanField(default=False)\n created_at = models.DateTimeField(auto_now_add=True)\n\n def _str_(self):\n return self.title\n <\/code><\/pre>\n<p>Bu model, her g\u00f6revin bir ba\u015fl\u0131\u011f\u0131 (<code>title<\/code>), a\u00e7\u0131klamas\u0131 (<code>description<\/code>), tamamlan\u0131p tamamlanmad\u0131\u011f\u0131n\u0131 g\u00f6steren bir durumu (<code>completed<\/code>) ve olu\u015fturulma zaman\u0131n\u0131 (<code>created_at<\/code>) i\u00e7erecektir. Modeli tan\u0131mlad\u0131ktan sonra, veritaban\u0131 tablolar\u0131n\u0131 olu\u015fturmak i\u00e7in migrasyonlar\u0131 \u00e7al\u0131\u015ft\u0131rmal\u0131y\u0131z:<\/p>\n<pre><code>\n python manage.py makemigrations api\n python manage.py migrate\n <\/code><\/pre>\n<p>Bu komutlar, Django’nun <code>Todo<\/code> modelimiz i\u00e7in gerekli veritaban\u0131 \u015femas\u0131n\u0131 olu\u015fturmas\u0131n\u0131 sa\u011flar. Art\u0131k veritaban\u0131m\u0131zda g\u00f6revlerimizi saklayabilece\u011fimiz bir yap\u0131 mevcut.<\/p>\n<h3>Serializer Yazma: Veri D\u00f6n\u00fc\u015f\u00fcm\u00fcn\u00fc Nas\u0131l Sa\u011flar\u0131z?<\/h3>\n<p>Django modelleri Python nesneleridir ve do\u011frudan HTTP yan\u0131t\u0131 olarak g\u00f6nderilemezler. React gibi frontend uygulamalar\u0131n\u0131n anlayabilece\u011fi JSON format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fclmeleri gerekir. \u0130\u015fte bu noktada serializer’lar devreye girer. <code>api<\/code> uygulamam\u0131z\u0131n i\u00e7inde yeni bir dosya olan <code>api\/serializers.py<\/code> olu\u015ftural\u0131m:<\/p>\n<pre><code>\n # api\/serializers.py\n\n from rest_framework import serializers\n from .models import Todo\n\n class TodoSerializer(serializers.ModelSerializer):\n class Meta:\n model = Todo\n fields = ('id', 'title', 'description', 'completed', 'created_at')\n <\/code><\/pre>\n<p><code>TodoSerializer<\/code> s\u0131n\u0131f\u0131, <code>Todo<\/code> modelimizdeki alanlar\u0131 JSON format\u0131na \u00e7evirecektir. <code>ModelSerializer<\/code>, Django modelinden otomatik olarak alanlar\u0131 ve do\u011frulay\u0131c\u0131lar\u0131 t\u00fcretir, bu da bize b\u00fcy\u00fck kolayl\u0131k sa\u011flar. <code>fields<\/code> tuple’\u0131, API yan\u0131t\u0131nda hangi alanlar\u0131n g\u00f6sterilece\u011fini belirtir. <code>id<\/code> alan\u0131, her g\u00f6rev i\u00e7in benzersiz bir tan\u0131mlay\u0131c\u0131 g\u00f6revi g\u00f6recektir.<\/p>\n<h3>Viewset ve URL Yap\u0131land\u0131rmas\u0131: API U\u00e7 Noktalar\u0131n\u0131 Nas\u0131l Tan\u0131mlar\u0131z?<\/h3>\n<p>\u015eimdi s\u0131ra, API u\u00e7 noktalar\u0131m\u0131z\u0131 olu\u015fturmaya geldi. Django REST Framework, CRUD i\u015flemlerini kapsayan viewset’ler sayesinde bu s\u00fcreci olduk\u00e7a basitle\u015ftirir. <code>api\/views.py<\/code> dosyas\u0131n\u0131 g\u00fcncelleyelim:<\/p>\n<pre><code>\n # api\/views.py\n\n from rest_framework import viewsets\n from .serializers import TodoSerializer\n from .models import Todo\n\n class TodoViewSet(viewsets.ModelViewSet):\n queryset = Todo.objects.all().order_by('-created_at')\n serializer_class = TodoSerializer\n <\/code><\/pre>\n<p><code>TodoViewSet<\/code>, <code>Todo<\/code> modeli i\u00e7in otomatik olarak <code>list<\/code>, <code>retrieve<\/code>, <code>create<\/code>, <code>update<\/code>, <code>partial_update<\/code> ve <code>destroy<\/code> gibi eylemleri sa\u011flar. <code>queryset<\/code>, hangi verilerin \u00e7ekilece\u011fini, <code>serializer_class<\/code> ise bu verilerin nas\u0131l serile\u015ftirilece\u011fini belirtir. Burada, g\u00f6revleri olu\u015fturulma zaman\u0131na g\u00f6re tersten s\u0131ralayarak en yenilerin \u00fcstte g\u00f6r\u00fcnmesini sa\u011fl\u0131yoruz.<\/p>\n<p>Son olarak, bu viewset’i URL’lere ba\u011flamam\u0131z gerekiyor. Django REST Framework’\u00fcn <code>DefaultRouter<\/code>‘\u0131, viewset’ler i\u00e7in otomatik olarak URL yap\u0131land\u0131rmas\u0131 yapar, bu da bize zaman kazand\u0131r\u0131r. <code>todo_backend\/urls.py<\/code> dosyas\u0131n\u0131 g\u00fcncelleyelim:<\/p>\n<pre><code>\n # todo_backend\/urls.py\n\n from django.contrib import admin\n from django.urls import path, include\n from rest_framework import routers\n from api import views\n\n router = routers.DefaultRouter()\n router.register(r'todos', views.TodoViewSet)\n\n urlpatterns = [\n path('admin\/', admin.site.urls),\n path('api\/', include(router.urls)), # API u\u00e7 noktalar\u0131m\u0131z\u0131 ekledik\n ]\n <\/code><\/pre>\n<p>Art\u0131k backend sunucumuz \u00e7al\u0131\u015f\u0131rken (<code>python manage.py runserver<\/code>), <code>http:\/\/127.0.0.1:8000\/api\/todos\/<\/code> adresine giderek DRF’nin otomatik olarak olu\u015fturdu\u011fu API taray\u0131c\u0131s\u0131n\u0131 g\u00f6rebilirsiniz. Buradan yeni g\u00f6revler olu\u015fturabilir, mevcutlar\u0131 listeleyebilir, g\u00fcncelleyebilir ve silebilirsiniz. Bu, API’mizin do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulamak i\u00e7in harika bir yoldur. Postman veya Insomnia gibi ara\u00e7larla da bu u\u00e7 noktalar\u0131 test edebilirsiniz. \u00d6rne\u011fin, yeni bir g\u00f6rev olu\u015fturmak i\u00e7in <code>POST<\/code> iste\u011fiyle a\u015fa\u011f\u0131daki gibi bir JSON g\u00f6nderebilirsiniz:<\/p>\n<pre><code>\n {\n \"title\": \"Al\u0131\u015fveri\u015f Yap\",\n \"description\": \"Marketten s\u00fct, ekmek ve yumurta al.\",\n \"completed\": false\n }\n <\/code><\/pre>\n<p>Bu ad\u0131mlarla, React frontend’imizin kullanabilece\u011fi tam i\u015flevsel bir RESTful API’yi ba\u015far\u0131yla kurmu\u015f olduk. Backend taraf\u0131ndaki bu sa\u011flam yap\u0131, frontend geli\u015ftirmemizi \u00e7ok daha kolay hale getirecektir.<\/p>\n<h2>React ile Kullan\u0131c\u0131 Aray\u00fcz\u00fc Olu\u015fturma: G\u00f6revleri Dinamik Olarak Nas\u0131l G\u00f6r\u00fcnt\u00fcleriz?<\/h2>\n<p>Backend API’miz haz\u0131r oldu\u011funa g\u00f6re, s\u0131ra kullan\u0131c\u0131lar\u0131n g\u00f6revlerini g\u00f6rebilece\u011fi, ekleyebilece\u011fi, d\u00fczenleyebilece\u011fi ve silebilece\u011fi etkile\u015fimli bir aray\u00fcz olu\u015fturmaya geldi. React’\u0131n component tabanl\u0131 yap\u0131s\u0131 ve state y\u00f6netimi, bu t\u00fcr dinamik aray\u00fczleri in\u015fa etmek i\u00e7in m\u00fckemmel bir uyum sa\u011flar. Bu b\u00f6l\u00fcmde, React uygulamas\u0131n\u0131n temel component yap\u0131s\u0131n\u0131 olu\u015fturacak, backend API’mizle nas\u0131l ileti\u015fim kuraca\u011f\u0131m\u0131z\u0131 \u00f6\u011frenecek ve kullan\u0131c\u0131 giri\u015flerini y\u00f6netmek i\u00e7in formlar\u0131 nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Amac\u0131m\u0131z, kullan\u0131c\u0131 dostu ve ak\u0131c\u0131 bir To-Do deneyimi sunmakt\u0131r.<\/p>\n<h3>Component Yap\u0131s\u0131: Uygulamay\u0131 Nas\u0131l B\u00f6l\u00fcmlere Ay\u0131r\u0131r\u0131z?<\/h3>\n<p>React’ta her \u015fey bir component’tir. Uygulamam\u0131z\u0131 y\u00f6netilebilir par\u00e7alara ay\u0131rmak i\u00e7in a\u015fa\u011f\u0131daki temel component’leri olu\u015ftural\u0131m:<\/p>\n<ul>\n<li><code>App.js<\/code>: Ana component, t\u00fcm uygulamay\u0131 sarar.<\/li>\n<li><code>TodoList.js<\/code>: G\u00f6rev listesini g\u00f6r\u00fcnt\u00fcler.<\/li>\n<li><code>TodoItem.js<\/code>: Her bir g\u00f6revi (ba\u015fl\u0131k, a\u00e7\u0131klama, tamamland\u0131 durumu) temsil eder.<\/li>\n<li><code>TodoForm.js<\/code>: Yeni g\u00f6rev eklemek veya mevcut g\u00f6revleri d\u00fczenlemek i\u00e7in formu i\u00e7erir.<\/li>\n<\/ul>\n<p><code>src<\/code> klas\u00f6r\u00fcn\u00fcn alt\u0131nda <code>components<\/code> ad\u0131nda yeni bir klas\u00f6r olu\u015ftural\u0131m ve bu component dosyalar\u0131n\u0131 i\u00e7ine yerle\u015ftirelim. \u00d6rne\u011fin, <code>src\/components\/TodoList.js<\/code> gibi.<\/p>\n<p>\u0130lk olarak, <code>src\/App.js<\/code> dosyam\u0131z\u0131 temizleyelim ve temel yap\u0131y\u0131 kural\u0131m:<\/p>\n<pre><code>\n \/\/ src\/App.js\n\n import React, { useState, useEffect } from 'react';\n import axios from 'axios';\n import TodoList from '.\/components\/TodoList';\n import TodoForm from '.\/components\/TodoForm';\n import '.\/App.css'; \/\/ Stil dosyam\u0131z\u0131 da ekleyelim\n\n function App() {\n const [todos, setTodos] = useState([]);\n const [editingTodo, setEditingTodo] = useState(null); \/\/ D\u00fczenlenen g\u00f6revi tutmak i\u00e7in state\n\n \/\/ API'den g\u00f6revleri \u00e7ekme\n useEffect(() => {\n fetchTodos();\n }, []);\n\n const fetchTodos = async () => {\n try {\n const response = await axios.get('http:\/\/localhost:8000\/api\/todos\/');\n setTodos(response.data);\n } catch (error) {\n console.error('G\u00f6revler \u00e7ekilirken hata olu\u015ftu:', error);\n }\n };\n\n \/\/ ... Di\u011fer CRUD fonksiyonlar\u0131 buraya gelecek ...\n\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <h1>To-Do Uygulamas\u0131<\/h1>\n <\/header>\n <main>\n <TodoForm\n onSave={editingTodo ? updateTodo : addTodo}\n initialData={editingTodo}\n onCancelEdit={() => setEditingTodo(null)}\n \/>\n <TodoList\n todos={todos}\n onEdit={handleEdit}\n onDelete={deleteTodo}\n onToggleComplete={toggleComplete}\n \/>\n <\/main>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n<p>Bu temel yap\u0131, <code>todos<\/code> state’ini tutacak, API’den g\u00f6revleri \u00e7ekecek ve <code>TodoList<\/code> ile <code>TodoForm<\/code> component’lerini render edecektir. <code>editingTodo<\/code> state’i ise bir g\u00f6revin d\u00fczenlenip d\u00fczenlenmedi\u011fini kontrol etmek i\u00e7in kullan\u0131lacak.<\/p>\n<h3>API Entegrasyonu: Backend ile Nas\u0131l \u0130leti\u015fim Kurar\u0131z?<\/h3>\n<p><code>axios<\/code> k\u00fct\u00fcphanesi sayesinde backend API’mizle ileti\u015fim kurmak olduk\u00e7a kolayd\u0131r. <code>App.js<\/code> i\u00e7inde CRUD operasyonlar\u0131n\u0131 ger\u00e7ekle\u015ftiren fonksiyonlar\u0131 tan\u0131mlayal\u0131m:<\/p>\n<pre><code>\n \/\/ src\/App.js (devam\u0131)\n\n \/\/ Yeni g\u00f6rev ekleme\n const addTodo = async (todo) => {\n try {\n const response = await axios.post('http:\/\/localhost:8000\/api\/todos\/', todo);\n setTodos([response.data, ...todos]); \/\/ Yeni g\u00f6revi listenin ba\u015f\u0131na ekle\n } catch (error) {\n console.error('G\u00f6rev eklenirken hata olu\u015ftu:', error);\n }\n };\n\n \/\/ G\u00f6rev silme\n const deleteTodo = async (id) => {\n try {\n await axios.delete(<code class=\"language-\">http:\/\/localhost:8000\/api\/todos\/${id}\/<\/code>);\n setTodos(todos.filter(todo => todo.id !== id));\n } catch (error) {\n console.error('G\u00f6rev silinirken hata olu\u015ftu:', error);\n }\n };\n\n \/\/ G\u00f6revi d\u00fczenleme (state'i ayarlar)\n const handleEdit = (todo) => {\n setEditingTodo(todo);\n };\n\n \/\/ G\u00f6revi g\u00fcncelleme\n const updateTodo = async (updatedTodo) => {\n try {\n const response = await axios.put(<code class=\"language-\">http:\/\/localhost:8000\/api\/todos\/${updatedTodo.id}\/<\/code>, updatedTodo);\n setTodos(todos.map(todo => (todo.id === updatedTodo.id ? response.data : todo)));\n setEditingTodo(null); \/\/ D\u00fczenleme modundan \u00e7\u0131k\n } catch (error) {\n console.error('G\u00f6rev g\u00fcncellenirken hata olu\u015ftu:', error);\n }\n };\n\n \/\/ G\u00f6rev tamamland\u0131 durumunu de\u011fi\u015ftirme\n const toggleComplete = async (id, completed) => {\n try {\n const todoToUpdate = todos.find(todo => todo.id === id);\n if (!todoToUpdate) return;\n\n const response = await axios.patch(<code class=\"language-\">http:\/\/localhost:8000\/api\/todos\/${id}\/<\/code>, { completed: !completed });\n setTodos(todos.map(todo => (todo.id === id ? response.data : todo)));\n } catch (error) {\n console.error('G\u00f6rev durumu g\u00fcncellenirken hata olu\u015ftu:', error);\n }\n };\n <\/code><\/pre>\n<p>Bu fonksiyonlar, <code>useState<\/code> ve <code>useEffect<\/code> hook’lar\u0131n\u0131 kullanarak component’in ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve durumunu y\u00f6netir. <code>useEffect<\/code>, component ilk y\u00fcklendi\u011finde g\u00f6revleri \u00e7ekmek i\u00e7in kullan\u0131l\u0131rken, di\u011fer fonksiyonlar kullan\u0131c\u0131 etkile\u015fimleriyle tetiklenir ve API’ye istek g\u00f6nderir.<\/p>\n<h3>Form Y\u00f6netimi ve State G\u00fcncelleme: Kullan\u0131c\u0131 Giri\u015flerini Nas\u0131l \u0130\u015fleriz?<\/h3>\n<p><code>TodoForm.js<\/code> component’i, yeni g\u00f6rev eklemek ve mevcut g\u00f6revleri d\u00fczenlemek i\u00e7in kullan\u0131lacakt\u0131r. Bu form, <code>title<\/code> ve <code>description<\/code> alanlar\u0131n\u0131 i\u00e7erecek ve kullan\u0131c\u0131n\u0131n giri\u015flerini yakalamak i\u00e7in <code>useState<\/code> hook’lar\u0131n\u0131 kullanacakt\u0131r.<\/p>\n<pre><code>\n \/\/ src\/components\/TodoForm.js\n\n import React, { useState, useEffect } from 'react';\n import '.\/TodoForm.css'; \/\/ Stil dosyas\u0131\n\n function TodoForm({ onSave, initialData, onCancelEdit }) {\n const [title, setTitle] = useState('');\n const [description, setDescription] = useState('');\n\n useEffect(() => {\n if (initialData) {\n setTitle(initialData.title);\n setDescription(initialData.description);\n } else {\n setTitle('');\n setDescription('');\n }\n }, [initialData]);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!title.trim()) return;\n onSave({ id: initialData?.id, title, description });\n setTitle('');\n setDescription('');\n onCancelEdit(); \/\/ Kay\u0131t sonras\u0131 d\u00fczenleme modundan \u00e7\u0131k\n };\n\n return (\n <form onSubmit={handleSubmit} className=\"todo-form\">\n <input\n type=\"text\"\n placeholder=\"G\u00f6rev Ba\u015fl\u0131\u011f\u0131\"\n value={title}\n onChange={(e) => setTitle(e.target.value)}\n required\n \/>\n <textarea\n placeholder=\"G\u00f6rev A\u00e7\u0131klamas\u0131\"\n value={description}\n onChange={(e) => setDescription(e.target.value)}\n ><\/textarea>\n <button type=\"submit\">{initialData ? 'G\u00f6revi G\u00fcncelle' : 'G\u00f6rev Ekle'}<\/button>\n {initialData && (\n <button type=\"button\" onClick={onCancelEdit} className=\"cancel-button\">\n \u0130ptal\n <\/button>\n )}\n <\/form>\n );\n }\n\n export default TodoForm;\n <\/code><\/pre>\n<p><code>TodoList.js<\/code> ve <code>TodoItem.js<\/code> component’leri de benzer \u015fekilde <code>props<\/code> arac\u0131l\u0131\u011f\u0131yla g\u00f6rev verilerini alacak ve bunlar\u0131 ekranda g\u00f6sterecektir. <code>TodoItem<\/code> i\u00e7inde d\u00fczenleme ve silme butonlar\u0131 bulunacak, bu butonlara t\u0131kland\u0131\u011f\u0131nda <code>App.js<\/code>‘teki ilgili fonksiyonlar \u00e7a\u011fr\u0131lacakt\u0131r. \u00d6rne\u011fin, bir g\u00f6rev \u00f6\u011fesi \u015f\u00f6yle g\u00f6r\u00fcnebilir:<\/p>\n<pre><code>\n \/\/ src\/components\/TodoItem.js\n\n import React from 'react';\n import '.\/TodoItem.css';\n\n function TodoItem({ todo, onEdit, onDelete, onToggleComplete }) {\n return (\n <div className={<code class=\"language-\">todo-item ${todo.completed ? 'completed' : ''}<\/code>}>\n <input\n type=\"checkbox\"\n checked={todo.completed}\n onChange={() => onToggleComplete(todo.id, todo.completed)}\n \/>\n <div className=\"todo-content\">\n <h3>{todo.title}<\/h3>\n <p>{todo.description}<\/p>\n <\/div>\n <div className=\"todo-actions\">\n <button onClick={() => onEdit(todo)}>D\u00fczenle<\/button>\n <button onClick={() => onDelete(todo.id)}>Sil<\/button>\n <\/div>\n <\/div>\n );\n }\n\n export default TodoItem;\n <\/code><\/pre>\n<p>Bu component’ler bir araya geldi\u011finde, kullan\u0131c\u0131lar\u0131n etkile\u015fimde bulunabilece\u011fi tam i\u015flevli bir To-Do uygulamas\u0131 ortaya \u00e7\u0131kar. Kullan\u0131c\u0131 yeni bir g\u00f6rev ekledi\u011finde, form verileri API’ye g\u00f6nderilir, API yan\u0131t d\u00f6nd\u00fc\u011f\u00fcnde React state’i g\u00fcnceller ve aray\u00fcz otomatik olarak yeniden render edilir. Bu dinamik veri ak\u0131\u015f\u0131, React’\u0131n g\u00fcc\u00fcn\u00fc ve modern web uygulamalar\u0131nda neden bu kadar pop\u00fcler oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir. CSS ile bu component’lere stil ekleyerek daha \u00e7ekici bir g\u00f6r\u00fcn\u00fcm kazand\u0131rabilirsiniz. \u00d6rne\u011fin, <code>App.css<\/code>, <code>TodoForm.css<\/code>, <code>TodoList.css<\/code> ve <code>TodoItem.css<\/code> dosyalar\u0131 olu\u015fturarak her bir component’in stilini ayr\u0131 ayr\u0131 y\u00f6netebilirsiniz.<\/p>\n<h2>\u0130leri D\u00fczey Konular ve Optimizasyonlar: Uygulamam\u0131z\u0131 Daha \u0130yi Nas\u0131l Hale Getiririz?<\/h2>\n<p>Temel To-Do uygulamam\u0131z\u0131 ba\u015far\u0131yla geli\u015ftirdik, ancak modern bir web uygulamas\u0131n\u0131n sadece temel i\u015flevsellikten ibaret olmad\u0131\u011f\u0131n\u0131 biliyoruz. G\u00fcvenlik, performans ve da\u011f\u0131t\u0131m gibi konular, uygulaman\u0131n ger\u00e7ek d\u00fcnya senaryolar\u0131nda ba\u015far\u0131l\u0131 olmas\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu b\u00f6l\u00fcmde, uygulamam\u0131z\u0131 daha g\u00fcvenli, daha h\u0131zl\u0131 ve daha kolay y\u00f6netilebilir hale getirecek ileri d\u00fczey konular\u0131 ve optimizasyon tekniklerini ke\u015ffedece\u011fiz. Deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli ipu\u00e7lar\u0131 sunarken, ayn\u0131 zamanda yeni ba\u015flayanlara da gelecekteki projeleri i\u00e7in bir yol haritas\u0131 \u00e7izece\u011fiz.<\/p>\n<h3>Kimlik Do\u011frulama ve Yetkilendirme: G\u00fcvenli\u011fi Nas\u0131l Sa\u011flar\u0131z?<\/h3>\n<p>\u00c7o\u011fu To-Do uygulamas\u0131nda, her kullan\u0131c\u0131n\u0131n kendi g\u00f6rev listesi olmas\u0131n\u0131 isteriz. Bu, kimlik do\u011frulama (kullan\u0131c\u0131n\u0131n kim oldu\u011funu bilmek) ve yetkilendirme (kullan\u0131c\u0131n\u0131n ne yapmas\u0131na izin verildi\u011fini bilmek) gerektirir. Django REST Framework, bu konuda bir\u00e7ok se\u00e7enek sunar. En yayg\u0131n ve modern yakla\u015f\u0131mlardan biri JWT (JSON Web Tokens) kullanmakt\u0131r. JWT, kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda sunucu taraf\u0131ndan olu\u015fturulan ve istemciye g\u00f6nderilen \u015fifreli bir belirte\u00e7tir. \u0130stemci (React uygulamam\u0131z), bu belirteci sonraki t\u00fcm API isteklerinde g\u00f6ndererek kendini do\u011frular.<\/p>\n<p><strong>Backend (Django DRF) Taraf\u0131nda JWT Entegrasyonu:<\/strong><\/p>\n<ol>\n<li><strong>Kurulum:<\/strong> <code>pip install djangorestframework-simplejwt<\/code><\/li>\n<li><strong><code>settings.py<\/code> yap\u0131land\u0131rmas\u0131:<\/strong><\/li>\n<pre><code>\n # todo_backend\/settings.py\n INSTALLED_APPS = [\n # ...\n 'rest_framework',\n 'rest_framework_simplejwt',\n # ...\n ]\n\n REST_FRAMEWORK = {\n 'DEFAULT_AUTHENTICATION_CLASSES': (\n 'rest_framework_simplejwt.authentication.JWTAuthentication',\n ),\n }\n\n from datetime import timedelta\n SIMPLE_JWT = {\n 'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),\n 'REFRESH_TOKEN_LIFETIME': timedelta(days=1),\n 'ROTATE_REFRESH_TOKENS': True,\n 'BLACKLIST_AFTER_ROTATION': True,\n 'ALGORITHM': 'HS256',\n 'SIGNING_KEY': SECRET_KEY, # Django'nun SECRET_KEY'ini kullan\u0131n\n 'VERIFYING_KEY': None,\n 'AUDIENCE': None,\n 'ISSUER': None,\n 'JWK_URL': None,\n 'LEEWAY': 0,\n\n 'AUTH_HEADER_TYPES': ('Bearer',),\n 'AUTH_HEADER_NAME': 'HTTP_AUTHORIZATION',\n 'USER_ID_FIELD': 'id',\n 'USER_ID_CLAIM': 'user_id',\n 'USER_AUTHENTICATION_RULE': 'rest_framework_simplejwt.authentication.default_user_authentication_rule',\n\n 'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken',),\n 'TOKEN_TYPE_CLAIM': 'token_type',\n 'TOKEN_USER_CLASS': 'rest_framework_simplejwt.models.TokenUser',\n\n 'JTI_CLAIM': 'jti',\n\n 'SLIDING_TOKEN_REFRESH_EXP_CLAIM': 'refresh_exp',\n 'SLIDING_TOKEN_LIFETIME': timedelta(minutes=5),\n 'SLIDING_TOKEN_REFRESH_LIFETIME': timedelta(days=1),\n }\n <\/code><\/pre>\n<li><strong><code>urls.py<\/code> yap\u0131land\u0131rmas\u0131:<\/strong> Giri\u015f ve token yenileme u\u00e7 noktalar\u0131n\u0131 ekleyin.<\/li>\n<pre><code>\n # todo_backend\/urls.py\n from rest_framework_simplejwt.views import (\n TokenObtainPairView,\n TokenRefreshView,\n )\n\n urlpatterns = [\n # ...\n path('api\/token\/', TokenObtainPairView.as_view(), name='token_obtain_pair'),\n path('api\/token\/refresh\/', TokenRefreshView.as_view(), name='token_refresh'),\n ]\n <\/code><\/pre>\n<li><strong>ViewSet’te \u0130zin S\u0131n\u0131flar\u0131:<\/strong> Sadece giri\u015f yapm\u0131\u015f kullan\u0131c\u0131lar\u0131n kendi g\u00f6revlerini g\u00f6rmesini sa\u011flamak i\u00e7in <code>api\/views.py<\/code> dosyas\u0131nda <code>IsAuthenticated<\/code> ve <code>IsOwner<\/code> gibi izin s\u0131n\u0131flar\u0131n\u0131 kullanabilirsiniz.<\/li>\n<pre><code>\n # api\/views.py\n from rest_framework.permissions import IsAuthenticated\n from .permissions import IsOwnerOrReadOnly # Kendi custom iznimizi yazabiliriz\n\n class TodoViewSet(viewsets.ModelViewSet):\n serializer_class = TodoSerializer\n permission_classes = [IsAuthenticated, IsOwnerOrReadOnly] # Bu izinleri ekleyin\n\n def get_queryset(self):\n return Todo.objects.filter(user=self.request.user).order_by('-created_at')\n\n def perform_create(self, serializer):\n serializer.save(user=self.request.user)\n <\/code><\/pre>\n<p><code>IsOwnerOrReadOnly<\/code> gibi \u00f6zel izin s\u0131n\u0131flar\u0131, bir kullan\u0131c\u0131n\u0131n yaln\u0131zca kendi olu\u015fturdu\u011fu \u00f6\u011feleri d\u00fczenleyip silebilmesini sa\u011flarken, di\u011fer \u00f6\u011feleri sadece okumas\u0131na izin verir. Bu, <code>api\/permissions.py<\/code> gibi bir dosyada tan\u0131mlanabilir.<\/p>\n<p><strong>Frontend (React) Taraf\u0131nda JWT Kullan\u0131m\u0131:<\/strong><\/p>\n<p>React uygulamas\u0131nda, kullan\u0131c\u0131 giri\u015f yapt\u0131ktan sonra al\u0131nan JWT token’lar\u0131n\u0131 (access ve refresh token) yerel depolama (localStorage) veya bir context API kullanarak saklayabilirsiniz. Her API iste\u011finde, <code>axios<\/code>‘un interceptor’lar\u0131n\u0131 kullanarak <code>Authorization<\/code> ba\u015fl\u0131\u011f\u0131na <code>Bearer <access_token><\/code> eklemelisiniz. Token s\u00fcresi doldu\u011funda, refresh token ile yeni bir access token almay\u0131 denemelisiniz.<\/p>\n<pre><code>\n \/\/ src\/api.js (\u00f6rnek bir axios yap\u0131land\u0131rmas\u0131)\n import axios from 'axios';\n\n const apiClient = axios.create({\n baseURL: 'http:\/\/localhost:8000\/api\/',\n headers: {\n 'Content-Type': 'application\/json',\n },\n });\n\n apiClient.interceptors.request.use(config => {\n const token = localStorage.getItem('accessToken');\n if (token) {\n config.headers.Authorization = <code class=\"language-\">Bearer ${token}<\/code>;\n }\n return config;\n }, error => {\n return Promise.reject(error);\n });\n\n \/\/ Token yenileme mant\u0131\u011f\u0131 da buraya eklenebilir\n \/\/ apiClient.interceptors.response.use(...)\n\n export default apiClient;\n <\/code><\/pre>\n<p class=\"expert-tip\">Uzman \u0130pucu: JWT token’lar\u0131n\u0131 <code>localStorage<\/code>‘da saklamak XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 riskli olabilir. Daha g\u00fcvenli bir yakla\u015f\u0131m i\u00e7in, token’lar\u0131 HTTP-only \u00e7erezlerde saklamay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Ancak bu, CORS ve Same-Site policy gibi konularda ek yap\u0131land\u0131rma gerektirecektir.<\/p>\n<h3>Performans Optimizasyonlar\u0131: Uygulamam\u0131z\u0131 Nas\u0131l H\u0131zland\u0131r\u0131r\u0131z?<\/h3>\n<p>Uygulaman\u0131n kullan\u0131c\u0131 say\u0131s\u0131 artt\u0131k\u00e7a veya veri miktar\u0131 \u00e7o\u011fald\u0131k\u00e7a performans kritik hale gelir. Hem backend hem de frontend taraf\u0131nda yapabilece\u011fimiz bir\u00e7ok optimizasyon vard\u0131r.<\/p>\n<p><strong>Backend (Django) Performans \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n<ul>\n<li><strong>Veritaban\u0131 Sorgu Optimizasyonu:<\/strong> N+1 sorgu probleminden ka\u00e7\u0131nmak i\u00e7in <code>select_related()<\/code> ve <code>prefetch_related()<\/code> kullan\u0131n. Bu, ili\u015fkili verileri tek bir sorguda \u00e7ekerek veritaban\u0131 y\u00fck\u00fcn\u00fc azalt\u0131r.<\/li>\n<li><strong>Caching:<\/strong> S\u0131k eri\u015filen ama nadiren de\u011fi\u015fen veriler i\u00e7in Django’nun caching framework’\u00fcn\u00fc veya Redis gibi harici bir cache sistemini kullan\u0131n.<\/li>\n<li><strong>Asenkron G\u00f6revler:<\/strong> Uzun s\u00fcren i\u015flemleri (e-posta g\u00f6nderme, resim i\u015fleme) Celery gibi bir asenkron g\u00f6rev kuyru\u011fu ile arka plana ta\u015f\u0131y\u0131n.<\/li>\n<li><strong>API S\u0131n\u0131rlamas\u0131 (Throttling):<\/strong> K\u00f6t\u00fc niyetli veya a\u015f\u0131r\u0131 istekleri \u00f6nlemek i\u00e7in DRF’nin throttling \u00f6zelliklerini kullan\u0131n.<\/li>\n<\/ul>\n<p><strong>Frontend (React) Performans \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n<ul>\n<li><strong>React.memo, useCallback, useMemo:<\/strong> Gereksiz yeniden render’lar\u0131 \u00f6nlemek i\u00e7in bu hook’lar\u0131 ve HOC’lar\u0131 kullan\u0131n. \u00d6zellikle b\u00fcy\u00fck listeler render ederken fark yarat\u0131rlar.<\/li>\n<li><strong>Lazy Loading (Tembel Y\u00fckleme):<\/strong> Uygulaman\u0131n ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini azaltmak i\u00e7in <code>React.lazy()<\/code> ve <code>Suspense<\/code> ile component’leri sadece ihtiya\u00e7 duyuldu\u011funda y\u00fckleyin.<\/li>\n<li><strong>Sanalla\u015ft\u0131rma (Virtualization):<\/strong> \u00c7ok uzun listeler i\u00e7in (\u00f6rne\u011fin 1000’den fazla g\u00f6rev) React Window veya React Virtualized gibi k\u00fct\u00fcphanelerle sadece g\u00f6r\u00fcn\u00fcrdeki \u00f6\u011feleri render ederek performans\u0131 art\u0131r\u0131n.<\/li>\n<li><strong>Resim Optimizasyonu:<\/strong> Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc resimler yerine optimize edilmi\u015f, uygun boyutlarda resimler kullan\u0131n.<\/li>\n<\/ul>\n<h3>Da\u011f\u0131t\u0131m (Deployment) Stratejileri: Uygulamam\u0131z\u0131 Canl\u0131ya Nas\u0131l Al\u0131r\u0131z?<\/h3>\n<p>Uygulamay\u0131 geli\u015ftirdikten sonra, herkesin eri\u015febilece\u011fi bir sunucuya da\u011f\u0131tmak gerekir. Django ve React’\u0131n ayr\u0131 ayr\u0131 da\u011f\u0131t\u0131lmas\u0131 genellikle en iyi yakla\u015f\u0131md\u0131r.<\/p>\n<ul>\n<li><strong>Backend (Django) Da\u011f\u0131t\u0131m\u0131:<\/strong>\n<ul>\n<li><strong>Web Sunucusu:<\/strong> Gunicorn veya uWSGI gibi bir WSGI sunucusu ile Django uygulamas\u0131n\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n.<\/li>\n<li><strong>Ters Proxy:<\/strong> Nginx veya Apache gibi bir ters proxy sunucusu, gelen istekleri Gunicorn’a y\u00f6nlendirir ve statik dosyalar\u0131 sunar.<\/li>\n<li><strong>Veritaban\u0131:<\/strong> PostgreSQL veya MySQL gibi \u00fcretim seviyesi bir veritaban\u0131 kullan\u0131n.<\/li>\n<li><strong>Platformlar:<\/strong> Heroku, AWS EC2, DigitalOcean Droplet, Google Cloud Run gibi platformlara da\u011f\u0131tabilirsiniz.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Frontend (React) Da\u011f\u0131t\u0131m\u0131:<\/strong>\n<ul>\n<li><strong>Statik Dosya Sunucusu:<\/strong> React uygulamas\u0131 derlendi\u011finde (<code>npm run build<\/code>), statik HTML, CSS ve JavaScript dosyalar\u0131 olu\u015fur. Bu dosyalar\u0131 Nginx, Apache, Netlify, Vercel veya AWS S3\/CloudFront gibi bir statik dosya sunucusundan yay\u0131nlayabilirsiniz.<\/li>\n<li><strong>CDN:<\/strong> \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011flar\u0131 (CDN), statik dosyalar\u0131n\u0131z\u0131 d\u00fcnya genelinde \u00f6nbelle\u011fe alarak kullan\u0131c\u0131lar\u0131n\u0131za daha h\u0131zl\u0131 eri\u015fim sa\u011flar.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Konteynerle\u015ftirme (Docker):<\/strong> Hem Django hem de React uygulamalar\u0131n\u0131 Docker konteynerlerine alarak da\u011f\u0131t\u0131m s\u00fcrecini standartla\u015ft\u0131rabilir ve basitle\u015ftirebilirsiniz. Docker Compose ile her iki servisi de yerel ortamda kolayca y\u00f6netebilir, \u00fcretimde Kubernetes gibi orkestrasyon ara\u00e7lar\u0131yla \u00f6l\u00e7eklendirebilirsiniz.<\/li>\n<\/ul>\n<p><strong>Vaka Analizi: B\u00fcy\u00fck \u00d6l\u00e7ekli Bir Uygulamada Performans Darbo\u011fazlar\u0131 ve \u00c7\u00f6z\u00fcmleri<\/strong><\/p>\n<p>Bir e-ticaret platformunun “\u00fcr\u00fcn listeleme” sayfas\u0131n\u0131n yava\u015f y\u00fcklendi\u011fini varsayal\u0131m. \u0130lk analizde, sayfan\u0131n 500’den fazla \u00fcr\u00fcn\u00fc ve her \u00fcr\u00fcn i\u00e7in ortalama 3 resim \u00e7ekmesi gerekti\u011fi ortaya \u00e7\u0131kt\u0131. Backend taraf\u0131nda, her \u00fcr\u00fcn i\u00e7in ayr\u0131 ayr\u0131 resim sorgular\u0131 yap\u0131ld\u0131\u011f\u0131 (N+1 problemi) ve veritaban\u0131ndan \u00e7ekilen verilerin tam olarak optimize edilmedi\u011fi tespit edildi. \u00c7\u00f6z\u00fcm olarak, Django’da <code>select_related('category')<\/code> ve <code>prefetch_related('images')<\/code> kullan\u0131larak \u00fcr\u00fcn, kategori ve resim verileri tek veya \u00e7ok az say\u0131da sorguyla \u00e7ekildi. Ayr\u0131ca, s\u0131k g\u00fcncellenmeyen \u00fcr\u00fcn bilgileri i\u00e7in Redis ile 15 dakikal\u0131k bir cache mekanizmas\u0131 eklendi. Frontend taraf\u0131nda ise, \u00fcr\u00fcn resimleri i\u00e7in lazy loading uyguland\u0131 ve React’\u0131n <code>React.memo<\/code> HOC’u ile \u00fcr\u00fcn kart\u0131 component’leri optimize edildi, b\u00f6ylece sadece de\u011fi\u015fen kartlar yeniden render edildi. Bu optimizasyonlar sonucunda sayfa y\u00fckleme s\u00fcresi %60 oran\u0131nda azald\u0131, kullan\u0131c\u0131 deneyimi \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015fti.<\/p>\n<p>Bu ileri d\u00fczey konular, uygulaman\u0131z\u0131 sadece i\u015flevsel k\u0131lmakla kalmaz, ayn\u0131 zamanda onu daha profesyonel, g\u00fcvenli ve performansl\u0131 hale getirir. Geli\u015ftirme yolculu\u011funuzda bu konular\u0131 g\u00f6z \u00f6n\u00fcnde bulundurarak \u00e7ok daha ba\u015far\u0131l\u0131 projelere imza atabilirsiniz.<\/p>\n<h2>Sonu\u00e7: Django ve React Birlikte Gelece\u011fe Y\u00f6nelik Bir \u00c7\u00f6z\u00fcm m\u00fc?<\/h2>\n<p>Bu makalede, Django’nun sa\u011flam backend yetenekleri ile React’\u0131n dinamik frontend g\u00fcc\u00fcn\u00fc birle\u015ftirerek nas\u0131l modern bir To-Do uygulamas\u0131 geli\u015ftirebilece\u011fimizi ad\u0131m ad\u0131m inceledik. Django REST Framework ile g\u00fc\u00e7l\u00fc ve \u00f6l\u00e7eklenebilir bir API olu\u015fturman\u0131n, React ile ise kullan\u0131c\u0131 dostu ve etkile\u015fimli bir aray\u00fcz in\u015fa etmenin ne kadar kolay oldu\u011funu g\u00f6rd\u00fck. Her iki teknolojinin de kendi alanlar\u0131ndaki uzmanl\u0131\u011f\u0131, bir araya geldiklerinde decoupled mimarinin sundu\u011fu t\u00fcm avantajlar\u0131 ortaya \u00e7\u0131kararak geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131yor ve uygulaman\u0131n uzun vadeli s\u00fcrd\u00fcr\u00fclebilirli\u011fini sa\u011fl\u0131yor. G\u00fcvenlik, performans optimizasyonlar\u0131 ve da\u011f\u0131t\u0131m stratejileri gibi ileri d\u00fczey konulara de\u011finerek, projenizi bir sonraki seviyeye ta\u015f\u0131yacak de\u011ferli bilgiler edindiniz. Django ve React ikilisi, sadece bir To-Do uygulamas\u0131 i\u00e7in de\u011fil, ayn\u0131 zamanda b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k kurumsal uygulamalar i\u00e7in de kan\u0131tlanm\u0131\u015f, gelece\u011fe y\u00f6nelik, esnek ve g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunmaktad\u0131r. Bu rehber, kendi web geli\u015ftirme yolculu\u011funuzda size ilham vermesini ve yeni projeleriniz i\u00e7in sa\u011flam bir ba\u015flang\u0131\u00e7 noktas\u0131 olmas\u0131n\u0131 umuyoruz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<dl>\n<dt>Django REST Framework yerine Flask veya FastAPI kullanabilir miyim?<\/dt>\n<dd>Evet, kesinlikle. Django REST Framework, Django’nun ORM’i ve admin paneli gibi \u00f6zellikleriyle entegre oldu\u011fu i\u00e7in h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 sa\u011flar. Ancak Flask (Flask-RESTful veya Flask-RESTX ile) veya FastAPI (y\u00fcksek performansl\u0131 ve modern bir se\u00e7enek) gibi ba\u015fka Python tabanl\u0131 framework’leri de backend API’nizi olu\u015fturmak i\u00e7in kullanabilirsiniz. React frontend’i, backend’in hangi teknolojiyle yaz\u0131ld\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z olarak RESTful API ile ileti\u015fim kurabilir.<\/dd>\n<dt>React yerine Angular veya Vue.js tercih edebilir miyim?<\/dt>\n<dd>Elbette. React, component tabanl\u0131 mimarisi ve Virtual DOM’u ile pop\u00fcler bir se\u00e7im olsa da, Angular ve Vue.js de modern frontend geli\u015ftirme i\u00e7in harika alternatiflerdir. Her \u00fc\u00e7 k\u00fct\u00fcphane\/framework de benzer prensiplere dayan\u0131r ve API ile ileti\u015fim kurma yetene\u011fine sahiptir. Se\u00e7iminiz, projenizin gereksinimlerine, ekibinizin uzmanl\u0131\u011f\u0131na ve ki\u015fisel tercihinize ba\u011fl\u0131d\u0131r.<\/dd>\n<dt>Frontend ve backend ayn\u0131 sunucuda m\u0131 olmal\u0131?<\/dt>\n<dd>Geli\u015ftirme ortam\u0131nda ayr\u0131 sunucularda (genellikle <code>localhost:8000<\/code> ve <code>localhost:3000<\/code>) \u00e7al\u0131\u015ft\u0131r\u0131lmalar\u0131 yayg\u0131nd\u0131r. \u00dcretim ortam\u0131nda ise, genellikle frontend’in statik dosyalar\u0131 (HTML, CSS, JS) bir CDN veya Nginx gibi bir web sunucusu \u00fczerinden sunulurken, backend ayr\u0131 bir sunucuda (Gunicorn\/uWSGI arkas\u0131nda Nginx ile) \u00e7al\u0131\u015f\u0131r. Bu ayr\u0131m, her iki katman\u0131n ba\u011f\u0131ms\u0131z olarak \u00f6l\u00e7eklenmesine ve y\u00f6netilmesine olanak tan\u0131r.<\/dd>\n<dt>CORS hatas\u0131 nedir ve nas\u0131l \u00e7\u00f6z\u00fcl\u00fcr?<\/dt>\n<dd>CORS (Cross-Origin Resource Sharing), bir web sayfas\u0131n\u0131n ba\u015fka bir “origin”den (farkl\u0131 bir alan ad\u0131, protokol veya port) kaynaklar\u0131 talep etmesini k\u0131s\u0131tlayan bir web taray\u0131c\u0131s\u0131 g\u00fcvenlik mekanizmas\u0131d\u0131r. Bizim \u00f6rne\u011fimizde, React frontend (<code>localhost:3000<\/code>) Django backend’ine (<code>localhost:8000<\/code>) istek g\u00f6nderdi\u011finde bu bir CORS hatas\u0131na neden olabilir. Django taraf\u0131nda <code>django-cors-headers<\/code> k\u00fct\u00fcphanesini kurup yap\u0131land\u0131rarak bu hatay\u0131 \u00e7\u00f6zd\u00fck. \u00dcretimde <code>CORS_ALLOWED_ORIGINS<\/code> ayar\u0131n\u0131 kullanarak sadece g\u00fcvenilir frontend adreslerine izin vermelisiniz.<\/dd>\n<dt>Mobil uygulama geli\u015ftirmek i\u00e7in bu mimari uygun mu?<\/dt>\n<dd>Evet, kesinlikle uygun. Bu decoupled mimari, ayn\u0131 Django backend API’sini kullanarak React Native (mobil uygulamalar i\u00e7in React tabanl\u0131 bir framework) ile iOS ve Android i\u00e7in mobil uygulamalar geli\u015ftirebilece\u011finiz anlam\u0131na gelir. API’niz, mobil uygulaman\u0131z i\u00e7in de veri kayna\u011f\u0131 olarak hizmet verebilir, b\u00f6ylece backend kodunu yeniden yazman\u0131za gerek kalmaz. Bu, tam y\u0131\u011f\u0131n (full-stack) geli\u015ftiriciler i\u00e7in olduk\u00e7a verimli bir yakla\u015f\u0131md\u0131r.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Django ve React ile Etkile\u015fimli To-Do Uygulamas\u0131 Nas\u0131l Geli\u015ftirilir? Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-32430","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?<\/title>\n<meta name=\"description\" content=\"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn art\u0131yor. Dinamik, h\u0131zl\u0131 ve etkile\u015fimli uygulamalar olu\u015fturmak i\u00e7in do\u011fru teknoloji kombinasyonunu se\u00e7mek kritik \u00f6nem ta\u015f\u0131yor. Peki, hem sa\u011flam bir arka plan (backend) hem de zengin bir kullan\u0131c\u0131 aray\u00fcz\u00fc (frontend) sunan bir To-Do uygulamas\u0131 geli\u015ftirmek m\u00fcmk\u00fcn m\u00fc? Bu makalede, Python tabanl\u0131 g\u00fc\u00e7l\u00fc Django framework'\u00fcn\u00fc ve JavaScript'in pop\u00fcler k\u00fct\u00fcphanesi React'\u0131 bir araya getirerek, s\u0131f\u0131rdan modern bir To-Do uygulamas\u0131 nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli bilgiler sunacak, b\u00f6ylece projelerinizi bir \u00fcst seviyeye ta\u015f\u0131yabileceksiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?\" \/>\n<meta property=\"og:description\" content=\"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn art\u0131yor. Dinamik, h\u0131zl\u0131 ve etkile\u015fimli uygulamalar olu\u015fturmak i\u00e7in do\u011fru teknoloji kombinasyonunu se\u00e7mek kritik \u00f6nem ta\u015f\u0131yor. Peki, hem sa\u011flam bir arka plan (backend) hem de zengin bir kullan\u0131c\u0131 aray\u00fcz\u00fc (frontend) sunan bir To-Do uygulamas\u0131 geli\u015ftirmek m\u00fcmk\u00fcn m\u00fc? Bu makalede, Python tabanl\u0131 g\u00fc\u00e7l\u00fc Django framework'\u00fcn\u00fc ve JavaScript'in pop\u00fcler k\u00fct\u00fcphanesi React'\u0131 bir araya getirerek, s\u0131f\u0131rdan modern bir To-Do uygulamas\u0131 nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli bilgiler sunacak, b\u00f6ylece projelerinizi bir \u00fcst seviyeye ta\u015f\u0131yabileceksiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-21T13:24:16+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"28 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?\",\"datePublished\":\"2025-10-21T13:24:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/\"},\"wordCount\":4401,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/\",\"name\":\"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-21T13:24:16+00:00\",\"description\":\"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn art\u0131yor. Dinamik, h\u0131zl\u0131 ve etkile\u015fimli uygulamalar olu\u015fturmak i\u00e7in do\u011fru teknoloji kombinasyonunu se\u00e7mek kritik \u00f6nem ta\u015f\u0131yor. Peki, hem sa\u011flam bir arka plan (backend) hem de zengin bir kullan\u0131c\u0131 aray\u00fcz\u00fc (frontend) sunan bir To-Do uygulamas\u0131 geli\u015ftirmek m\u00fcmk\u00fcn m\u00fc? Bu makalede, Python tabanl\u0131 g\u00fc\u00e7l\u00fc Django framework'\u00fcn\u00fc ve JavaScript'in pop\u00fcler k\u00fct\u00fcphanesi React'\u0131 bir araya getirerek, s\u0131f\u0131rdan modern bir To-Do uygulamas\u0131 nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli bilgiler sunacak, b\u00f6ylece projelerinizi bir \u00fcst seviyeye ta\u015f\u0131yabileceksiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?","description":"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn art\u0131yor. Dinamik, h\u0131zl\u0131 ve etkile\u015fimli uygulamalar olu\u015fturmak i\u00e7in do\u011fru teknoloji kombinasyonunu se\u00e7mek kritik \u00f6nem ta\u015f\u0131yor. Peki, hem sa\u011flam bir arka plan (backend) hem de zengin bir kullan\u0131c\u0131 aray\u00fcz\u00fc (frontend) sunan bir To-Do uygulamas\u0131 geli\u015ftirmek m\u00fcmk\u00fcn m\u00fc? Bu makalede, Python tabanl\u0131 g\u00fc\u00e7l\u00fc Django framework'\u00fcn\u00fc ve JavaScript'in pop\u00fcler k\u00fct\u00fcphanesi React'\u0131 bir araya getirerek, s\u0131f\u0131rdan modern bir To-Do uygulamas\u0131 nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli bilgiler sunacak, b\u00f6ylece projelerinizi bir \u00fcst seviyeye ta\u015f\u0131yabileceksiniz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/","og_locale":"tr_TR","og_type":"article","og_title":"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?","og_description":"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn art\u0131yor. Dinamik, h\u0131zl\u0131 ve etkile\u015fimli uygulamalar olu\u015fturmak i\u00e7in do\u011fru teknoloji kombinasyonunu se\u00e7mek kritik \u00f6nem ta\u015f\u0131yor. Peki, hem sa\u011flam bir arka plan (backend) hem de zengin bir kullan\u0131c\u0131 aray\u00fcz\u00fc (frontend) sunan bir To-Do uygulamas\u0131 geli\u015ftirmek m\u00fcmk\u00fcn m\u00fc? Bu makalede, Python tabanl\u0131 g\u00fc\u00e7l\u00fc Django framework'\u00fcn\u00fc ve JavaScript'in pop\u00fcler k\u00fct\u00fcphanesi React'\u0131 bir araya getirerek, s\u0131f\u0131rdan modern bir To-Do uygulamas\u0131 nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli bilgiler sunacak, b\u00f6ylece projelerinizi bir \u00fcst seviyeye ta\u015f\u0131yabileceksiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-21T13:24:16+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"28 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?","datePublished":"2025-10-21T13:24:16+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/"},"wordCount":4401,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/","url":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/","name":"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-21T13:24:16+00:00","description":"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 beklentileri her ge\u00e7en g\u00fcn art\u0131yor. Dinamik, h\u0131zl\u0131 ve etkile\u015fimli uygulamalar olu\u015fturmak i\u00e7in do\u011fru teknoloji kombinasyonunu se\u00e7mek kritik \u00f6nem ta\u015f\u0131yor. Peki, hem sa\u011flam bir arka plan (backend) hem de zengin bir kullan\u0131c\u0131 aray\u00fcz\u00fc (frontend) sunan bir To-Do uygulamas\u0131 geli\u015ftirmek m\u00fcmk\u00fcn m\u00fc? Bu makalede, Python tabanl\u0131 g\u00fc\u00e7l\u00fc Django framework'\u00fcn\u00fc ve JavaScript'in pop\u00fcler k\u00fct\u00fcphanesi React'\u0131 bir araya getirerek, s\u0131f\u0131rdan modern bir To-Do uygulamas\u0131 nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli bilgiler sunacak, b\u00f6ylece projelerinizi bir \u00fcst seviyeye ta\u015f\u0131yabileceksiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32430"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32430\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":32430,"date":"2025-10-21T16:24:16","date_gmt":"2025-10-21T13:24:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/"},"modified":"2025-10-21T16:24:16","modified_gmt":"2025-10-21T13:24:16","slug":"temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-neden-django-ve-react-birlikte-harika-bir-ikili\/","title":{"rendered":"Temel Kavramlar: Neden Django ve React Birlikte Harika Bir \u0130kili?"},"content":{"rendered":"