TÜRKÇE
ENGLISH
Genel Bilgi
| Birim | REKTÖRLÜK |
| Alan Dışı Dersler Koordinatörlüğü | |
| Kod | SD0784 |
| Ad | React JS ile Front-End Geliştirme |
| Dönem | 2026-2027 Eğitim-Öğretim Yılı |
| Dönem | Güz ve Bahar |
| Süre (T+U) | 2-0 (T-U) (17 Hafta) |
| AKTS | 3 AKTS |
| Yerel Kredi | 2 Yerel Kredi |
| Eğitim Dil | Türkçe |
| Seviye | Üniversite Dersi |
| Etiket | ÜOD Üniversite Ortak Ders |
| Öğretim Şekli | Yüz Yüze Öğretim |
| Bilgi Paketi Koordinatörü | Öğr. Gör. ERKAN KAYNAK |
| Dersin Öğretim Elemanı |
Öğr. Gör. ERKAN KAYNAK
(Güz)
(A Grubu)
(Sor. Öğr. Ele.)
|
Dersin Amacı / Hedefi
Bu dersin amacı, öğrencilere React kullanarak modern web arayüzleri geliştirebilme becerisi kazandırmak, bileşen tabanlı yazılım geliştirme yaklaşımını öğretmek ve temel düzeyde etkileşimli web uygulamaları geliştirebilmelerini sağlamaktır.
Dersin İçeriği
Bu derste modern web uygulamalarının geliştirilmesinde yaygın olarak kullanılan React Javascript kütüphanesinin temel yapısı incelenmektedir. Öğrenciler React'ın çalışma mantığını, bileşen (Component) yapısını, JSX sözdizimini, Props ve State kavramlarını, olay yönetimini, koşullu gösterimi, listeleme işlemlerini, Hook yapısını ve React Router kullanımını öğrenirler. Ders kapsamında küçük ölçekli tek sayfa (Single Page Application - SPA) web uygulamaları geliştirilerek teorik bilgiler uygulamayla pekiştirilir.
Dersin Ön Koşulu
Kaynaklar
https://enformatik.cu.edu.tr
Notlar
https://react.dev
Dersin Öğrenme Çıktıları
| Sıra | Dersin Öğrenme Çıktıları |
|---|---|
| ÖÇ01 | Modern web uygulamalarının çalışma mantığını açıklar. |
| ÖÇ02 | React JS geliştirme ortamını kurar ve yapılandırır. |
| ÖÇ03 | React uygulaması oluşturur ve proje yapısını yönetir. |
| ÖÇ04 | JSX sözdizimini kullanarak kullanıcı arayüzü geliştirir. |
| ÖÇ05 | React bileşenlerini oluşturur ve yeniden kullanılabilir hale getirir. |
| ÖÇ06 | Props yapısını kullanarak bileşenler arasında veri aktarımı gerçekleştirir. |
| ÖÇ07 | State kavramını kullanarak dinamik kullanıcı arayüzleri oluşturur. |
| ÖÇ08 | Olay (Event) yönetimini gerçekleştirir. |
| ÖÇ09 | Koşullu gösterim ve listeleme işlemlerini uygular. |
| ÖÇ10 | React Hook'larını temel düzeyde kullanır. |
| ÖÇ11 | Form bileşenlerini geliştirir ve kullanıcı girişlerini yönetir. |
| ÖÇ12 | React Router kullanarak çok sayfalı uygulama yapısı oluşturur. |
| ÖÇ13 | Harici API servislerinden veri alır ve görüntüler. |
| ÖÇ14 | Temel düzeyde tek sayfa web uygulaması geliştirir. |
Haftalık Akış
| Hafta | Konu | Ön Hazırlık | Yöntemler |
|---|---|---|---|
| 1 | Modern Web Teknolojilerine Giriş, SPA kavramı, React'ın ortaya çıkışı ve kullanım alanları | Literatür taraması. | Öğretim Yöntemleri: Anlatım |
| 2 | Node.js, npm, Visual Studio Code kurulumu, Vite ile ilk React projesinin oluşturulması | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 3 | React proje yapısı, JSX sözdizimi, Component kavramı | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 4 | Fonksiyonel Component'ler, Props kullanımı, Component hiyerarşisi | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 5 | State kavramı ve useState Hook'u | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 6 | Event (Olay) Yönetimi, Form elemanları ve kullanıcı etkileşimleri | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 7 | Koşullu Gösterim (Conditional Rendering), Listeleme (map), key kullanımı | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 8 | Ara Sınavlar | Ölçme Yöntemleri: Yazılı Sınav |
|
| 9 | useEffect Hook'u ve yaşam döngüsü mantığı | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 10 | API'den veri çekme (Fetch API), JSON verilerinin kullanılması | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 11 | React Router ile Sayfalar Arası Geçiş | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 12 | Basit CRUD uygulaması (Ekleme, Silme, Güncelleme, Listeleme) | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 13 | Mini Proje Geliştirme (ToDo List, Not Defteri, Film Arama vb.) | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 14 | Proje Sunumları | Materyal okuma. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 15 | Genel Tekrar ve Değerlendirme | Materyal okuma. | Öğretim Yöntemleri: Alıştırma ve Uygulama |
| 16 | Yarıyıl Sonu Sınavları | Ölçme Yöntemleri: Yazılı Sınav |
|
| 17 | Yarıyıl Sonu Sınavları | Ölçme Yöntemleri: Yazılı Sınav |
Öğrenci İş Yükü - AKTS
| Çalışmalar | Sayısı | Süresi (Saat) | İş Yükü (Saat) |
|---|---|---|---|
| Ders ile İlgili Çalışmalar | |||
| Ders (Sınav haftaları dahil değildir) | 14 | 2 | 28 |
| Sınıf Dışı Ders Çalışma (Ön çalışma, pekiştirme) | 14 | 2 | 28 |
| Değerlendirmeler ile İlgili Çalışmalar | |||
| Ödev, Proje, Diğer | 0 | 0 | 0 |
| Ara Sınavlar (Yazılı, Sözlü, vs.) | 1 | 8 | 8 |
| Yarıyıl/Yıl Sonu/Final Sınavı | 1 | 16 | 16 |
| Toplam İş Yükü (Saat) | 80 | ||
| Toplam İş Yükü / 25 (s) | 3,20 | ||
| AKTS | 3 AKTS | ||