# ReactJS Nedir?

<figure><img src="/files/inFpFTXz9YMfTRg3pFlM" alt="reactjs" width="563"><figcaption></figcaption></figure>

## Giriş

Herkese merhaba :)

**ReactJS** kullanıcı arayüzleri oluşturmak için [**Facebook**](https://tr.wikipedia.org/wiki/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](#1---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 :))

<details>

<summary>Kısaca Konuyu Seçme Sebebim</summary>

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**](https://tr.wikipedia.org/wiki/Angular_\(Framework\))'ın popülerliğini yavaş yavaş yitirip, [**ReactJS**](https://tr.wikipedia.org/wiki/React) ve [**VueJS**](https://tr.wikipedia.org/wiki/Vue.js)'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.

</details>

***

## 1 - ReactJS

{% hint style="warning" %}
`ReactJS Nedir` ile başlamadan hemen önce `HTML`, `CSS` ve `Javascript` hakkında hiçbir fikri olmayan dostlarıma bundan önce [**Front-end Teknolojileri**](https://book.siberyavuzlar.com/yazilim/front-end-teknolojileri) adlı yazımızı okumalarını öneriyorum.
{% endhint %}

> 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**](https://tr.wikipedia.org/wiki/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ü :))

{% hint style="info" %}
**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.
{% endhint %}

***

<figure><img src="/files/6nfR7ZsqwWXML4kA063s" alt="facebook" width="563"><figcaption></figcaption></figure>

**React**'in ortaya çıkma hikayesi ise oldukça garip. [**Facebook**](https://tr.wikipedia.org/wiki/Facebook) şirketi **React**'i geliştiriyor ve kendi web uygulamalarında bol bol kullanıyor. Sonrasında [**Zuckerberg**](https://tr.wikipedia.org/wiki/Mark_Zuckerberg)**,** [**Instagram**](https://tr.wikipedia.org/wiki/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**](https://tr.wikipedia.org/wiki/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**](https://tr.wikipedia.org/wiki/Google)**,** [**AngularJS**](https://tr.wikipedia.org/wiki/AngularJS-2)'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.

{% hint style="info" %}
**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).
{% endhint %}

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**](https://stackoverflow.com/), [**W3Schools**](https://www.w3schools.com/), [**GeeksforGeeks**](https://www.geeksforgeeks.org/), [**MDN**](https://developer.mozilla.org/en-US/) 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 :))

{% hint style="info" %}
**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.
{% endhint %}

***

### 1.4 - JSX Mimarisine Alışmak

<figure><img src="/files/drTGzsiX44d7Mah0lgoU" alt="JSX" width="563"><figcaption></figcaption></figure>

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

{% hint style="info" %}
**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.
{% endhint %}

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

<figure><img src="/files/Y0sfcs7XI9he15kr5lQ9" alt="create-react-app" width="563"><figcaption></figcaption></figure>

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](https://nodejs.org/en) 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
<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**

```javascript
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:

```javascript
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:

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

{% hint style="info" %}
**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.
{% endhint %}

**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:

```javascript
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ış.

<details>

<summary>Peki, State ne? Prop ne?</summary>

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.

</details>

***

#### 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:

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

<details>

<summary>React Fragment Nedir?</summary>

**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:

```javascript
// 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;
```

```javascript
// 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;
```

</details>

***

#### 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:

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

{% hint style="info" %}
**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.
{% endhint %}

***

#### 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:

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

{% hint style="info" %}
**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.
{% endhint %}

***

#### 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:

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

{% hint style="success" %}
**React Hook**'ları hakkında daha detaylı açıklamalara ulaşabileceğiniz `ReactJS Hooks` yazısı yayında! [**Buraya**](https://book.siberyavuzlar.com/yazilim/reactjs-hooks) tıklayarak ulaşabilirsiniz.
{% endhint %}

***

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

{% hint style="success" %}
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 :)
{% endhint %}

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 :)

{% embed url="<https://github.com/emrearikann>" fullWidth="false" %}
Bu yazı Emre Arıkan tarafından hazırlanmıştır.
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.yavuzlar.org/yazilim/reactjs-nedir.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.