Photo by Michal Mrozek on Unsplash

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 yeni başlayanlar için giriş seviyesinde https://reactjs.org/docs/getting-started.html 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 vb teknolojiler ES6 ve Functional Programming tekniklerini kendi içerisinde barındıran ve sıkça kullanılan 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

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, 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 complex bileşen ve etkileşimleri için Component tabanlı React kütüphanesi ortaya çıktı. ES6 , Babel, Node ve NPM , Webpack vb teknolojilerinin geliştirilmesi bu kütüphanenin ortaya çıkmasına olanak sağlamıştır.

React aslında React API sinden oluşmakta. 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ı.

JSX sizin React API ile Javascript Component oluşturma işleminizi kolaylaştıracak bir template dilidir. JSX çalışma mekanizmasını anlattığım yazımıda okuyabilirsiniz. JSP, PHP, Mustache vb . 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 vb.. varken React kısmında kendi oluşturduğunuz bileşenleri ve özelliklerini kolay bir şekilde tanımlayabilirsiniz.

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)

React 2 tip bileşen mevcuttur (Class ve Functional Components). Class bileşenleri state tutan ve bileşen hayat döngüsüne sahipken, Fonksiyonel 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 geldi. Bunu istisna olarak tutuyorum.

Bileşenleri HTML nesneleri içerisine veya diğer React nesneleri içerisine istenilen özellikler ile oluşturarak render edilmesi sağlanır.

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.

React Component Lifecycle

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

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.

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.

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ı, 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.

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 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.

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 yoluda genellikle budur. Inheritance ise React tarafından çok da tercih edilen bir yöntem değil. Hatta Class Component yerine Function component ve Hook kullanımı sayesinde Kalıtım olayına çok da gerek kalmayacaktı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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store