Ders İçeriği

Bileşen Tabanlı Mimari

React'in temel felsefesi bileşen tabanlı mimariye dayanır. Bu yaklaşımda, kullanıcı arayüzü küçük, bağımsız ve yeniden kullanılabilir parçalara (bileşenlere) ayrılır. Her bileşen kendi mantığını, durumunu ve görünümünü yönetir.
Bileşen tabanlı mimarinin avantajları:
Yeniden Kullanılabilirlik: Bir kez oluşturulan bileşen, uygulamanın farklı yerlerinde tekrar tekrar kullanılabilir. Örneğin, bir buton bileşeni oluşturduktan sonra, bu butonu uygulamanızın her yerinde aynı görünüm ve davranışla kullanabilirsiniz.
Modülerlik: Her bileşen kendi sorumluluğuna odaklanır. Bu, kodun daha düzenli ve anlaşılır olmasını sağlar. Büyük bir uygulamayı küçük parçalara bölerek, her parçayı bağımsız olarak geliştirip test edebilirsiniz.
Bakım Kolaylığı: Bir bileşende yapılan değişiklik, sadece o bileşeni etkiler. Bu, hata ayıklamayı ve güncellemeleri çok daha kolay hale getirir.
İşbirliği: Farklı geliştiriciler farklı bileşenler üzerinde aynı anda çalışabilir, çünkü bileşenler birbirinden bağımsızdır.

Fonksiyonel Bileşenler ve Sınıf Bileşenleri

React'te bileşen oluşturmanın iki temel yolu vardır: Fonksiyonel Bileşenler ve Sınıf Bileşenleri.

Fonksiyonel Bileşenler

Fonksiyonel bileşenler, JavaScript fonksiyonları olarak tanımlanır ve JSX döndürür. Modern React geliştirmede tercih edilen yöntemdir çünkü daha basit, okunabilir ve performanslıdır.

function Welcome(props) { return <h1>Merhaba, {props.name}!</h1>; } // Arrow function olarak da yazılabilir

const Welcome = (props) => { return <h1>Merhaba, {props.name}!</h1>; };

Sınıf Bileşenleri

Sınıf bileşenleri, ES6 sınıf sözdizimi kullanılarak oluşturulur ve React.Component sınıfından türetilir. Hooks öncesi dönemde state yönetimi için kullanılırdı, ancak artık fonksiyonel bileşenler tercih edilir.

class Welcome extends React.Component { render() { return <h1>Merhaba, {this.props.name}!</h1>; } }

Neden Fonksiyonel Bileşenler Tercih Edilir?
Daha az kod yazımı gerektirir
Hooks ile güçlü özellikler sunar
Daha iyi performans optimizasyonu
Test etmesi daha kolay
Modern React ekosisteminde standart haline gelmiştir

JSX Nedir? Neden Kullanılır?

JSX (JavaScript XML), JavaScript içinde HTML benzeri sözdizimi yazmanıza olanak tanıyan bir sözdizimi uzantısıdır. React ile birlikte kullanılan JSX, kullanıcı arayüzünün nasıl görünmesi gerektiğini tanımlamak için kullanılır.
JSX, teknik olarak zorunlu değildir, ancak React geliştirmede neredeyse evrensel olarak kullanılır çünkü:
Görsel Netlik: HTML'e benzer sözdizimi sayesinde, bileşenin nasıl görüneceğini anlamak çok daha kolaydır.

// JSX ile

const element = <h1>Merhaba Dünya!</h1>;
// JSX olmadan

const element = React.createElement('h1', null, 'Merhaba Dünya!');

JavaScript Gücü: JSX içinde JavaScript ifadeleri kullanabilirsiniz, bu da dinamik içerik oluşturmayı çok kolay hale getirir.

const name = 'Ahmet'; const element = <h1>Merhaba, {name}!</h1>;

Tip Güvenliği: Modern geliştirme araçları JSX'i analiz ederek hataları derleme zamanında yakalar.

JSX Kuralları

JSX kullanırken dikkat edilmesi gereken önemli kurallar vardır:

1. Tek Kök Element Kuralı

Her JSX ifadesi tek bir kök elemente sahip olmalıdır. Birden fazla element döndürmek istiyorsanız, bunları bir parent element içine sarmalısınız.

// Yanlış - Birden fazla kök element

function MyComponent() { return ( <h1>Başlık</h1> <p>Paragraf</p> ); }
// Doğru - Tek kök element

function MyComponent() { return ( <div> <h1>Başlık</h1> <p>Paragraf</p> </div> ); }

// React Fragment kullanımı (gereksiz div oluşturmamak için)

function MyComponent() { return ( <React.Fragment> <h1>Başlık</h1> <p>Paragraf</p> </React.Fragment> ); }

// Kısa Fragment sözdizimi

function MyComponent() { return ( <> <h1>Başlık</h1> <p>Paragraf</p> </> ); }

2. Nitelik (Attribute) Kuralları

JSX'te HTML nitelikleri camelCase olarak yazılır ve bazı isimler farklıdır:

// HTML'de

<div class="container" for="input-id">
// JSX'te

<div className="container" htmlFor="input-id">

Yaygın farklılıklar:
classclassName
forhtmlFor
tabindextabIndex
onclickonClick

3. JavaScript İfadeleri

JSX içinde JavaScript ifadeleri süslü parantezler {} içinde yazılır:

function Greeting() { const user = 'Ayşe'; const time = new Date().getHours(); return ( <div> <h1>Merhaba, {user}!</h1> <p>Saat: {time}</p> <p>Durum: {time < 12 ? 'Günaydın' : 'İyi günler'}</p> </div> ); }

4. Stil (Style) Kullanımı

JSX'te inline stiller JavaScript objesi olarak verilir:

function StyledComponent() { const divStyle = { color: 'blue', backgroundColor: 'lightgray', padding: '10px', borderRadius: '5px' }; return ( <div style={divStyle}> Stillendirilmiş içerik </div> ); }

// Doğrudan obje olarak da verilebilir

function StyledComponent() { return ( <div style={{color: 'red', fontSize: '18px'}}> Kırmızı metin </div> ); }

Bileşenleri İç İçe Kullanma

React'in gücü, bileşenleri birleştirerek daha karmaşık arayüzler oluşturabilmesinden gelir. Bileşenler diğer bileşenleri içerebilir ve bu şekilde hiyerarşik bir yapı oluşturulabilir.

Basit Bileşen Kompozisyonu


function Header() { return ( <header> <h1>Benim Web Sitem</h1> <nav> <ul> <li><a href="#home">Ana Sayfa</a></li> <li><a href="#about">Hakkında</a></li> <li><a href="#contact">İletişim</a></li> </ul> </nav> </header> ); } function Footer() { return ( <footer> <p>&copy; 2024 Benim Web Sitem. Tüm hakları saklıdır.</p> </footer> ); } function MainContent() { return ( <main> <h2>Ana İçerik</h2> <p>Bu sayfanın ana içeriği burada yer alır.</p> </main> ); } function App() { return ( <div className="app"> <Header /> <MainContent /> <Footer /> </div> ); }

Parametreli Bileşenler

Bileşenler props (properties) alarak farklı verilerle yeniden kullanılabilir:

function UserCard({ name, email, avatar }) { return ( <div className="user-card"> <img src={avatar} alt={`${name} avatar`} /> <h3>{name}</h3> <p>{email}</p> </div> ); } function UserList() { const users = [ { id: 1, name: 'Ahmet Yılmaz', email: 'ahmet@example.com', avatar: 'avatar1.jpg' }, { id: 2, name: 'Fatma Kaya', email: 'fatma@example.com', avatar: 'avatar2.jpg' }, { id: 3, name: 'Mehmet Demir', email: 'mehmet@example.com', avatar: 'avatar3.jpg' } ]; return ( <div className="user-list"> <h2>Kullanıcı Listesi</h2> {users.map(user => ( <UserCard key={user.id} name={user.name} email={user.email} avatar={user.avatar} /> ))} </div> ); }

Bileşen İçinde Bileşen Tanımlama

Bazen bir bileşenin içinde sadece o bileşen tarafından kullanılan yardımcı bileşenler tanımlanabilir:

function BlogPost({ title, content, author, date }) { // İç bileşen - sadece BlogPost içinde kullanılır function AuthorInfo({ author, date }) { return ( <div className="author-info"> <span className="author">Yazar: {author}</span> <span className="date">Tarih: {date}</span> </div> ); } return ( <article className="blog-post"> <h2>{title}</h2> <AuthorInfo author={author} date={date} /> <div className="content"> {content} </div> </article> ); }

Pratik Örnekler

Örnek 1: Basit Kartvizit Bileşeni


function BusinessCard({ name, title, company, phone, email }) { return ( <div className="business-card"> <div className="card-header"> <h2>{name}</h2> <h3>{title}</h3> </div> <div className="card-body"> <p><strong>Şirket:</strong> {company}</p> <p><strong>Telefon:</strong> {phone}</p> <p><strong>E-posta:</strong> {email}</p> </div> </div> ); } // Kullanımı function App() { return ( <div> <BusinessCard name="Ahmet Yılmaz" title="Yazılım Geliştirici" company="Tech Solutions Ltd." phone="+90 555 123 4567" email="ahmet@techsolutions.com" /> </div> ); }

Örnek 2: Ürün Kartı Bileşeni


function ProductCard({ product }) { const { name, price, image, description, inStock } = product; return ( <div className={`product-card ${!inStock ? 'out-of-stock' : ''}`}> <img src={image} alt={name} className="product-image" /> <div className="product-info"> <h3>{name}</h3> <p className="description">{description}</p> <div className="product-footer"> <span className="price">{price} ₺</span> <button className="add-to-cart" disabled={!inStock} > {inStock ? 'Sepete Ekle' : 'Stokta Yok'} </button> </div> </div> </div> ); } function ProductGrid() { const products = [ { id: 1, name: 'Laptop', price: 15000, image: 'laptop.jpg', description: 'Yüksek performanslı dizüstü bilgisayar', inStock: true }, { id: 2, name: 'Telefon', price: 8000, image: 'phone.jpg', description: 'Son model akıllı telefon', inStock: false } ]; return ( <div className="product-grid"> {products.map(product => ( <ProductCard key={product.id} product={product} /> ))} </div> ); }

Bu örnekler, React bileşenlerinin nasıl oluşturulduğunu, JSX'in nasıl kullanıldığını ve bileşenlerin nasıl birleştirilerek daha karmaşık arayüzler oluşturulduğunu göstermektedir. Her bileşen kendi sorumluluğuna odaklanır ve yeniden kullanılabilir olacak şekilde tasarlanır.