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:
•class → className
•for → htmlFor
•tabindex → tabIndex
•onclick → onClick
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>© 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.