Ana sayfa Telegram

ReactJS Nedir?

Giriş

Herkese merhaba :)

ReactJS kullanıcı arayüzleri oluşturmak için Facebook tarafından geliştirilen ve component (bileşen) tabanlı olarak çalışan bir Javascript kütüphanesidir. Bu yazıda React'i geçmişten günümüze ele alacağız. Neymiş bu react, neden react? demeden önce Kısaca Konuyu Seçme Sebebim başlığı altında neden bu konuyu seçtiğimi açıklamak istiyorum. Okumak istemeyenler ReactJS kısmından devam edebilirler.

Ek olarak biraz uzun bir yazı olacağını başlamadan belirtmemde fayda var. Tek solukta bitirmek isteyen dostlarım kahvelerini alıp koltuklarına iyice yerleştilerse ReactJS Nedir? ile hafif hafif başlayabiliriz. Keyifli okumalar :))

Kısaca Konuyu Seçme Sebebim

WEB teknolojilerine ve front-end alanına olan ilgim bundan yaklaşık 4 - 5 yıl öncesine dayanmakta. Her front-end developer gibi ben de Vanilla Javascript ile development alanına giriş yaptım. Angular'ın popülerliğini yavaş yavaş yitirip, ReactJS ve VueJS'in rağbet görmeye başladığı zamanlardan bahsediyorum. Bu dönemlerde ben de bir JS kütüphanesi arayışındaydım, Türkçe olarak neredeyse hiç kaynak yoktu ve İngilizce olan kaynaklar da İngilizcesi oldukça iyi olan insanlara hitap ediyordu ve benim çok zamanımı alıyordu. React yazmayı kafaya koymuştum, yavaş yavaş öğrenmeye de başlamıştım ancak ilerleyen süreçte birileri beni alıp büyük bir projeyle (CTFgo) başbaşa bırakana kadar hiçbir şey öğrenemeyecektim. Bu yola çıkmayı düşünen ya da yeni başlayan developer dostlarıma yardımcı olabileceğine inandığımdan dolayı böyle bir konu üzerinde duruyorum.

Vanilla Javascript: Javascript'in saf ve temel halidir ve başka bir framework veya kütüphane kullanmadan Javascript'in doğal özelliklerini kullanarak kod yazmayı sağlar.

1 - ReactJS

ReactJS Nedir ile başlamadan hemen önce HTML, CSS ve Javascript hakkında hiçbir fikri olmayan dostlarıma bundan önce Front-end Teknolojileri adlı yazımızı okumalarını öneriyorum.

Hatırlatmak gerekirse: HTML, web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. CSS, HTML'e ek olarak stillendirme, metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir. Javascript ise, HTML ve CSS ile birlikte World Wide Web'in temel teknolojilerinden biri olan programlama dilidir. WEB uygulaması üzerindeki dinamik olaylardan sorumludur.

1.1 - Nedir Bu React?

Javascript tabanlı dinamik web uygulamaları geliştirmek amacıyla kullanılan, Facebook tarafından geliştirilen ve SPA (Single Page Application) mantığında çalışan bir Javascript kütüphanesidir. React'ın kendi sitesinde bir dönem yapılan tanımlamada ise 'Interactive UI tasarımlarını acısız bir şekilde yapmanızı sağlar.' açıklaması kullanılmıştır. Aslında tanımlama bu şekliyle gayet güzel, kullandığımız uygulamanın kendine gelmesi için sayfaları arka arkaya yenilediğimiz zamanlar henüz çok da uzak bir geçmiş değil çünkü :))

SPA (Single Page Application): sadece bir tane index sayfası bulunan ve yönlendirme yapısı sayesinde sayfalar arasında yenileme (refresh/F5) olayı olmadan gezinebildiğimiz uygulama türleridir.

React'in ortaya çıkma hikayesi ise oldukça garip. Facebook şirketi React'i geliştiriyor ve kendi web uygulamalarında bol bol kullanıyor. Sonrasında Zuckerberg, Instagram'ı satın alıyor. Bu dönemde Instagram'ın mobil uygulaması var ancak web uygulaması henüz yok, web uygulaması geliştirmeye karar veriliyor. Facebook ile aynı zeminde çalışmaya başlayan Instagram geliştiricileri Facebook'un kaynak kodlarında gördükleri bu garip yapının bağımsız hale getirilip Instagram'ın web uygulamasında da kullanılması için ısrarcı olunca henüz adı bile konmamış bu garip yapı bağımsız hale getiriliyor ve bütün dünya ile paylaşılıyor. Adına da React diyorlar.

React kodları kullanıma açılınca başlarda herkes dalga geçip 'Javascript içinde HTML mi yazılır' şeklinde alaycı bir tavırla dalga geçiyor. Bu alaycı ve aşağılayıcı tavır uzun süre devam ediyor ancak Airbnb, 'Biz sistemi ReactJS ile geliştirdik!' şeklinde bir açıklama yapınca bütün akış değişiyor. Dalga geçenler birer birer React kullanmaya başlıyor, öyle ki Google, AngularJS'yi geliştirirken React ve Redux'ı inceleyerek yapıyor.

Hikaye kısmını daha fazla uzatmadan burada kesiyorum. Bundan sonraki kısımda işin içine biraz daha girip React bize ne gibi imkanlar sağlıyor onlara değinelim.

1.2 - Neden React?

Neden React kullanmalıyız sorusunda aşağıdaki cevaplar verilebilir:

  • Öğrenmesi ve Kullanımı Kolay: Açık kaynaklı bir JavaScript kütüphanesi olduğundan dolayı öğrenmesi nispeten kolaydır.

  • Artan İş Fırsatları: Popülerliği ve artan iş fırsatları ile sektörde oldukça fazla tercih edilen bir kütüphane haline gelmiş durumdadır.

  • Gelişen Topluluk: Açık kaynaklı bir kütüphane olduğundan herkes React’ı kullanabilir ve geliştirebilir. Ekosistemi destekleyen ve geliştiren, kendi katkılarını ekleyen bir topluluğu da bulunmaktadır!

  • VirtualDOM: Sanal DOM gibi tekniklerle performanslı bir uygulama geliştirmenize imkan sağlar.

  • Yeniden Kullanılabilirlik Bileşen tabanlı olduğundan bileşenlerinizi tekrar tekrar kullanabilirsiniz!

  • Tek Yönlü Veri İletmi: Bileşenler arası veriler, react üzerinde tek yönde aktığından performans oldukça artmaktadır.

  • Debug İmkanı: React DevTool sayesinde kodunuzu debug edebiliyor, bileşenlerinizin hiyerarşini görüyor ve performans analizi yapabilirsiniz.

  • React Native Avantajı: WEB uygulamaları geliştirken React Native sayesinde cross-platform mobil uygulamalar da geliştirebilmektesiniz!

  • SEO Dostu: Arama motoru optimizasyonu için oldukça elverişlidir.

VDOM: React'in tüm sayfayı yeniden yüklemeden kullanıcı arayüzünde değişiklik yapmasına olanak tanıyan gerçek DOM'un hafif bir kopyasıdır.

Cross Platform: Birden fazla işletim sisteminde dağıtımı olan yazılımlara denir (geliştirilen uygulamanın hem ios hem de android işletim sisteminde çalışabilmesi şeklinde düşünebiliriniz).

Bu gibi örnekleri artırabiliriz ancak burada durup en çok dikkatimi çeken birkaç dezavantajını da eklemem gerekiyor. Bunlar:

  • Geliştirme Hızı: Geliştirme hızı rakiplerine göre yer yer daha yavaştır.

  • Yüksek Öğrenme Eşiği: Diğer teknolojilere kıyasla daha yüksek bir öğrenme eşiği gerektirir, ek olarak en çok kıyaslandığı rakibi VueJS'e göre öğrenmesi daha zordur. Angular'a göre kolaydır ancak Redux ile zenginleştirildiğinde öğrenmesi zorlaşır.

  • Ek Kütüphane İhtiyaçları: React, sadece kullanıcı arayüzü kısmını yönetir ve diğer işlevler için ek kütüphanelere ihtiyaç duyabilirsiniz.

Verilere göre değerlendirme yapmak gerekirse: - Google trendlerde React, diğer iki rakibine göre daha fazla aranmış. - Npm paket indirmelerinde, React rakiplerine göre 5 kat daha fazla indirilmiş. - Stackoverflow’un 2020 en çok istenen kütüphane anketinde 1. sırada React yer alıyor. Bu da insanların React'in rakiplerine göre daha fazla merak edildiğini gösteriyor.

1.3 - React'e Başlamadan Önce

Başlarken belirtmeliyim ki React öğrenmeye başlamak için HTML, CSS ve Javascript dillerine hakim olmak tek başına asla yeterli olmuyor. Bunlara ek olarak VirtualDOM, SPA, JSX gibi mimariler hakkında da en azından genel kültür seviyesinde bilgi sahibi olmak gerekiyor. Bir diğer husus da dil konusu. İyi seviyede Javascript bilmeniz tabii ki önemli bir artı olacaktır ancak burada programlama dilinden ziyade İngilizce'den bahsediyorum. Zaman zaman Türkçe kaynakların yetersiz kaldığını, Türkçe kaynaklardan istediğinizi elde edemediğinizi ilerleyen süreçte net bir şekilde göreceksiniz. Bu noktada hayatımıza, daha önceden Stackoverflow, W3Schools, GeeksforGeeks, MDN isimleriyle bildiğimiz siteler ve daha fazlası dahil olacak. Araştırmacı kişiliğiniz sizi bu noktada nerelere sürükler kestiremiyorum ancak scroll sevmeyen bana scroll'u sevdirdi diyebilirim :))

JSX (Javascript Syntax Extension): Javascript dosyalarının içinde HTML kodları yazmamızı sağlar şeklinde bilinse de JSX; Javascript içinde XML/HTML benzeri bir yapı kullanarak kullanıcı arayüzü bileşenleri tanımlamamıza olanak sağlayan bir yapı olarak karşımıza çıkar. Kolay anlaşılabilir ve kullanılabilir olması açısından HTML ile oldukça benzer bir yapıya sahiptir.

1.4 - JSX Mimarisine Alışmak

Yukarda da söylediğimiz gibi JSX, XML/HTML gibi bir yapı kullanarak arayüz bileşenleri tanımlamamıza yardımcı olan bir yapıdır. Bu noktada kullanıcıların aklına React yazmak için JSX kullanmak zorunda mıyım? gibi bir soru gelebilir. Sorunun cevabı hayır, JSX kullanmak zorunda değilsiniz. JSX sizin geliştirme aşamasındaki deneyiminizi iyileştirecek olan bir yapı olacak ve Babel gibi transcompiler'lar yardımıyla bu kod valid bir Javascript koduna dönüştürülerek kullanılacaktır. Çünkü tarayıcılarımız JSX kullanamaz.

Transcompiler: diğer bir adıyla transpiler, bir programlama dilinde yazılmış bir programın kaynak kodunu girdi olarak alan ve aynı veya farklı bir programlama dilinde eşdeğer bir kaynak kodu üreten bir çevirmen türüdür. Babel en çok bilinen transcompiler'lardan birisidir.

Birçok geliştirici, arayüz ile çalışırken JSX kullanılmasının, görsel anlamda yardımcı olduğunu düşünüyor. Ayrıca JSX, daha anlaşılır hata ve uyarı mesajlarının görüntülenmesini sağlıyor.

1.5 - İlk React Uygulamamız

Buraya kadar gelen dostlarımla beraber bir React projesi oluşturmak üzere bu bölüme yumuşak bir giriş yapalım. Başlamadan önce bilgisayarınızda NodeJS kurulu olması gerekmektedir. NodeJS, açık kaynaklı, genelde sunucu tarafında kullanılan ve ağ bağlantılı uygulamalar için geliştirilmiş bir çalışma ortamıdır ve genelde Javascript kullanarak geliştirilir. Henüz bilgisayarınızda NodeJS yoksa buraya tıklayarak işletim sisteminiz için gerekli kurulumları yapabilirsiniz.

Bundan sonraki adımda komut satırından birkaç satır yazarak projemizi rahat bir şekilde oluşturacağız. Projeyi kurmak istediğiniz dizine giderek bir terminal ekranı açıp:

npx create-react-app my-app

komutunu yazıyorsunuz. Bu adımdan sonra tek yapmanız gereken Node'un paket yöneticisinin kurulumları tamamlamasını beklemek. Bağımlılıkların indirilmesi tamamlandıktan sonra,

cd my-app

komutuyla oluşturduğumuz proje dizinine giriyoruz. Bu kısımda public, src, package.json, package-lock.json gibi proje dosyalarımız göreceksiniz. Bu dosyalardan farklı olarak bir de node_modules adında bir dosyamız var. İlerde sık sık çöplük olarak göreceğiniz ve zaman zaman küfürler edeceğiniz bu paketi de görüyorsanız doğru yerdesiniz demektir :)) Son olarak,

npm start

komutunu kullanarak projemizi localhost:3000 üzerinde ayağa kaldırıyoruz. Dönen bir React iconu ve Edit src/App.js and save to reload. yazısını gördüyseniz projeniz başarılı bir şekilde ayağa kalkmış demektir. Bundan sonra proje sizin yaratıcılığınıza ve hayal gücünüze bağlı olarak gelişecektir.

1.6 - React Kodlarını İncelemek

SPA uygulamalarında tek bir index.html sayfası render edilir. Bu index.html dosyası, projemizde public dizini altında yer almaktadır.

Public klasöründe bulunan dosyalar genellikle yalnızca public/index.html dosyası içinde kullanılır. Ve dosyayı index.html içinde tanımlarken klasör belirtilmez, yalnızca dosya adı belirtilerek tanımlama yapılır.

Src klasörüne baktığımızda ise bize hazır olarak gelen bazı componentları görmekteyiz. Burada index.js dosyası index.html sınıfında tanımladığımız kapsayıcı bloğun içine render edilecek root component’i temelde tanımladığımız yerdir. Kod üzerinde inceleyecek olursak:

<html>
   <head></head>
   <body>
      <div id="root"></div>
   </body>
</html>

index.html'in yapısı temel olarak yukardaki şekilde olurken App.js dosyamız, bir diğer adıya App componentimiz

import React from "react";
import ReactDom from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

yapısına benzer bir yapıda karşımıza çıkar. Bu kodlara göre App adındaki root component, index.html içine tanımlanmış olan div elementinin içinde tanımlanacak ve uygulama bu elementin içinde render edilecektir.

src klasörü altında hazır olarak App.test.js dosyamız da gelmektedir. Uygulamamızı test edeceğimiz zaman bu dosyayı düzenleyebilir ve yeni durumlar için yeni testler hazırlayabiliriz.

2 - React Kod Mimarisine Genel Bakış

Bu kısımda React mimarisinde yazılan kodlar ve Vanilla Javascript'te olmayan, React'in kendi özelliklerine değinmeye çalışacağız. Okuma yoğunluğu olarak oldukça yorucu olduğundan dolayı küçük bir ara vermenizi öneriyorum. Çok uzun değil, 2-3 dakika kadar gidip bir temiz hava almak yeterli olacaktır ve iyi gelecektir :))

2.1 - Sarmal Kod Mimarisi

2.1.1 - Sarmal Yapı

React projelerinde projenin ana çıkış kaynağı genelde index.js dosyasıdır ve bu dosya içerisinde render edilecek olan component'lar ve provider'lar yer alır. Bu component ve provider'lar index.js içerisinde sarmal bir yapıda bulunurlar. Hemen aşağıdaki kod parçacığı üzerinde açıklamaya çalışalım:

import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import App from "App";
import { store } from "store";
import "assets/scss/style.scss";
import config from "./config";
import { AuthProvider } from "context/AuthContext";
import { InitProvider } from "context/InitContext";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
   <Provider store={store}>
      <BrowserRouter basename={config.basename}>
         <AuthProvider>
            <InitProvider>
               <App />
            </InitProvider>
         </AuthProvider>
      </BrowserRouter>
   </Provider>
);

Burada bağımlılıklar teker teker import edildikten sonra root.render fonksiyonu ile render edilecek olan component'larımız iç içe ve birbirine bağımlı bir şekilde index.html içerisine gönderilmektedir. Bu yapıda en dışta yer alan component, içinde bulunan bütün component'ların üstündedir ve burada kullanılan metotlar, kendi altındaki component'larda da kullanılabilir. Bu sayede kod mimarisi üzerindeki hiyerarşi sağlanmış olur. Temel olarak component'larımıza ve ne işe yaradıklarına bakalım hemen:

Verdiğimiz örnekteki sarmal yapı, bileşenlerin oluşturulması, yönetilmesi ve temel yapılarla entegrasyonu için kullanılmıştır. İşte bu yapıların görevleri:

  • React Root Oluşturma (createRoot): React 18 ve sonraki sürümlerde kullanılan bir yöntemdir. ReactDOM'un createRoot metodu ile React uygulamasının kökünü oluşturur.

  • React Router (BrowserRouter): Tarayıcı tabanlı bir uygulama oluşturmak için kullanılan React Router'dan BrowserRouter bileşenidir. Bu bileşen, uygulamadaki sayfa yönlendirmelerini sağlar ve tarayıcı geçmişini kullanarak URL rotalarını eşleştirir.

  • Redux (Provider ve store): Redux'tan Provider bileşeni, Redux mağazasını uygulamaya entegre eder. Redux, uygulama durumunun yönetimi için kullanılır ve bu mağaza, tüm uygulama boyunca kullanılan durumu saklar.

  • Özel Bağlam Bileşenleri (AuthProvider ve InitProvider): Kendi oluşturduğunuz özel bağlam bileşenleri, uygulamanıza özgü durumları yönetmek için kullanılır. Bu bağlam bileşenleri, belirli bir bileşen ağacı içindeki bileşenler arasında veri iletmek için kullanılır (kimlik doğrulama durumu, oturum başlatma durumu gibi).

Bu yapılar, React uygulamasının temel altyapısını oluşturur ve bileşenlerin yönetilmesi, durumun paylaşılması ve sayfa yönlendirmelerinin yönetilmesi gibi temel işlevleri sağlar. Bu şekilde, uygulamanın geliştirilmesi ve yönetilmesi daha kolay ve verimli hale gelir.

2.2 - Component, Props, Conditional Rendering, Routing ve Hook Kavramları

Bu kavramları anlamak ve kullanmak başlarda oldukça karmaşık gelse de kendi örneklerinizi yaptıktan sonra kolayca anlayacağınıza inanıyorum. Kodların çalışma prensibini ve genel mimariyi anladığımıza göre component kavramı ile başlayalım.

2.2.1 - Component'lar

Component ekrandaki en küçük görsel arabirimi çizmek için gereken kod parçasıdır. Her bir component sadece 1 tane parent element içermelidir! Componentler sayesinde uygulama daha modüler hale gelir. React'in component yapısına baktığımız noktada bilmemiz gereken iki temel kavram bizleri selamlıyor. Bunlardan ilki class-component kavramıdır, diğeri ise functional-component kavramıdır.

Class Based Component'lar, React kütüphanesi içindeki Component class'ından extend olan javascript class'ları olarak tanımlanabilir. Bu class'lar React Component'tan extend olduğu için Component Lifecycle süreçlerini de barındırır. Örnek üzerinde göstermek gerekirse:

import React, { Component } from "react";

class ClassBasedComponent extends Component {
   render() {
      return (
         <div>
            <h1>I'm {this.props.type}.</h1>
         </div>
      );
   }
}

export default ClassBasedComponent;

Yukadaki örnekte de görüldüğü üzere ClassBasedComponent sınıfı, React kütüphanesi içindeki Component sınıfından extend olmuştur. Bu şekilde ekranda I'm < props_type > şeklinde bir çıktı alınacaktır. Örnekte de görüldüğü gibi Javascript kodlarımızı çalıştırmak için de süslü parantezlerden yardım alabiliyoruz. Bu şekilde dinamik değerlerin kontrolünü daha rahat bir şekilde sağlayabiliriz. render() metodu içerisinde yazılan JSX kodları ise DOM içerisine yerleştirilir.

Component Lifecycle: bir React component'ının oluşturulduğu, güncellendiği ve yok edildiği süreçlerin tamamıdır, yani component'ın doğumundan ölümüne kadar geçen süreye denir. React v16.3'ten önce lifecycle metodları class-component'larda aktif olarak kullanılırken, React v16.3 ve sonrasında React Hook'ları ile kullanıma devam edilmiştir.

Functional Component'lar basit olarak React Elementleri dönen component'lardır. Dummy Component ya da Dumb Component olarak isimlendirenler de var :) Böyle denmesinin sebebi başlarda state'e erişemiyor olmalarındandı ancak React v16.8 ile bu yapı değişmiştir ve functional componen'lar da artık state'e erişim sağlayabilmektedir. Yine örnek üzerinde inceleyelim dilerseniz:

import React from "react";

const FunctionalComponent = (props) => {
   return (
      <div>
         <h1>I'm {props.type}</h1>
      </div>
   );
};

export default FunctionalComponent;

React v16.8 ile aralarında syntax dışında pek bir fark kalmayan component çeşitlerini kullanım amacınıza, keyfinize ve yapacağınız işe göre seçmek tamamen sizlere kalmış.

Peki, State ne? Prop ne?

Kısaca açıklamak gerekirse:

Prop Component'e geçilen parametre olarak düşünülebilir. State ise Component oluşturulduğunda içinde veri tutacak olan javascript nesnesi/objesi olarak düşünülebilir.

2.2.2 - Props

Properties kelimesinin kısaltmasıdır. Component'ın dinamik ve daha işlevsel olmasını sağlar. Bu özellik sayesinde component'ın çağırıldığı yerde component'a değer ataması yapılabilir. Örnek kısaca örneklendirmek gerekirse:

import React from "react";

const Footer = ({ darkMode }) => {
   const darkTheme = { color: "white", background: "black" };
   const theme = { color: "black", background: "white" };
   const text = "Bu bir footer'dır";

   return (
      <>
         <p class={darkMode === true ? darkTheme : theme}>{text}</p>
      </>
   );
};

export default Footer;

Yukardaki kod parçacığında component'a, prop olarak darkMode değeri verilmiş. Kullanıcıdan gelen tema seçimi prop'a boolean değer olarak geçilecek ve darkMode === true olarak dönerse darkTheme kaynak üzerinde kullanılacaktır, eğer darkMode === false olarak dönerse kullanıcıdan, theme değeri kullanılacaktır.

Bu kısımda return kısmında farklı bir kullanım daha görmekteyiz. Geçtiğimiz kısımlarda Her bir component sadece 1 tane parent element içermelidir! şeklinde bir açıklama yapmıştık. Bu kod parçacığında ise <></> şeklinde React fragment'ları kullanılmıştır.

React Fragment Nedir?

React fragmentleri, birbirine bağlı olmayan birden fazla JSX öğesini bir araya getirmek için kullanılan bir yapıdır. React'te, bir bileşenin yalnızca tek bir kök elementi olabilir. Ancak bazı durumlarda, birden fazla öğeyi birleştirmek isteyebilirsiniz. Fragmentler, <React.Fragment> etiketini kullanarak veya kısayol olarak boş bir etiket (<>...</>) kullanarak oluşturulabilir. Bu, ekstra bir DOM düğümü oluşturmadan birden fazla öğeyi gruplamak için kullanılır. Bunu örneklendirmek gerekirse:

// Kök element olmadan 2 farklı element return edilmeye çalışılıyor. Bu nedenle react hata veriyor.

import React from "react";

const App = (props) => {
   return (
      <p>First Name: {props.first_name}</p> // 1
      <p>Last Name: {props.last_name}</p> // 2
   );
};

export default App;
// Bu kısımda ise hata Fragment'lar eklenerek ortadan kaldırılıyor. Boş tagler yerine <React.Fragment> tagleri de kullanılabilir.

import React from "react";

const App = (props) => {
   return (
      <>
         <p>First Name: {props.first_name}</p>
         <p>Last Name: {props.last_name}</p>
      </>
   );
};

export default App;

2.2.3 - Conditional Rendering

Başta da bahsettiğimiz üzere React uygulamaları SPA (single page application) mimarisine uygun olarak geliştirildiğinden web uygulaması üzerinde sayfalarda gezinirken, sayfanın yenilenmesi söz konusu değildi. Bazı durumlarda aynı sayfa, perm, status, role gibi değişkenlere bağlı olarak farklı şekillerde render edilebilir. Tam bu noktada hayatımıza Conditional Rendering dediğimiz karvram girmektedir. Peki nedir bu conditional rendering?

React'te conditional rendering, bir bileşenin render edilip edilmeyeceğini veya render edilecek olanın ne olacağını belirlemenize olanak tanır. Bu, belirli koşullara bağlı olarak farklı bileşenlerin veya içeriğin görüntülenmesini sağlar.

Örnek olarak, bir kullanıcının oturum açık olup olmadığına bağlı olarak farklı bir hoş geldiniz mesajı göstermek isteyebilirsiniz. Eğer kullanıcı oturum açtıysa, hoş geldiniz mesajı görüntülenir, aksi halde oturum açma bağlantısı gösterilir. Bu örneği kodlar ile açıklamak gerekirse:

import React from "react";

const Greeting = ({ isLoggedIn }) => {
   return isLoggedIn ? <h1>Hoş geldiniz!</h1> : <a href="/login">Oturum aç</a>;
};

export default Greeting;

şeklinde bir kodum olacaktır. Burada, isLoggedIn doğruysa hoş geldiniz mesajı görüntülenir, aksi takdirde oturum açma bağlantısı görüntülenir. Ternary operatörü, JSX içinde koşullu render etme işlemlerini temiz ve okunabilir bir şekilde gerçekleştirmenize olanak sağlar.

Ternary Operator: koşullu bir ifadeyi kısaltmak için kullanılır. Genellikle bir koşulu değerlendirir ve koşul doğruysa bir değeri, koşul doğru değilse başka bir değeri döndürür.

2.2.4 - React Routing

React Routing, React tabanlı bir uygulamada, farklı URL'lere göre farklı bileşenlerin görüntülenmesini sağlayan bir yönlendirme (routing) kütüphanesidir. React Routing, bir SPA (single page application) içinde birden fazla sayfa ve URL'nin yönetilmesini kolaylaştırır ve kullanıcı deneyimini geliştirir.

React Routing, genellikle React projelerinde react-router veya react-router-dom gibi paketler aracılığıyla kullanılır. Bu paketler, bir Router bileşeni sağlar ve bu bileşen altında farklı URL'lere göre eşleşen bileşenlerin nasıl görüntüleneceğini belirtmenizi sağlar. Ayrıca, Link bileşeni gibi bileşenler de sağlarlar, bu bileşenler sayfa geçişlerini sayfayı yenilemeden tetiklemek için kullanılır. Bir routing yapısı örneği vermem gerekirse:

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Home = () => <h1>Ana Sayfa</h1>;
const About = () => <h1>Hakkında</h1>;

const App = () => (
   <Router>
      <div>
         <ul>
            <li>
               <Link to="/">Ana Sayfa</Link>
            </li>
            <li>
               <Link to="/about">Hakkında</Link>
            </li>
         </ul>

         <Route exact path="/" component={Home} />
         <Route path="/about" component={About} />
      </div>
   </Router>
);

export default App;

bloğunu verebilirim. Bu kod parçacığında dikkat edilmesi gereken hususlar şunlardır:

  • Router bileşeni, tüm uygulamayı saran en dışta yer alan bileşendir ve tüm routing işlemlerini yönetir.

  • Link bileşeni, belirli bir URL'ye yönlendirme yapmak için kullanılır. Kullanıcılar bu linklere tıkladıklarında belirtilen URL'ye yönlendirilirler.

  • Route bileşeni, belirli bir URL yoluna karşılık gelen bir bileşeni belirler. Örneğin, / URL'si için Home bileşeni, /about URL'si için About bileşeni gösterilir.

exact attribute'ü, URL eşleşmesinin tam ve kesin olarak belirtilen yol ile sınırlı olmasını sağlar. Başka bir örnekle daha net açıklamak gerekirse <Route exact path="/about" component={About} /> şeklinde bir bloğumuz olduğunu düşünelim. Bu blokta exact kullanılmasaydı /about/xyz alt yollara da erişim sağlanabilecekti ancak exact attribute'ü ile bunu engelledik. Bu yüzden yalnızca /about URL'i kullanılabilir durumdayken diğer alt yollar erişilemez olarak karşımıza çıkacaktır.

2.2.5 - React Hooks

React Hooks, React 16.8 sürümüyle birlikte tanıtılan ve fonksiyonel bileşenlerde state ve diğer React özelliklerini kullanmayı sağlayan API'lardır. Hook'lar, component'ların state ve yaşam döngüsü yönetimini işlevsel bileşenlerde de yapılmasına olanak tanır ve bileşenler arasında mantıksal bir birim olarak tekrar kullanılabilirliği artırır.

Hook'lar, React uygulamalarında kullanılan yaygın durumları ele almak için kullanılır. En yaygın kullanılan hooklar şunlardır:

  • useState: State yönetimi için kullanılır. State tutar ve state değerlerini güncellemek için kullanılır.

  • useEffect: Yan etkileri (API çağrıları, abonelikler, vs.) ele almak için kullanılır. ComponentDidMount, componentDidUpdate ve componentWillUnmount gibi yaşam döngüsü metotlarına karşılık gelir.

  • useContext: Context API'lerini kullanmak için kullanılır. Bileşenler arasında veri paylaşımını sağlar.

  • useReducer: Redux gibi state yönetimini kullanmak için kullanılır. State ve state güncellemelerini bir reducer fonksiyonu aracılığıyla yönetir.

  • useCallback ve useMemo: Performans optimizasyonları için kullanılır. Callback fonksiyonlarının veya memoized değerlerin önbelleğe alınmasını sağlar.

  • useRef: Referansları (ref'leri) yönetmek için kullanılır. Özellikle DOM düğümlerine veya başka bileşenlere erişim sağlamak için kullanılır.

Bu kısımda React Hook'larına bir örnek vererek devam edelim:

import React, { useState, useEffect } from "react";

const Counter = () => {
   const [count, setCount] = useState(0);

   useEffect(() => {
      document.title = `Count: ${count}`;
   }, []);

   return (
      <div>
         <p>Counter: {count}</p>
         <button onClick={() => setCount(count + 1)}>Arttır</button>
         <button onClick={() => setCount(count - 1)}>Azalt</button>
      </div>
   );
};

export default Counter;

Bu örnekte useState hook'u kullanılarak count adında bir state değişkeni oluşturulmuştur. Başlangıç değeri 0'dır. setCount fonksiyonu, count state'ini güncellemek için kullanılır.

useEffect hook'u, bileşen her güncellendiğinde çalışacak bir effect (yan etki) sağlar. Bu örnekte, her bileşen güncellendiğinde sayfa başlığını güncellemek için useEffect kullanılmıştır. useEffect fonksiyonunun içindeki herhangi bir değişken belirtilmemişse, bu etki bileşen her güncellendiğinde tekrar çalışır.

Hook'lar, React bileşenlerini daha okunabilir, yeniden kullanılabilir ve yönetilebilir hale getirir. Ayrıca, component'larda yaşam döngüsü yönetimiyle ilgili bazı karmaşıklıkları ortadan kaldırır ve fonksiyonel programlama yaklaşımını güçlendirir.

React Hook'ları hakkında daha detaylı açıklamalara ulaşabileceğiniz ReactJS Hooks yazısı yayında! Buraya tıklayarak ulaşabilirsiniz.

Tamam, biraz gevşeyip rahatlayalım :) Buraya kadar olan kısım, React'in mimarisi hakkında fikir oluşması içindi. Bu kısma kadar gelip okuyan dostlarıma teşekkür ederim. Üçüncü ve son bölümde sizlerle aynı yollardan geçmiş birisi olarak, doğru olduğuna inandığım tavsiyelerimi sizinle paylaşıyor olacağım. Bu tavsiyelerin sadece ReactJS ya da Front-end üzerine olmayacağını belirtmemde fayda var tabi :) Dilerseniz son bölüme sakin bir girişle devam edelim.

3 - Kendi Tavsiyelerim

Bu kısımda bahsettiğim tavsiyeler yalnızca front-end özelinde değildir. Bir front-end developer olarak değil; bir software developer olarak okumanızda fayda var :)

Yazının sonuna doğru gelirken bu kısımda kişisel tavsiyelerime gelelim. Bunlar, kendi yorumum olmakla beraber herkes için geçerliliği olan tavsiyeler olmayabilir ve tabii ki bu kısımda 'tavsiye verecek olan kişi sen misin gerçekten?' sorusu da tartışılabilir. Teknik kısma hiç bulaşmadan bir şeyler karalamak gerekirse şu şekilde başlayabilirim.

  1. İngilizce Meselesi: Bir yazılımcı olarak öğrenilmesi gereken en öncelikli dilin bir programlama dilinden ziyade İngilizce olduğunu birçok yazılımcı gibi ben de düşünüyorum. En azından teknik bir yazıyı anlayabilecek kadar İngilizce bilmenizin ilerleyen dönemlerde tahmin ettiğinizden daha fazla işinize yarayacağını kesin olarak söyleyebilirim.

  2. Teorik Bilginizi Pratikler İle Taçlandırın: Gördüğüm kadarıyla yeni başlayan kişilerin birçoğu bu hatayı yapıyor (zamanında ben de bu gruba dahildim). Yazılımda teorik olarak bir şeyler öğrenip bunu pratik yaparak desteklemezseniz unutmanız çok da uzun sürmeyecektir. Bu da sizin özgüveninizi kırabilir ve yapamadığınızı düşünmeye itebilir.

  3. Dökümantasyon Okumayı Öğrenin: Üzerinde çalıştığınız teknolojilerin dökümantasyonlarında vakit geçirin ve dökümantasyon üzerinden bir şeyler öğrenmeyi alışkanlık haline getirin.

  4. Dil Fanatiği Olmayın: Her yazılım dilinin farklı alanlarda güçlü bir yanının olduğunu unutmayın. Takım tutar gibi bir dili tutmanın ve fanatiği olmanın anlamı yok. Bu 'gördüğünüz her dili temel seviyede öğrenin' demek değil. Kendinize yakın hissettiğiniz dili keşfettikten sonra onda uzmanlaşın ancak ileri seviye duygusal bir bağ kurmanıza gerek yok.

  5. Yapay Zeka Kullanmaktan Kaçının: Evet! Kişisel olarak, öğrenme aşamasında bir yapay zeka modeline kod yazdırmanın öğrenme eğrimizi negatif yönde etkilediğini düşünüyorum. Tabii ki yapay zekadan yardım alın ancak bu yardım, kodu yapay zekaya yazdırmak şeklinde olmasın. Yazılım mimarisini, araştırmayı, hatalarla baş etmeyi, eksik tarafınızın üzerine gitmeyi de öğrenin. Emin olun kendiniz yaptığınızda özgüveniniz daha çok artacak ve daha çok gururlanacaksınız!

  6. Versiyon Kontrol Sistemi Kullanın: GitHub, GitLab, Bitbucket gibi sistemlerden en az birini kullanmayı öğrenin (mümkünse CLI üzerinden :)). Bu, ilerde parçası olacağınız büyük mimarilerin gelişimini hızlandırmak dahil bir çok konuda işinize yarayacaktır.

  7. Egonuzla Anlaşmayı Öğrenin: Egonuz yüksek ise biraz düşürmeye, düşükse de biraz yükseltmeye çalışın. Yüksek bir ego, çalışma şartlarında olumsuz bir etken olacağından; düşük bir ego ise ciddiye alınmanızın önüne geçeceğinden dengeli tutmaya çalışın.

  8. Güncel İlerleyin ve Güncel Kalın: Değişen ve gelişen teknolojileri takip edin. 'Bu bana yeter' mottosundan uzaklaşın.

  9. Ağınızı Güçlendirin: Birçok alan için olduğu gibi yazılımda da network kavramı önemli bir kriter. İster iş kurun, ister iş arayın, kişisel ağınızın güçlü olması sizin için büyük bir avantaj olacaktır. Bu noktada Porter Gale'in Your network is your net worth (Ağın kadar değerlisin) sözü aklınıza gelsin.

Kapanış

Evet! Oldukça uzun bir yazı oldu, değindiğim birçok konu ve değinmediğim onlarcası ile beraber burada noktalıyorum. ReactJS'in genel hatlarıyla göründüğü ve konu hakkında fikir sahibi olabileceğiniz bir içerik hazırlamaya çalıştım. Sürekli olarak 'bu konuyu da eklemeli miyim?' gibi ikilemlerle birlikte bu kadar toparlayabildim, umarım kolay anlaşılabilir bir içerik olmuştur.

Keyifli kodlamalar diliyorum :)

PreviousReactJS Kancalar (Hooks)NextRedux Toolkit

Last updated