React Öğreniyorum #Days1

React.Js nedir ?

React.js, genellikle React olarak adlandırılan, Facebook tarafından geliştirilen ve bakım yapılan açık kaynaklı bir JavaScript kütüphanesidir. Kullanıcı arayüzleri (UI) oluşturmak için kullanılır ve özellikle tek sayfa uygulamaları (SPA) ve mobil uygulamalar geliştirmek için idealdir. React, bileşen tabanlı bir mimari kullanarak, UI bileşenlerini yeniden kullanılabilir ve yönetilebilir parçalara böler.

React, büyük ve dinamik web uygulamaları geliştirmek için güçlü bir araçtır ve geniş bir topluluk tarafından desteklenmektedir. Örneğin, Facebook, Instagram, Netflix gibi büyük ölçekli projelerde kullanılmaktadır.

React Çalışma Mantığı

JSX (JavaScript XML): JSX, JavaScript ile HTML benzeri sözdizimini birleştirir. Bu, bileşenlerin yapısını tanımlarken HTML benzeri kod yazmayı sağlar ve bileşenlerin okunabilirliğini artırır.

Tek Yönlü Veri Akışı (One-way Data Binding): React, verilerin tek bir yönde (üst bileşenden alt bileşene) akmasını sağlar. Bu, veri akışını daha öngörülebilir ve yönetilebilir hale getirir.

Sanal DOM (Virtual DOM): React, DOM manipülasyonunu optimize etmek için sanal bir DOM kullanır. Sanal DOM, gerçek DOM’un hafif bir kopyasıdır ve değişiklikler önce sanal DOM’da uygulanır, ardından en verimli şekilde gerçek DOM’a yansıtılır. Bu, performansı artırır.

Hooks: React 16.8 sürümü ile tanıtılan Hooks, fonksiyon bileşenlerinde durum ve yan etkileri yönetmeyi sağlar. Hooks, bileşenlerdeki mantığı daha temiz ve okunabilir bir şekilde yazmayı mümkün kılar.

React Js Terimleri

1-Component (Bileşen): React’te kullanıcı arayüzünün bağımsız ve yeniden kullanılabilir parçalarıdır. Bileşenler, sınıf (class) veya fonksiyon (function) tabanlı olabilir.

2-JSX (JavaScript XML): JavaScript ile HTML benzeri sözdizimini birleştirir. JSX, React bileşenlerinin yapısını tanımlamak için kullanılır.

3-Props (Özellikler): Bileşenlere dışarıdan aktarılan ve bileşenlerin yapılandırmasını sağlayan verilerdir. Props, bileşenlere fonksiyon parametreleri gibi aktarılır. Küçük verileri için kullanışlıdır.

4-State (Durum): Bileşenlerin kendi iç durumlarını yönetmelerini sağlar. State, bileşenin veri değişikliklerine tepki vermesine ve yeniden render edilmesine olanak tanır.State, setState() yöntemi ile güncellenir.

5-State Managament (Durum Yönetimi) : Bileşenlerin iç durumlarını yönetme sürecidir.Uygulamanın urumunu tutmak, yönetmek ve paylaşmak için kullanılır. React’ta ,Redux, MobX gibi kütüphanelerle ve ya React’ın kendi state yönetimiyle yapılabilir.

6-Lifecycle Methods (Yaşam Döngüsü Metotları): Sınıf tabanlı bileşenlerin yaşam döngüsündeki belirli anlarda çağrılan metotlardır. Örnekler: componentDidMount(), componentDidUpdate(), componentWillUnmount().

7-Virtual DOM: Gerçek DOM’un hafif ve verimli bir kopyasıdır. React, sanal DOM’da değişiklikleri uygulayıp, en verimli şekilde gerçek DOM’a yansıtarak performansı artırır.

8-Higher-Order Component (HOC- Higher-Order Components): Bir bileşeni alıp, onu geliştirip, yeni bir bileşen döndüren bir fonksiyondur. Bileşenlerin yeniden kullanılabilirliğini ve soyutlamasını artırır.

9-Fragment: Birden fazla elemanı tek bir kapsayıcıya sarmadan döndüren bir React özelliğidir. Genellikle <>...</> veya <React.Fragment>...</React.Fragment> şeklinde kullanılır.

10-Keys: React, liste render ederken her bir elemanın benzersiz bir anahtar (key) prop'una sahip olmasını ister. Bu, öğelerin tanımlanmasını ve DOM manipülasyonunun optimize edilmesini sağlar.

11-Ref (Referanslar): DOM elemanlarına veya sınıf bileşenlerine doğrudan erişim sağlamak için kullanılır. Genellikle useRef Hook'u veya createRef ile oluşturulur.

12-Controlled Components (Kontrollü Bileşenler): Form öğelerinin durumunu React bileşeninde yönetilen bileşenlerdir. Kullanıcı girdisi, bileşenin durumunu günceller.

13-Uncontrolled Components (Kontrolsüz Bileşenler): Form öğelerinin durumunu kendi başına yöneten bileşenlerdir. DOM üzerinden erişim sağlanır.