React Doc Series
React Docs -1 (Temel Konseptler)
React Doc Ana Konseptleri JSX, Rendering Elements, Components And Props, State LifeCycle, Handling Events, Conditional Rendering, List And Keys, Forms, Lifting State Up, Composition vs Inheritance
Bu yazımda React’a yeni başlayanlar için React’ın ana sayfasında geçen kavramları kısa notlar ile açıklamaya çalışacağım.
NOT : React başlamadan öncesinde Javascript ES6, ES7 dildeki gelişmelere hakim olmanız gerekiyor. React, Redux, Hooks teknolojileri ES6 ve Fonksiyonel Programlama tekniklerini kendi içerisinde barındıran ve sıkça kullandığı teknolojiler.
Bundan dolayı eğer bu konularda eksiğiniz varsa öncelikle Javascript’in Tarihçesinde yer alan yazılarımı okumanızı öneririm.
Main Concepts
1.Hello World
React Web ortamında , React Native Desktop ve Mobile kullanıcı arayüzleri oluşturabilmek için geliştirilmiş bir kütüphane. JS ile DOM içerisinde HTML elementlerine erişim mümkündü. Ama tarayıcılar arası farklar, ve selector kullanımının zorluğu sebebi ile JQuery kütüphanesi ortaya çıktı.
Sonrasında SaaS ve diğer yaklaşımlar ile daha kompleks bileşen ve etkileşimleri için Component tabanlı React kütüphanesi ortaya çıktı. ES6 , Babel, Node ve NPM , Webpack gibi teknolojilerinin geliştirilmesi bu kütüphanenin ortaya çıkmasına olanak sağlamıştır.
React aslında React API sinden oluşmaktadır. Buna ek olarak Hooks API yeni ortaya çıkmıştır. React kodu olarak yazdığımız JSX + JS kodları ES6 üzerinde çalışan React API kodlarına dönüştürülerek DOM üzerinde çalışan JS kod seviyesine dönüştürülür.
Burdaki sihir, bir çok geliştiricinin React beğenmesinin sebebi bileşen yazma, etkileşim ve performans için basit ve kullanışlı bir API arayüzü ve araçlar sağlıyor olması.
2.Introducing JSX
JSX sizin React API ile Javascript Component oluşturma işleminizi kolaylaştıracak bir template dilidir. JSX çalışma mekanizmasını anlattığım bu yazıyıda okuyabilirsiniz. JSP, PHP, Mustache kütüphaneleri gibi dışarıda kod içerisinde hazırladığınız değişken ve obj ve fonksiyonları bu template dili sayesinde çok rahatlıkla diğer bileşenlere parametre olarak geçirebilir ve HTML dilindeki gibi Parent — Child ilişkili bileşenler tanımlayabilirsiniz.
HTML yapısında div, span varken React kısmında kendi oluşturduğunuz bileşenleri ve özelliklerini kolay bir şekilde tanımlayabilirsiniz.
3.Rendering Elements
ReactDOM.render metodu ile React bileşenleri root elementin altına eklenecek şekilde render edilir. Bir bileşenin güncellenmesi işlemi söz konusu değildir. Rendering elementler immutable tanımlanmıştır. React bir sonraki render işlemi sırasında güncellenen veya değişen elemanların neler olduğunu belirleyerek sadece bu elemanların rendering kısmını günceller(Virtual DOM)
4.Components and Props
React 2 tip bileşen mevcuttur (Class ve Functional Components). Sınıf bileşenleri state tutan ve bileşen hayat döngüsüne sahipken, Fonksiyon bileşenler state tutmadan sadece kendisine verilen props göre render gerçekleştiren bileşenlerdir.
Hooks ile fonksiyonel bileşenlerin state tutması ve bileşen lifecycle kullanma kabiliyetleri mümkün hale getiren bir teknolojidir. Bunu istisna olarak tutuyorum.
Bileşenleri HTML elemanları içerisine veya diğer React nesneleri içerisine istenilen özellikler ile oluşturarak render edilmesi sağlanır.
5. State and Lifecycle
Bir bileşen kendi başına bir iç değişkeni olup bunu kendi içerisinde tutacak ve yönetecek ise bunu state nesnesi içerisinde tutar ve kontrollü bir şekilde setState metodu ile günceller.
Bir bileşenin hayat döngüsüne baktığımızda bileşenin ilk initialization, mount, update, unmount süreçlerinde aşağıdaki methodlar çağrılır. Geliştirici bu fonksiyonlar içerisinde istediği işlemleri gerçekleştirir.
6. Handling Events
DOM elemanları eventlerine listener takarak gerçekleşen işlemler sonrasında fırlatılan eventleri yakalamanızı sağlar. Eventler normal DOM listener lardan farklı olarak JSX içerisinde ES6 function olarak tanımlayabilirsiniz.
Browser NativeEvent kapsayan SyntheticEvent cross-browser wrapper imkanı sağlar.
Desteklenen Event türleri;
Clipboard Events, Composition Events, Keyboard Events, Focus Events, Form Events, Mouse Events, Pointer Events, Selection Events, Touch Events, UI Events, Wheel Events, Media Events, Image Events, Animation Events, Transition Events, Other Events
7. Conditional Rendering
render operasyonu sırasında if else kodları ile return edilen bileşen gurubunu değiştirerek durumsal rendering işlemini gerçekleştirebilirsiniz. JSX içerisindede () ? renderThis : renderOther yöntemi ile durumsal rendering işlemini gerçekleştirebilirsiniz.
8. Lists and Keys
Liste, Menu, Tablo gibi birden fazla aynı türden tekrar eden UI nesneleri için array.map yöntemi ile UI bileşenlerinini bir const toplayıp bunu istenilen kısımda renderleyebilirsiniz.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);Burada önemli bir nokta her bir list item için unique bir key tanımlanmalı bu key bize ilerde bu grup içerisindeki nesneye erişmemize, silmemize ve güncelleme yapmamıza imkan sağlasın.
9. Forms
form, input(text, button, submit, file), text-area, label gibi elemanlardan biz form nesnelerimizi oluştururuz. Buradaki en önemli konu. Text, File, TextArea gibi değer tutan bileşenlerin ControlledComp olarak tanımlanmasıdır.
Yani state içerisinde değerlerinin tutularak bu value değerinin listener ile kontrollü bir şekilde istenildiği gibi değiştirilerek bu state değerinin içerisine atanması sağlanır.
Örneğin her yazdığım harf upperCase olarak gözüksün veya metin içerisinde sadece rakam ve harf bulunsun gibi kuralları bu sayede işletebilirsiniz.
10. Lifting State Up
Bazen tuttuğumuz bir state birden fazla yerin değiştirmesi veya kullanması söz konusu olduğunda bu state 2,3 bileşenin aynı anda kullanabilmesi için State daha üst seviyelerdeki Parent bileşende oluşturup child bileşenler bu state props olarak delege ederiz. Aynı konu bu state değiştirecek listener yapıları içinde geçerlidir.
Parent bileşen child bileşenlerin UI elemanlarına props geçirdikleri listener sayesinde Parent seviyesinde State güncellemesini gerçekleştirirler.
Bunun bir ileri seviyesi Redux , Container , Component yapısıdır.
11. Composition vs Inheritance
Composition: Bileşenlerin birbirinin referanslarını tutarak onlara bir iş vermeleri veya onları kullanmaları sonucundaki ilişkidir.
Örneğin Table bileşeni Header, Rows, Columns, Sorting , Search, Pagination gibi bir sürü bileşeni içerip bunları koordineli bir şekilde çalıştırmasına deriz. React bileşen geliştirme için önerdiği yöntemde genellikle budur.
Inheritance ise React tarafından çok da tercih edilen bir yöntem değildir. Hatta Class Component yerine Function component ve Hook kullanımı sayesinde Kalıtım olayına gerek kalmamıştır. Örneğin ben bir fonksiyon yazacağım renderShape() bunu bir ana sınıfa yazıp bundan türeyen Rect, Triangle sınıflarında bu renderShape kullanabilirim. Bu daha çok Java’nın kullandığı OOP gelen bir yöntemdir.
JS bunu daha çok fonksiyon olarak dışarda tanımlar ve diğer sınıflardan kullanmana olanak sağlayan yöntemi tercih eder. (Not: Bu konuda daha detaylı bilgi için UI Bileşenleri Nasıl Evrimleşti yazımı okumanızı öneririm)
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
