Uygulamamızdan örnek React kartları

Daha fazla ücretsiz kart almak için uygulamamızı App Store veya Google Play'den indirin veya tüm kartlara erişim için abone olun.

JSX nedir ve React neden bunu kullanır?

JSX, JavaScript için bir sözdizimi eklentisidir ve JavaScript kodunda doğrudan HTML yapılarını yazmayı sağlar. Bu, React.js'in üzerine kurulu olduğu temel unsurlardan biridir. Bu yüzden JSX, React ekosisteminde çok önemlidir.

React, birkaç nedenle JSX'yi kullanır:

1. Kod temizliği: JSX, kod geliştirme sürecini basitleştirir ve geliştiricilere HTML yapılarını direk JavaScript'e yerleştirme imkanı sağlar. JSX olmadan, React'te kullanıcı arayüzleri oluşturmak önemli ölçüde daha karmaşık olurdu.

2. Kullanım kolaylığı: JSX, JavaScript'in HTML'ye benzemesini sağlar, bu da onu kullanmayı özellikle HTML ile zaten aşina olan geliştiriciler için daha kolay hale getirir.

3. Güvenlik: JSX, eşsiz element gömme yoluyla XSS (Cross-Site Scripting) gibi her türlü saldırıya karşı kodu otomatik olarak güvence altına alır.

4. Performans: JSX kodu, performans için optimize edilmiştir. JavaScript sözdizimine çevrilir, bu da web tarayıcıları tarafından daha hızlı yorumlanır.

Teknik olarak, JSX `React.createElement(component, props, ...children)` fonksiyonu için daha fazla bir sözdizimi şekeri olup, bundan başka bir şey değildir.

Sanal DOM nedir ve avantajları nelerdir?

Sanal DOM veya Belge Nesne Modeli (DOM) 'nin sanal modeli, React gibi belirli JavaScript kütüphanelerinde kullanılan bir konsepttir. Gerçek DOM'un hafif bir kopyasıdır ve gerçek DOM'dan bağımsız olarak hafızada saklanır ve güncellenir.

Sanal DOM'un ana avantajları şunlardır:

1. Güncellemeler daha hızlıdır. Sanal DOM, gerçek DOM'a kıyasla daha hafiftir ve daha az işlem ondan geçer. Sonuç olarak, güncelleme işlemleri daha hızlı gerçekleştirilir.

2. Gerçek DOM üzerindeki yükü azaltır. Tüm değişiklikler önce sanal DOM'da işlenir ve ardından bir uzlaştırma süreci aracılığıyla seçilen değişiklikler gerçek DOM'a taşınır. Bu, ağır, sık DOM güncellemelerinin önüne geçebilir.

3. Render sürecini optimize eder. React, Sanal DOM'u kullanarak, gerçek DOM'da güncellemeleri gerçekleştirmenin en verimli yolunu hesaplayabilir. Bu, gerekli işlemlerin sayısını azaltır ve render performansını iyileştirir.

4. Kodlama daha basit hale gelir. Geliştiriciler, her değişiklikten sonra tüm sayfanın yeniden render edilmiş gibi kodlayabilirler. React, sanal ve gerçek DOM'u senkronize etmek için gerekli minimum iş yükünü optimize etme sürecini üstlenir.

Props nedir ve React bileşenlerine nasıl geçirilir?

"Özellikler" (properties'den), React kütüphanesindeki bileşenlerin özellikleridir. Bir bileşenden diğerine veri yollamak için kullanırlar. Bunlar, bir bileşenin ebeveyn bileşenden aldığı verilerdir ve genellikle bileşen çağrıldığında geçirilirler.

Props değiştirilemezdir, bu da bir bileşenin aldığı prop değerlerini değiştirmemesi ancak sadece onları okuması gerektiği anlamına gelir.

Prop'lar tek yönlü olarak (yukarıdan aşağıya) geçirilir, yani ebeveyn bileşenlerden çocuk bileşenlere. HTML öğelerine niteliklerin geçirilmesine benzer görünür.

Prop'ları kullanmanın bir örneği:

function Welcome(props) {
  return <h1>Merhaba, {props.name}</h1>;
}

function App() {
  return <Welcome name = "Christopher"/>;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Yukarıdaki örnekte, bir `name` prop'u bekleyen bir `Welcome` bileşeni oluşturuyoruz. Sonra, `App` bileşeninde `Welcome` bileşeninin bir örneğini oluştururuz ve ona "Christopher" değerine sahip bir `name` prop'u veririz. Sonuç olarak, Welcome bileşenini kullandığımız yerde "Merhaba, Christopher" metni görüntülenecektir.

useEffect hook'unun ne olduğunu ve ne için kullanıldığını açıklayın.

React.js'deki useEffect hook'u, yan etkileri fonksiyonel bileşenlerde gerçekleştirmek için kullanılır. Yan etkiler genellikle bileşenin render edilmesini doğrudan etkilemeyen, ancak doğru işleyişi için gerekli olan eylemlerdir, örneğin bir API'den veri almak, zamanlayıcıları işlemek veya kaynakları temizlemek.

Bileşenin yaşam döngüsü yöntemlerine benzer şekilde çalışır: sınıf bileşenlerinde componentDidMount, componentDidUpdate ve componentWillUnmount.

Bunu üç farklı varyantta kullanabiliriz:

1. İkinci bir argümansız: Kod her render sonrası çağrılır.

useEffect(() => {
  console.log('Bu kod, her render sonrası çalıştırılır');
});

2. İkinci bir argüman olarak boş bir dizi: Kod yalnızca bir defalık ilk render sonrası çağrılır, bu da componentDidMount ile eşdeğerdir.

useEffect(() => {
  console.log('Bu kod, yalnızca bir kez ve ilk render sonrasında çalıştırılır');
}, []);

3. İkinci bir argüman olarak bir bağımlılıklar dizisi: Kod ilk render sonrası çalıştırılır ve ardından dizideki herhangi bir bağımlılığın değeri değiştiğinde her seferinde çalıştırılır.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('Bu kod, ilk render sonrası ve her "count" değişikliğinde çalışır');
}, [count]);

Özetle, useEffect hook'u, yan etkilerin fonksiyonel bileşenlerin render edilmesinden sonra veya sırasında gerçekleştirilmesini sağlar, bu da temiz ve anlaşılır kod sağlarken tam işlevselliği garanti eder.

React Kartları

Uygulamamızdan örnek React kartları

JSX nedir ve React neden bunu kullanır?

Sanal DOM nedir ve avantajları nelerdir?

Props nedir ve React bileşenlerine nasıl geçirilir?

useEffect hook'unun ne olduğunu ve ne için kullanıldığını açıklayın.

İndir IT Flashcards Şimdi