React, kullanıcı arayüzlerini yeniden kullanılabilir bileşenlerle geliştirmeyi sağlayan bir JavaScript kütüphanesidir. Ürün kartları, arama alanları ve etkileşimli formlar gibi parçaları ayrı bileşenler hâlinde düzenleyebilirsiniz. Bu rehberde temel kavramları, güncel başlangıç seçeneklerini ve Vite ile kurulumu ele alıyoruz.
React hangi işleri kolaylaştırır?
Bir e-ticaret arayüzünde aynı ürün kartını birçok ürün için kullanmak, arama metnine göre listeyi değiştirmek veya sepetteki öğe sayısını göstermek React ile düzenlenebilecek işlerdir. React tek başına bütün uygulama ihtiyaçlarını karşılamaz; yönlendirme, sunucu ve veri saklama gibi konular ayrıca tasarlanır.
Basit ve çoğunlukla sabit içerik gösteren bir sayfada React kullanmak zorunlu değildir. Araç seçimini etkileşim ihtiyacına, ekip deneyimine ve bakım maliyetine göre yapmak daha yararlıdır.
Bileşen, JSX, props ve state
- Bileşen: Arayüzün görünümünü ve davranışını tanımlayan parçadır. Bir düğme kadar küçük veya bir sayfa kadar büyük olabilir.
- JSX: JavaScript içinde arayüz işaretlemesi yazmayı kolaylaştıran sözdizimidir; HTML ile birebir aynı değildir.
- Props: Üst bileşenden alt bileşene aktarılan girdilerdir. Örneğin ürün adı ve fiyatı.
- State: Bileşenin etkileşimler arasında hatırladığı durumdur. Örneğin seçili kategori veya sepetteki ürünler.
Props ile gelen bir ürünü göstermek ve düğmeye basıldığında state’i güncellemek farklı sorumluluklardır. Bu ayrım, verinin nerede tutulacağını düşünmenize yardımcı olur. Başlangıç için React’in resmî hızlı başlangıç kılavuzunu kullanabilirsiniz.
Sanal DOM her zaman daha hızlı mı?
React, bileşenleri değerlendirerek sonraki arayüzü hesaplar ve gerekli DOM değişikliklerini uygular. Ancak her DOM değişikliği bütün sayfanın yeniden çizildiği anlamına gelmez; React kullanmak da otomatik bir hız garantisi sağlamaz. Büyük listeler, gereksiz hesaplamalar ve ağır görseller uygulamayı yavaşlatabilir.
Bu yüzden performansı gerçek kullanıcı akışında ölçmek gerekir. Render ve commit aşamalarının açıklaması, bileşenin yeniden çalışması ile tarayıcıdaki DOM değişikliğinin farkını anlamayı kolaylaştırır.
React’e başlamadan önce
HTML, CSS ve temel JavaScript bilgisi işinizi kolaylaştırır. Özellikle fonksiyonlar, diziler, nesneler, modüller ve olaylar üzerinde pratik yapın. Her kavramı bitirmeyi beklemek yerine küçük bir arayüz kurup ihtiyaç duydukça ilerleyebilirsiniz.
Güncel proje oluşturma seçenekleri
React’in resmî belgeleri yeni uygulamalar için bir framework ile başlamayı önerir. Bu yaklaşım yönlendirme ve veri yükleme gibi kararları birlikte ele alır. Temelleri öğrenmek veya özel bir kurulum hazırlamak için Vite gibi bir geliştirme aracı da kullanılabilir; bu durumda ek uygulama ihtiyaçlarını kendiniz planlarsınız.
Create React App: React ekibi Şubat 2025’te bu aracın yeni uygulamalar için kullanımdan kaldırıldığını duyurdu. Eski eğitimlerdeki kurulumları doğrudan kopyalamak yerine güncel başlangıç seçeneklerini ve resmî duyuruyu kontrol edin.
Vite ile öğrenme projesi kurma
Bilgisayarınıza Node.js kurun. Kullandığınız sürümün Vite’ın güncel Node.js gereksinimlerini karşıladığını doğrulayın. Ardından aşağıdaki komutları sırayla çalıştırın:
npm create vite@latest ilk-react-projem -- --template react
cd ilk-react-projem
npm install
npm run devİlk komut React şablonuyla proje oluşturur. İkinci komut klasöre girer, üçüncü komut bağımlılıkları kurar, son komut geliştirme sunucusunu başlatır. Terminalde gösterilen yerel adresi tarayıcıda açın. Adres çoğunlukla 5173 portunu kullanır; doluysa farklı bir port seçilebilir.
Bu adımlar öğrenme ortamı içindir. Uygulamayı internete açmak ayrı bir dağıtım işlemidir. Üretim çıktısını kontrol etmek için projenizde npm run build çalıştırabilirsiniz.
İlk proje: Aranabilir ürün listesi
ProductCardbileşenine ürün adı ve fiyatını props ile verin.ProductListiçinde birkaç örnek ürünü listeleyin.- Bir arama alanı ekleyip girilen metni state’te tutun.
- Listeyi arama metnine göre filtreleyin.
- Sonuç yoksa açıklayıcı bir mesaj gösterin.
Bu alıştırma, tek bir ekranda bileşenleri, veri akışını ve kullanıcı etkileşimini çalıştırır. Başarı ölçütünü somut tutun: Arama değiştiğinde doğru ürünler görünmeli; boş sonuç anlaşılır olmalı; form klavyeyle kullanılabilmelidir.
Sık sorulan sorular
React bir programlama dili mi?
Hayır. JavaScript kütüphanesidir. JavaScript veya TypeScript ile kullanılabilir.
React öğrenmek iş bulmayı garanti eder mi?
Hayır. Proje deneyimi, temel web bilgisi, problem çözme ve başvurulan işin gereksinimleri de önemlidir. Küçük ama tamamlanmış bir projeyi açıklayabilmek, yalnızca araç isimlerini sıralamaktan daha anlamlıdır.
Kurulumda hata alırsam neyi kontrol etmeliyim?
Node.js sürümünü, terminalde doğru klasörde olduğunuzu ve ilk hata mesajını kontrol edin. Boş sayfada tarayıcı konsolunu inceleyin. Paketleri rastgele değiştirerek ilerlemek yerine hatanın hangi adımdan kaynaklandığını belirleyin.
