Mini Proje: Basit To-Do Uygulaması ile React ve Node Öğrenin

Bu rehber, proje tabanlı öğrenme (Projeyle Öğrenme) yaklaşımıyla kısa sürede temel bir To-Do uygulaması geliştirmenizi sağlar. Amaç: React ile kullanıcı arayüzü oluşturmak ve Node.js/Express ile basit bir REST API kurarak tam yığın (full-stack) iş akışını görmek. React ve Node.js kombinasyonunun modern web geliştirmede yaygın kullanımına dair genel bilgiler için ilgili makalelere bakabilirsiniz.

Kaynak önerileri: W3 — Node.js ve React ile Modern Web Uygulamaları, DEV Community — Full-Stack To-Do Walkthrough, ve React projesi oluşturma hakkında resmi kılavuz için Microsoft Learn.

Bu projede ne öğreneceksiniz?

React bileşenleri ve temel state yönetimi.
Node.js ve Express ile basit REST API oluşturma.
Frontend-backend arasındaki veri akışı (fetch/HTTP).
Temel hata ayıklama ve geliştirme iş akışları.

Gereksinimler

Temel JavaScript bilgisi.
Node.js ve npm/yarn kurulu bir geliştirme ortamı.
Tercih ettiğiniz bir metin editörü (ör. VS Code veya benzeri).

Proje Planı ve Özellikler

Basit To-Do uygulaması için minimum özellikler:

Görev listeleme (GET /api/tasks).
Yeni görev ekleme (POST /api/tasks).
Görevi tamamlandı olarak işaretleme veya güncelleme (PUT /api/tasks/:id).
Görevi silme (DELETE /api/tasks/:id).

Öğrenme amaçlı başlangıçta veriler sunucuda basit bir dizi (in-memory array) olarak tutulabilir; kalıcı depolama için daha sonra MongoDB veya başka bir veritabanı eklenmesi önerilir.

Adım Adım Rehber

1) Proje yapısını oluşturun

Yeni bir klasör açın, örneğin "todo-app". İçinde iki klasör olacak: server (Node/Express) ve client (React).

Komut örneği (kısa yol): "mkdir todo-app && cd todo-app" ardından sunucu için "mkdir server" ve frontend için "npx create-react-app client" veya tercih ettiğiniz başlangıç aracı ile React projesi oluşturun. Microsoft'un React proje oluşturma dokümanında create-react-app kullanımı anlatılmaktadır: Microsoft Learn.

2) Basit bir Express backend kurun

Sunucu klasöründe başlatın: "npm init -y" ve gerekli paketleri kurun: "npm install express cors". Geliştirme için nodemon kullanmak isterseniz "npm install --save-dev nodemon" komutunu ekleyin.

Server giriş dosyanız (ör. server.js) temel olarak şu işlevleri sağlayacaktır:

Express app oluşturma ve JSON gövdesi okumayı etkinleştirme (express.json()).
CORS için uygun middleware ekleme (cors paketiyle app.use(cors())).
In-memory bir tasks dizisi tanımlama, örnek öğe formatı: { "id": 1, "title": "Alışveriş", "completed": false }.
GET /api/tasks — tüm görevleri döndürür.
POST /api/tasks — gövdeden gelen title ile yeni görev ekler ve yeni görevi döndürür.
PUT /api/tasks/:id — görev güncelleme (örn. completed değerini değiştirme).
DELETE /api/tasks/:id — görevi siler.

Sunucuyu başlatma örneği: "node server.js" veya nodemon ile "npx nodemon server.js". Geliştirme sırasında port olarak 5000 tercih edilebilir.

3) React frontend geliştirin

React tarafında temel bileşen yapısı şu şekilde olabilir:

App: Uygulamanın kök bileşeni; görevleri sunucudan çeker ve state'te tutar.
TaskList: Görev listesini alır ve sıralar.
TaskItem: Tek bir görevi gösterir; tamamlandı ve silme işlemlerini tetikler.
TaskForm: Yeni görev eklemek için basit bir form içerir.

Sunucudan veri çekme örneği (kısa açıklama): fetch('http://localhost:5000/api/tasks').then(res => res.json()).then(data => setTasks(data)).

Yeni görev eklemek için POST isteği gönderirken Content-Type: application/json ve gövde olarak { "title": "Yeni görev" } gönderin. Güncelleme ve silme işlemleri için PUT/DELETE istekleri kullanın.

4) Birleştirme ve test

Hem backend hem frontend çalışıyorken tarayıcıda React uygulamasını açın (genellikle http://localhost:3000). Aşağıdakileri kontrol edin:

Listeleme: Sayfa açıldığında sunucudan görevler geliyor mu?
Ekleme: Form ile yeni görev ekleniyor ve listede gözüküyor mu?
Güncelleme/Silme: Tamamlandı işareti ve silme çalışıyor mu?

Eğer CORS kaynaklı sorun yaşarsanız, sunucuda app.use(cors()) çağrısını kontrol edin veya React tarafında proxy yapılandırması kullanın.

5) Geliştirme ve genişletme fikirleri

Veri kalıcılığı için MongoDB veya başka bir veritabanı ekleyin.
Kullanıcı kimlik doğrulaması (basit JWT tabanlı oturum yönetimi) ekleyin.
Form doğrulama, hata mesajları ve kullanıcı deneyimini iyileştirin.
Uygulamayı production için paketleyip dağıtın (ör. Vercel/Netlify frontend, Heroku/DigitalOcean backend veya birleştirilmiş sunucu). Daha gelişmiş dağıtım süreçleri için resmi kaynaklardan yararlanın.

Pratik İpuçları, Kontrol Listesi ve Hata Ayıklama

Hızlı kontrol listesi

Node.js ve npm yüklü mü?
Server çalışıyor mu (örn. http://localhost:5000/api/tasks erişimi)?
React uygulaması http://localhost:3000 üzerinde çalışıyor mu?
Tarayıcı konsol ve ağ (network) sekmesinde hata var mı?

Yaygın hatalar ve çözümleri

Network hataları: Sunucunun çalıştığını ve doğru porta dinlediğini kontrol edin.
CORS sorunları: Express tarafında CORS middleware uygulandığından emin olun.
Fetch istekleri başarısızsa URL'leri ve HTTP methodlarını tekrar kontrol edin.

Kaynaklar ve İleri Okuma

React ve Node.js entegrasyonunun modern web geliştirme içindeki rolü hakkında daha fazla bilgi için W3 makalesine bakabilirsiniz: https://www.w3.net.tr/blog/nodejs-react-ile-modern-web-uygulamalari-gelistirme. Tam yığın To-Do uygulaması adım adım rehberi için DEV Community örneği faydalı bir yürüyüştür: https://dev.to/codingsimba/build-a-full-stack-todo-app-with-react-nodejs-the-complete-walkthrough-5gb0. React projesi başlatma hakkında resmi yol gösterici için Microsoft Learn rehberine bakabilirsiniz: https://learn.microsoft.com/tr-tr/visualstudio/javascript/tutorial-create-react-app?view=visualstudio.

Sonuç

Bu mini proje, React ve Node.js ile tam yığın bir uygulamanın temel akışını öğrenmek için iyi bir başlangıçtır. Projeyi parçalayarak adım adım ilerlemek, gerçek uygulama örnekleri üzerinden öğrenmeyi hızlandırır. Temel sürüm çalıştıktan sonra veritabanı entegrasyonu, kimlik doğrulama ve dağıtım gibi konularla ilerleyerek becerilerinizi genişletebilirsiniz.

Not: Bu rehber eğitim amaçlıdır; üretim ortamına taşımadan önce güvenlik, doğrulama ve performans optimizasyonlarına odaklanmanız önerilir.