Front-End Programlama — React

9 min readMar 18, 2022

Telefon ve bilgisayarlarımızın hayatımızın bir parçası olması ile birlikte neredeyse her işimizi bu cihazlarda bulunan uygulamalar ya da web sayfaları aracılığıyla yapmaya başladık. Bu kapsamda örneğin bir uygulamadan T-Shirt alacağımızı varsayalım. Uygulamayı açarız ve T-Shirt kategorisine ulaşmanın en kolay yoluna bakarız. Eğer uygulamanın bize sunduğu arayüz hoşumuza gitmezse veya kısa süre içerisinde istediğimiz ürünlere ulaşamazsak daha fazla vakit kaybetmeden alternatif uygulamalara yöneliriz. Aslında kullanıcı olarak bizi yormadan aradığımızı bize verecek ve aynı zamanda göz zevkimize hitap edecek olan uygulamayı ararız…

React: JavaScript Learning Patterns by Lydia Hallie and Addy Osmany

Herkese merhaba. Yazılım geliştirme sürecinin en önemli meyvesi kullanıcıları uygulamada tutmak ve yeni kullanıcı kazanmak. Bunun için arayüzün kullanıcıyı tatmin etmesi çok önemli. Ben de bu çerçevede bir “User Interface” kütüphanesi olan React’ın kullanımı ile ilgili bir yazı serisi hazırlamaya karar verdim. İlk yazımda ise “Front-End Programlama” kavramına değinip, React’ın ne olduğundan bahsedeceğim. Keyifli okumalar…

Front-End programlama için 2 terim çok önemli: “User Interface” ve “User Experience”. Konunun derinliklerine inmeden önce bu 2 kavramın altını çizmenin faydalı olacağını düşünüyorum.

UI (User Interface) Dizayn Nedir?

Öncelikle User Interface Türkçe ifadeyle Kullanıcı Arayüzü anlamına gelir. Bir başka deyişle kullanıcının bir site ya da mobil uygulamada gezerken o ürünün görsel olarak nasıl tasarlandığıdır. Uygulamadaki her bir sayfanın, butonun, kategorilerin, resimlerin ve bütün elementlerin nasıl sunulduğu birer UI örneğidir. User Interface Design ise o görsel bütünlüğün dizayn edilme ve hazırlanma sürecinin adıdır.

UX (User Experience) Development Nedir?

Türkçe olarak User Experience, kullanıcı deneyimi anlamına gelir. User Experience Development ise kullanıcının uygulamayla etkileşimi sırasında memnuniyetini arttırarak, mümkün olduğu kadar uygulama içerisinde vakit geçirmesini sağlamak için yapılan geliştirme sürecinin bütünüdür. İyi bir User Experience geliştirme sürecinde, kullanıcıların uygulamada aldıkları hizmet ile daha rahat etkileşime geçebilmeleri hedeflenir.

User Interface ve User Experience kavramları ile ilgili daha geniş kapsamlı bilgi edinmek isterseniz, bu konuyla alakalı ayrıntılı bir şekilde önceden hazırladığım blog yazıma göz atabilirsiniz.

Front-End Programlama Nedir?

Bir web uygulamasını düşünelim. Burada medium.com’u ele alabiliriz. Bizim kullanıcı olarak bu sitede gezinirken gördüğümüz bütün bileşenler, sayfa tasarımları, bir butona tıkladığımız zaman açılan farklı bir bölüm, bütün client-side işlemler, yani kısacası ön tarafta gördüğümüz her şeyin geliştirilmesi Front End’e aittir. User Interface’in, modern ihtiyaçlar doğrultusunda, kullanıcı deneyimini(User Experience) arttıracak şekilde geliştirilmesinden sorumlu olan kişi Front End Developer’dır.

Web ve mobil uygulama ihtiyaç ve talebinin artması ile birlikte bu uygulamaları geliştirmek için kullanılan teknolojiler birçoğu açık kaynak olmak üzere geliştirilmeye devam ediyor. Buna JavaScript temelli User Interface kütüphaneleri olan Vue, Angular, Preact, Svelte gibi teknolojileri örnek olarak gösterebiliriz. React da aslında bunlardan birisi ve ben de Front-End Programlama yazı serim boyunca React’ı anlatıyor olacağım.

React Nedir?

React, Facebook tarafından açık kaynak olarak geliştirilen, modern UI bileşenleri oluşturmayı sağlayan bir JavaScript kütüphanesidir. React geliştirilmeden önce Front-End developer’lar Vanilla JS denilen yöntemle yani JavaScript’e ek herhangi bir kütüphane kullanmadan ya da JQuery gibi diğer JS kütüphanelerini kullanarak arayüz oluşturuyorlardı. Fakat o teknolojiler daha az kullanıcı arayüzü odaklı olduğu için React, sağladığı diğer avantajlara da birlikte, pastadaki en büyük dilime sahip olan kütüphane konumuna geldi.

React ile İlgili Birkaç Ön Bilgi

React’ın JavaScript temelli bir UI kütüphanesi olduğunu söylemiştik. React öğrenmeye başlamadan önce EcmaScript 6+ standartları ve özellikleri ile birlikte modern JavaScript geliştirme bilgisine sahip olmak gerekir.
Design patterns içerisinde yer alan MVC(Model-View-Controller) yapısını daha önce duymuşsunuzdur. React, bu mimari katmanlardan yalnızca View(Görüntü) katmanıyla ilgilenir.
React oldukça complex yapıdaki sayfaları organize etmek için bize 3 önemli konsept sunar: components, props ve state. React’ı iyi anlamanın en önemli yolu bu 3 ifadenin çalışma mantığını çok iyi şekilde kavrayabilmektir.
Son olarak bahsetmek istediğim anahtar kelime de Virtual DOM ve ReactDOM. Bunun çalışma yöntemini anlamak React’ı mantıksal olarak anlamaya yardımcı olacaktır.

React’ın Kurulumu

React’ı kullanabilmek için öncelikle Node.js’i indirmemiz gerekli. Node.js JavaScript kodlarının server-side çalışmasını sağlar. V8 isimli bir JS motoru üzerinde çalışır ve ayrıca NPM(Node Package Manager) aracılığıyla paket yönetimi ve geliştirme ortamı sunar. Node.js’in kurulumunu resmi sitesinden ücretsiz bir şekilde sağlayabilirsiniz.

React’ın sistemimize kurulumu:

npm install -g create-react-app

Bu; React’ı geliştiren Facebook tarafından resmi olarak yayınlanan create-react-app uygulaması. Hızlıca React uygulamaları oluşturmamızı sağlıyor.

React ile my-app isimli ilk projemizi oluşturalım:

npx create-react-app my-app
cd my-app
npm start

npx create-react-app my-app komutu ile; my-app isimli bir react projesi oluştururuz.
cd my-app komutunu terminalde projemize locate olmak için kullanırız.
npm start komutunu react uygulamamızı başlatıp tarayıcıda görüntüleyebilmek için kullanırız.

React Components

React dünyasında aslında en önemli yapı taşı component yapısıdır. React ile UI geliştirme yapabilmek için component yapısını çok iyi anlamak gerekir.

React ayrıca bir SPA, Single Page Application, yani tek sayfa uygulamasıdır. Biz react kullanırken uygulamamızı component’lere bölüyoruz. Peki nedir bu component?

Şu anda bu yazıyı okulumun kütüphanesinde yazdığım için component yapısını kütüphane ile ilişkilendirerek anlatmak istiyorum çünkü programlamanın temeli problemleri gerçek hayatla bağlayarak çözmek olduğundan dolayı bu yöntemin daha akılda kalıcı olduğuna inanıyorum. Şu anda burada bulunan her bir kitap, masa, sandalye, bilgisayar ve hatta öğrenciyi birer component olarak düşünelim. Her biri farklı görevleri yerine getiren componentler. Ve bu componentlerin bulunduğu alan da aslında kütüphane componenti. Örnekleri bu şekilde çoğalttığımızda, her bir sınıf, kantin, spor alanı da diğer componentler olacak ve en sonunda birleşip okul componentini meydana getirecek.

Şimdi de medium.com’u ele alalım. Bu sayfada gezinirken gördüğümüz navigasyon-bar kendi içerisinde bir component. O nav-bar componenti içerisinde ise ana sayfa, bildirimler, hikaye taslakları, yeni hikaye yazma ve profil sayfamıza yönlendirme butonları bulunuyor. Bu butonların her biri de aslında farklı görevleri yerine getiren farklı componentler. Bu componentlerin bir araya gelerek oluşturdukları sayfa bütünlüğüne ise composition(bileşim) deniyor. Bu özelliğin sağladığı avantajlardan yazım boyunca bahsediyor olacağım.

Componentlerin kendi içerisinde de farklı görevleri yerine getiren daha küçük component’lere ayrıldığını bir de Twitter örneği ile gösterelim.

Burada Tweet-image, User, Tweet-text, ve Tweet-date componentleri bulunuyor ve her biri farklı işlemleri gerçekleştiriyor. En sonunda ise birleşerek ana kapsayıcı component olan Tweet componentini oluşturuyorlar.

Tweet componentinin function component yapısıyla oluşumu:

Function Component Olarak Tweet Componenti

Buradaki örnekte ise oluşturduğumuz Tweet componenti, Timeline isimli başka bir component içerisinde çağırılarak kullanılıyor.

DOM ve Virtual DOM

DOM (Document Object Model) web sayfasının içerik ve stillerini barındıran, programlama dillerinin sayfa ile etkileşime girebilmesi için node ve objelerden oluşan dökuman yapısıdır.

Yeri gelmişken bir de JavaScript’in aslında ilk çıkış amacı olan “DOM Manipülasyonu” kavramından bahsetmek istiyorum. Eskiden web sayfaları oluşturma aşamasında sadece HTML dökümanı yazabiliyorduk. Yani HTML etiketlerimizle sabit, statik sayfalar geliştirebiliyorduk. Ancak JS’in çıkmasıyla birlikte biz bu sayfalara dinamiklik ve interaktiflik kazandırabiliyoruz, hiyerarşik yapı içerisinde bulunan HTML elementlerimizi istediğimiz şekilde yönetebiliyoruz ve bu olay da DOM Manipülasyonu olarak geçiyor.

Virtual DOM (Sanal DOM), bir arayüzün “sanal” bir temsilinin bellekte tutulduğu ve ReactDOM gibi bir kütüphane tarafından “gerçek” DOM ile senkronize edildiği bir programlama konseptidir. Kısaca React tarafından render edilen DOM’un bir kopyasıdır.

Virtual DOM Bize Ne Sağlıyor?

Virtual DOM’un bize sunduğu faydayı anlayabilmek için ilk başta sanal DOM kullanmadığımız HTML tabanlı bir web sayfasında güncelleme işlemlerinin nasıl gerçekleştiğini düşünelim. Bu durumda sayfanın içeriği değiştirildiğinde yani veriler güncellendiğinde, değişikliğin gerçekleşebilmesi için bütün DOM’un render edilmesi yani taranması gerekir. Bu işlem ise, değişiklik çok küçük de olsa büyük de olsa bütün DOM’un her seferinde baştan render edilmesine yani bir açıdan zaman-performans kaybına sebep olur.

Virtual DOM’un önemini daha iyi bir şekilde anlayabilmek için, yüksek kullanıcı kitlesine sahip, sürekli bir şekilde güncelleme yapılan, dinamik bir web sitesi örneğini ele alalım. Virtual DOM kullandığımızda bir verinin değiştirilmesi durumunda güncelleme ilk adımda Gerçek DOM üzerinde değil Virtual DOM üzerinde yapılır ve böylelikle Gerçek DOM’un her değişiklikte en baştan render edilmesinin önüne geçilir. Yani kısacası yapılan güncelleme ilk başta Virtual DOM üzerinde gerçekleşir ve oradan Gerçek DOM’a aktarılır. Bu aşamada aradaki farklılıklar kontrol edilir ve sadece değişen yerler render edilir. Bu örneğin güncelleme işlemi ve kullanıcı etkileşiminin yoğun olduğu dinamik sitelerde Virtual DOM kavramının önemini anlamamıza yardımcı olacağını düşünüyorum.

Virtual DOM yapısında, güncellenen sayfadaki farklılıkları anlamak için React kendi algoritmalarını kullanır. ReactDOM kütüphanesi tarafından gerçekleştirilen bu DOM senkronizasyonu sürecine reconciliation process denir.

React’ta bu algoritmanın çalışma mantığını daha ayrıntılı bir şekilde resmi dökümantasyonundan okuyabilirsiniz.

JSX

const element = <h1>Hello, world!</h1>;

JSX, JavaScript için bir syntax uzantısıdır. React elementleri oluşturmamızı ve JS içerisine “HTML” kodu yazmamızı sağlar. İlk bakışta yukarıdaki kod örneği bir HTML kodu olarak algılanabilir fakat aslında JSX kodu aşağıdaki koda çevrilir.

const element = React.createElement( 
 ‘h1’, ‘Hello, world!’
 );

Örnekte de görüldüğü üzere React ile çalışmak için JSX yapısını kullanmak zorunda değiliz. Fakat genel anlamda yazılım geliştiriciler, JavaScript ile UI geliştirirken, JSX kullanılmasının görsel anlamda kolaylık sağladığını düşünüyor.

Props

React ile geliştirme yaparken çalışma şeklini anlamamız gereken en önemli konseptlerden bir diğeri de props yapısıdır. Props, properties(özellikler-nitelikler) ifadesinin kısaltmasıdır. Daha önce components konusunu anlatırken gerçek hayatla ilişkilendirme adına kütüphane, kitap, öğrenci örneklerini vermiştim. Yine öğrencileri birer component olarak düşünürsek, öğrencilere verilen notlar, ödevler, projeler de birer props örneğidir. Resmi tanım olarak props ise componentler arası veri transferini yani bir componentten diğerine veri aktarımını sağlayan yapılardır.

tweet değişkeni ile oluşturduğumuz obje dizisini Props yapısını kullanarak Tweet componentine gönderelim.

Key

Key kavramını açıklamadan önce JS içerisinde bulunan Map fonksiyonundan bahsetmek istiyorum. Map fonksiyonu JS ile çalışırken oluşturduğumuz array içerisinde her bir elemanı tek tek döner. Yani bir döngü gibi çalışır. Burada her bir item’a(array elemanına) diğerlerinden farklı olacak bir id değeri(key) verilmesi gerekir. Böylece react, liste içindeki her bir elemanı birbirinden farklı key değerleri ile kodlar ve dizi içerisinde bir yer değiştiğinde sadece o kısmı render eder.

Az önce verdiğimiz örnekte props yapısını kullanarak Tweet componentine array objesi göndermiştik. Şimdi de key ile kullanımını gösterelim.

State

Props ve State yapısı, React’ı ilk öğrenme aşamasında olan geliştiriciler tarafından karıştırılabilir. Props’un, kısaca, bir componentten diğerine taşınan data(veri) veya event(fonksiyon) olduğundan bahsetmiştik. Yani bir componentten diğerine bir şey taşımak istediğimiz zaman props kullanırız. State ise, içerisinde bilgiler tutan, componentin kullanılma süresi boyunca değişebilecek bir JavaScript objesidir. Bir başka deyişle state, componentin data’sıdır. State’in asıl amacı, state değiştiğinde componentin tekrar render edilerek reactive’liğin saglanmasıdır. Burada ilgili data’yı ilgili yerde tutma kavramı söz konusudur.

Neden React? (Avantajları)

Yazımın ilk başında da bahsettiğim gibi geride bıraktığımız son birkaç yılda web geliştirme ekosistemi çok hızlı bir şekilde değişime uğradı. Geçmişte çok popüler olan software design patterns veya programlama teknolojileri, şu anda o kadar etkin kullanılmıyorken, bazı new generation teknolojiler ise modern problemlere daha kolay bir şekilde çözüm üretebildikleri için yaygınlaşmaya devam ediyor. React da bunlardan yalnızca birisi.

React, Facebook tarafından açık kaynak bir şekilde geliştirilmesi, component yapısı ile composition-focused olması, props ve state yapıları ile componentler arası ve component içi data yönetimini kolaylaştırması, JSX uzantısı ile JavaScript-HTML bütünlüğünü sağlaması, ReactDOM kütüphanesi ve Virtual DOM yapısı ile zaman + performans kazancı sağlaması, React Native ile cross platform mobil uygulamalar geliştirilmesini desteklemesi gibi artarak gidebilecek avantajları sayesinde kısa sürede UI kütüphaneleri arasında lider konuma gelmiştir.

NPM(Node Package Manager)’da projeler için en çok ve sıklıkla indirilmesi de dünya genelinde development community’sinin ne kadar yaygın olduğunun en önemli göstergesidir.

Front-End Programlama kapsamında React’ı anlatmayı planladığım serinin ilk yazısında React’ın ne olduğundan, en önemli konseptleri olan Component, Props, State ve Virtual DOM yapılarından bahsedip neden çok tercih edildiğini açıklamaya çalıştım.

Serimin gelecek yazılarında bahsedeceğim konular;

React Router Yapısı
Material UI ve ReactStrap gibi UI Library’leri İle Çalışmak
Redux ile State Management
React-Hooks ile Modern React Geliştirme
Next.js Kullanımı

React Serisine devam edip öğrendiklerimi ve tecrübelerimi paylaşacağım. Gelecek yazılarda buluşmak dileğiyle :)