React bir JavaScript kütüphanesi olup web uygulamaları için hızlı ve interaktif kullanıcı arayüzleri oluşturmada kullanılır. Bu yazı serisinde de reactjs öğrenme sürecimde karşıma çıkan kavramları ve örnekleri topluyor olacağım. Keyifli okumalar :)

Virtual DOM Nedir?

DOM (Document Object Model), sayfanın <html> etiketinden başlayarak düğüm adı verilen her alt öğeye inen bir ağaç yapısı temsilidir.

DOM her değiştiğinde, tarayıcının iki yoğun işlem yapması gerekir;

  • repaint:diğer öğelere göre düzeni ve konumu etkilemeyen bir öğede görsel veya içerik değişiklikleri,
  • reflow:sayfanın bir bölümünün düzenini yeniden hesaplayın — veya tüm sayfa düzeni.

React, bir sayfada değişiklik yapılması gerektiğinde tarayıcının daha az kaynak kullanmasına yardımcı olmak için bir Sanal DOM kullanır.

Sanal DOM neden yararlıdır?

Toplu işlem yapma imkanı sunuyor. React’in değişikliklerin çoğunu toplu olarak yapması ve aynı anda değiştirilmesi gereken tüm öğeleri değiştirerek gerçek DOM’a benzersiz bir güncelleme yapmasıdır. Bundan dolayı, değişiklikleri oluşturmak için tarayıcının repaint ve reflow gerçekleştirmesi gerekir.

JSX Nedir?

https://javascript.plainenglish.io/smart-ways-to-write-jsx-in-your-react-app-f435aa12bb96?source=rss-------1&gi=96ea81cdc1ce

JSX(JavaScript XML), JavaScript için bir syntax uzantısıdır. HTML veya XML benzeri bir syntax yapısı kullanarak JavaScript kodumuzu yazmamıza olanak sağlar.

  • Temelde React Elements üretir ve UI’nin nasıl görünmesi gerektiğini açıklar.
  • JSX ifadeleri, derlemeden sonra düz JS nesneleri için değerlendirilen normal JS işlevleri haline gelir. Bu nedenle, JSX ifadelerini if ifadeleri, döngüler içinde kullanabiliriz. Ayrıca bunları fonksiyonlara argüman olarak geçirebilir ve bazı fonksiyonlardan geri döndürebiliriz.

Components

https://www.edureka.co/blog/react-components/

Componentler, uygulamanızı tekrar kullanılabilir parçalara ayırmamıza ve her bir parçayı ayrı ayrı düşünmemize izin veren yapılardır.

Componentler fonksiyon gibi çalışır. Parametre gönderilebilir, yapacağı spesifik işlemi yapar ve ekranda neler görüneceğini açıklayan React elementlerini return ile döndürürler.

class Cat extends React.Component {
render() {
return <h1>Hi, I am a Cat :)</h1>;
}
}

Artık React uygulamamızın Cat adında bir <h1> öğesi döndüren bir bileşeni var. Buna class component denilmektedir.

Props & State

https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react

JSX attributelerini tek bir obje olarak bir componente aktarılmasını sağlayan objeye props denilmektedir. Yani props’lar ile bir componentten başka bir componente veri aktarımı yaparız.

  • Props’lar salt okunur (read-only)’dir. Değiştirilemezler.

State bir componentin o andaki durumunu gösteren ve farklı property’lerden oluşan bir javascript objesidir.

  • Her component kendi içerisinde state’lere sahip olabilir.
  • State’ler kullanıldığı componentler tarafından yönetilir.

Prop ve State arasındaki fark nedir?

  • Props verileri iletmek için kullanılırken, state verileri yönetmek içindir.
  • Props verileri salt okunurdur ve onu dışarıdan alan bir bileşen tarafından değiştirilemez.
  • State verileri kendi bileşeni tarafından değiştirilebilir, ancak özeldir. (dışarıdan erişilemez)
  • Props yalnızca üst bileşenden alt öğeye aktarılabilir.(unidirectional flow)

Kaynakça:

https://tr.reactjs.org/docs/introducing-jsx.html

Daha fazlası ve sorularınız için bana sosyal medya hesaplarım üzerinden ulaşabilirsiniz. Linkedin |Instagram |Twitter

Software Developer | my universe: https://twitter.com/NightmaresTown

Software Developer | my universe: https://twitter.com/NightmaresTown