Adı : React İle Dinamik Bileşen Yaratma

React, günümüzün en popüler front-end teknolojilerinden biridir. Bu teknoloji, web uygulamalarının tasarımını ve geliştirilmesini kolaylaştırarak kodlama sürecini hızlandırmakta ve sürdürülebilir bir altyapı sunmaktadır.

React, yaratıcı bileşenler ile birlikte dinamik web uygulamaları geliştirmek için en etkili yöntemlerden biridir. Bu yazıda, React ile dinamik bileşen yaratma konusunu ayrıntılı olarak ele alacağız ve değişik örnekler sunacağız.

React'ı kullanarak dinamik bileşenler yaratmak oldukça kolaydır. Sadece birkaç adımla, açıklayıcı bir shablondan başlayarak bir bileşen yazabilirsiniz.

İlk Adım: Bileşenin JavaScript Class'ını Tanımlamak

React, bileşenlerin tanımlanması için JavaScript Class'larına dayanır. Bileşenler, özellikleri ve durumları tutan ve HTML'i özelleştiren metodlarla birlikte tanımlanır.

Bir bileşenin temel özellikleri aşağıdaki gibidir:

- props özellikleri: Bileşenin özellikleri.
- state özellikleri: Bileşenin durum özellikleri.

Aşağıdaki örnek, basit bir bileşen tanımlar.

```
import React, { Component } from 'react';

class MyComponent extends Component {
constructor(props) {
super(props);

this.state = {
message: \"Merhaba Dünya!\"
}
}

render() {
return (

);
}
}
```

Yukarıdaki örnekte, MyComponent adında yeni bir bileşen oluşturduk. Bileşen, Component Class'ından kalıtılmıştır. Bileşenin iki özelliği vardır: props ve state.

props özellikleri, bileşenin dış dünyadaki durumu hakkında bilgi tutar. Örneğin, MyComponent bileşeninin title özelliği, bileşenin başlığını tutar.

state özellikleri, bileşenin iç durumunu ve değişimlerini takip eder. Bu örnekte, bileşenin durumu, merhaba dünya mesajını tutar.

İkinci Adım: HTML Şablonunu Oluşturmak

Bir bileşenin şablonu, HTML kodundan oluşur. React, bunu JSX adı verilen bir formatla birleştirir. JSX, HTML ve JavaScript'in tam birleşimi gibi görünür. Bu nedenle, bir HTML elemanı adını kullanarak, bir bileşenin şablonunu XML benzeri bir sözdizimiyle oluşturabilirsiniz.

Aşağıdaki örnek, MyComponent bileşeninin şablonunun nasıl oluşturulacağını gösterir.

```
import React, { Component } from 'react';

class MyComponent extends Component {
constructor(props) {
super(props);

this.state = {
message: \"Merhaba Dünya!\"
}
}

render() {
return (

);
}
}
```

Yukarıdaki kodda, bileşenin render() metodunda, JSX ile oluşturulan bir HTML kodu şablonuna sahip bir div döndürülmüştür.

Üçüncü Adım: Bileşenleri Sayfada Göstermek

React bileşenleri, bir uygulama sayfasında bileşenleri çağırdığınızda gösterilir. Örneğin, MyComponent bileşenini App bileşeninde kullanabiliriz.

```
import React, { Component } from 'react';
import MyComponent from './MyComponent.js';

class App extends Component {
render() {
return (

);
}
}

export default App;
```

Yukarıdaki örnekte, App bileşeni, MyComponent bileşenini çağırarak, \"React Öğreniyorum\" başlığını gösterir.

Örnekler:

1. Örnek - Sayfa İçi Renk Değiştirme

Bu örnek, bir düğmeye basıldığında sayfa içindeki rengi değiştiren basit bir bileşen oluşturur. Bu örnekte, bir bileşen tıklanır ve sayfa arka plan rengi değiştirilir.

```
import React, { Component } from 'react';

class ColorChanger extends Component {
constructor(props) {
super(props);

this.state = {
color: \"#ffffff\"
}
}

changeColor = () => {
const color = \"#\" + Math.floor(Math.random()*16777215).toString(16);

this.setState({ color });
}

render() {
return (

);
}
}

export default ColorChanger;
```

Yukarıdaki kod, ColorChanger bileşenini tanımlar. Bileşen, düğmeye tıklandığında setState() metodunu kullanarak sayfa arka plan rengini değiştirir.

2. Örnek - Sayfa İçi Metin Değiştirme

Bu örnek, bir satıra tıklanarak metnin değiştirilmesini sağlayan basit bir bileşen oluşturur.

```
import React, { Component } from 'react';

class TextChanger extends Component {
constructor(props) {
super(props);

this.state = {
message: \"Merhaba!\"
}
}

changeText = () => {
const message = (this.state.message === 'Merhaba!') ? 'Nasılsın?' : 'Merhaba!';

this.setState({ message });
}

render() {
return (

);
}
}

export default TextChanger;
```

Yukarıdaki kod, TextChanger bileşenini tanımlar. Bileşen, kullanıcı bir satıra tıkladığında bileşenin durumunu değiştirir ve mesajı \"Merhaba!\" veya \"Nasılsın?\" olarak değiştirir.

Sık Sorulan Sorular

1. React ne işe yarar?

React, React Native gibi Açık Kaynaklı bir JavaScript Kütüphanesi'dir. React, single page uygulamalarınızda (SPA), web veya mobil uygulamalarda ölçeklenebilir, daha kolay ve hatasız bir şekilde kullanabilirsiniz.

2. React Nasıl Kurulur?

npm install create-react-app komutu ile kurulur.

3. Bileşen Nedir?

Bileşenler, React uygulamalarında yeniden kullanılabilen kod bloklarıdır. Sık kullanılan DOM fonksiyonlarını paketleyip çağırabilen bir JavaScript class'ıdır.

4. Props Ve State Nedir?

Props, bileşenler arasında veri iletmeye yarayan objelerdir. State, bileşenin kendi içerisindeki değişkenlerdir.

5. Redux Nedir?

Redux, uygulama genelindeki bağımlılıkları ele almak için bir yapıdır. React uygulamalarında sıklıkla Redux kullanılır.

6. React Native nedir?

Web yerine mobil uygulamalar için kullanılan bir açık kaynaklı framework'ün adıdır. React ekibi tarafından geliştirilmiştir.

7. Hook Nedir?

React Hooks, fonksiyon component'larına eklenen \"state\" ve \"lifecycle\" fonksiyonlarıdır.

8. DOM nedir?

Web sayfasını oluşturan yapının bir parçası olan Document Object Model (DOM), bir web sitesinin erişilebilen programlama arayüzüdür.

9. Webpack Nedir?

Webpack, JavaScript dosyalarını ve web uygulamalarını paketleyen bir JavaScript uygulamasıdır.

10. Redux-Nedir?

Redux, JavaScript uygulamaları için açık kaynak kodlu bir durum yönetim aracıdır. Bu kütüphane, React JS ve React Native uygulamalarında durum bilgisinin yönetilmesi ve uygulama boyunca tutularak kullanılması için öncelikle geliştirildi."