- Konu sahibi
- #1
React, kullanıcı arayüzleri oluşturmak için kullanılan, bileşen tabanlı bir JavaScript kütüphanesidir. Özellikle etkileşimli web uygulamalarında ekranı küçük ve yeniden kullanılabilir parçalara ayırmayı sağlar. Bir butona tıklanınca sayaç artırmak, form verisini ekranda göstermek veya kullanıcı oturumuna göre farklı içerik sunmak gibi değişiklikler, doğrudan çok sayıda DOM işlemi yazmak yerine bileşen durumu değiştirilerek yönetilir.
React tek başına bir sunucu, veritabanı veya yönlendirme sistemi değildir. Arayüz katmanını oluşturur. İhtiyaca göre yönlendirme, veri çekme, form yönetimi ve stil çözümü gibi konularda ek kütüphaneler veya uygulamanın kendi JavaScript kodu kullanılabilir.
React uygulaması, arayüzü bileşen adı verilen fonksiyonlara böler. Bir bileşen genellikle kendisine verilen
Bileşenin kullandığı veri değiştiğinde React, bileşeni yeniden değerlendirir ve ekranda değişmesi gereken kısmı günceller. Geliştirici çoğu durumda her DOM düğümünü elle bulup değiştirmez; arayüzün hangi veriye karşılık geldiğini tanımlar. Bu yaklaşım, özellikle çok sayıda etkileşimli bileşen içeren ekranlarda kodun izlenmesini kolaylaştırır.
Bir bileşenin davranışını anlamak için verinin nereden geldiğini ayırmak önemlidir:
Aşağıdaki bileşen, başlangıçta sıfır olan bir sayacı ekrana çıkarır. Butona basıldığında state güncellenir ve yeni değer yeniden gösterilir:
Bu bileşenin çalışması için bir React projesindeki uygun JavaScript veya JSX dosyasına eklenip uygulamanın bileşen ağacında kullanılması gerekir. Başarılı sonuçta ekranda
Örnekte
React bileşenleri sunucuda HTML ön üretimi veya uygun framework’lerde sunucu bileşenleri gibi akışlarda da çalışabilir. Bu, React’in tek başına veritabanı, dağıtım ve bütün uygulama altyapısını sağladığı anlamına gelmez. Kullanılan renderer ve framework’ün sorumluluklarını ayrı değerlendirin.
Sayfa; filtreler, canlı formlar, paneller, sepetler veya oturum durumları gibi sık etkileşimler içeriyorsa bileşen yaklaşımı yararlı olur. Aynı arayüz parçasını farklı ekranlarda kullanmak istiyorsanız bileşenlere ayırmak bakım ve tutarlılık sağlar.
Buna karşılık yalnızca birkaç metin ve bağlantıdan oluşan, etkileşimi çok az olan basit bir sayfa için React ek bir yapılandırma ve öğrenme maliyeti getirebilir. React seçmeden önce uygulamanın bileşenlere ayrılma ihtiyacını, veri akışını ve ekipteki JavaScript bilgisini değerlendirin.
Evet. React bileşenleri JavaScript fonksiyonlarıdır; hesaplama, koşul, dizi işlemleri ve yardımcı fonksiyonlar normal JavaScript ile yazılabilir. React yalnızca arayüzün nasıl üretileceği ve güncelleneceği kısmını düzenler.
Değişkenler, fonksiyonlar, diziler, nesneler, koşullar,
React’in bileşen modeli farklı hedeflerde kullanılabilir. React DOM web tarayıcısı öğelerini, React Native ise platformun yerel bileşenlerini kullanır. Mantığın bir kısmı paylaşılabilse de HTML/CSS kullanan her web bileşeni doğrudan yerel mobil arayüze dönüşmez.
React tek başına bir sunucu, veritabanı veya yönlendirme sistemi değildir. Arayüz katmanını oluşturur. İhtiyaca göre yönlendirme, veri çekme, form yönetimi ve stil çözümü gibi konularda ek kütüphaneler veya uygulamanın kendi JavaScript kodu kullanılabilir.
React nasıl çalışır?
React uygulaması, arayüzü bileşen adı verilen fonksiyonlara böler. Bir bileşen genellikle kendisine verilen
props değerlerini ve kendi state durumunu kullanarak JSX döndürür. JSX, JavaScript içinde HTML’e benzeyen bir yazım biçimidir; normal projelerde derleme sırasında JavaScript’e dönüştürülür. React’i JSX kullanmadan createElement gibi API’lerle de kullanabilirsiniz.Bileşenin kullandığı veri değiştiğinde React, bileşeni yeniden değerlendirir ve ekranda değişmesi gereken kısmı günceller. Geliştirici çoğu durumda her DOM düğümünü elle bulup değiştirmez; arayüzün hangi veriye karşılık geldiğini tanımlar. Bu yaklaşım, özellikle çok sayıda etkileşimli bileşen içeren ekranlarda kodun izlenmesini kolaylaştırır.
Props ve state farkı
Bir bileşenin davranışını anlamak için verinin nereden geldiğini ayırmak önemlidir:
| Kavram | Kaynak | Değiştirme yöntemi | Tipik kullanım |
|---|---|---|---|
| Props | Üst bileşen | Alt bileşen doğrudan değiştirmez | Başlık, kullanıcı adı, ayar |
| State | Bileşenin kendi durumu | State güncelleme fonksiyonu | Sayaç, açık/kapalı durum, form alanı |
Somut React örneği
Aşağıdaki bileşen, başlangıçta sıfır olan bir sayacı ekrana çıkarır. Butona basıldığında state güncellenir ve yeni değer yeniden gösterilir:
Kod:
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<section>
<p>Sayaç: {count}</p>
<button type="button" onClick={() => setCount(count + 1)}>
Artır
</button>
</section>
);
}Bu bileşenin çalışması için bir React projesindeki uygun JavaScript veya JSX dosyasına eklenip uygulamanın bileşen ağacında kullanılması gerekir. Başarılı sonuçta ekranda
Sayaç: 0 ve Artır düğmesi görünür; düğmeye her basışta sayı artar. Ekran değişmiyorsa önce bileşenin gerçekten sayfaya eklenip eklenmediği, useState içe aktarmasının doğru olduğu ve olay işleyicisinin fonksiyon olarak verildiği kontrol edilmelidir.Örnekte
count mevcut değeri, setCount ise yeni değeri bildiren güncelleme fonksiyonudur. Bu örnekte count const ile tanımlandığından ona yeniden atamak JavaScript hatasıdır. Bir state nesnesinin içini doğrudan değiştirmek de React’e doğru güncelleme sinyalini sağlamaz. Güncelleme fonksiyonu çağrılmalıdır.React bileşenleri sunucuda HTML ön üretimi veya uygun framework’lerde sunucu bileşenleri gibi akışlarda da çalışabilir. Bu, React’in tek başına veritabanı, dağıtım ve bütün uygulama altyapısını sağladığı anlamına gelmez. Kullanılan renderer ve framework’ün sorumluluklarını ayrı değerlendirin.
React ne zaman tercih edilir?
Sayfa; filtreler, canlı formlar, paneller, sepetler veya oturum durumları gibi sık etkileşimler içeriyorsa bileşen yaklaşımı yararlı olur. Aynı arayüz parçasını farklı ekranlarda kullanmak istiyorsanız bileşenlere ayırmak bakım ve tutarlılık sağlar.
Buna karşılık yalnızca birkaç metin ve bağlantıdan oluşan, etkileşimi çok az olan basit bir sayfa için React ek bir yapılandırma ve öğrenme maliyeti getirebilir. React seçmeden önce uygulamanın bileşenlere ayrılma ihtiyacını, veri akışını ve ekipteki JavaScript bilgisini değerlendirin.
Sık yapılan hatalar
- State'i doğrudan değiştirmek: Güncellemeyi React'e bildirmek için setter fonksiyonunu kullanın.
- Her şeyi tek bileşene koymak: Büyük bileşenleri anlamlı sorumluluklara ayırın; ancak her satır için ayrı bileşen üretmeyin.
- Props ile state'i karıştırmak: Üst bileşenden gelen değerleri alt bileşende doğrudan değiştirmeye çalışmayın.
- Liste öğelerine kararlı anahtar vermemek:
mapile üretilen öğelere, öğe sırasına körü körüne bağlı olmayan uygun birkeydeğeri verin. - React'i backend sanmak: Veri saklama, kimlik doğrulama ve sunucu işlemleri için ayrıca uygun bir backend çözümü gerekir.
Kaynaklar
Sık sorulan sorular
React ile normal JavaScript birlikte kullanılabilir mi?
Evet. React bileşenleri JavaScript fonksiyonlarıdır; hesaplama, koşul, dizi işlemleri ve yardımcı fonksiyonlar normal JavaScript ile yazılabilir. React yalnızca arayüzün nasıl üretileceği ve güncelleneceği kısmını düzenler.
React öğrenmek için önce ne bilinmeli?
Değişkenler, fonksiyonlar, diziler, nesneler, koşullar,
map ve temel DOM olayları bilinmelidir. JSX, props ve state konularına geçmeden önce modern JavaScript'in bu temellerini uygulayabilmek öğrenme sürecini kolaylaştırır.React mobil uygulama geliştirmek için de kullanılır mı?
React’in bileşen modeli farklı hedeflerde kullanılabilir. React DOM web tarayıcısı öğelerini, React Native ise platformun yerel bileşenlerini kullanır. Mantığın bir kısmı paylaşılabilse de HTML/CSS kullanan her web bileşeni doğrudan yerel mobil arayüze dönüşmez.
