İşlevsel Bileşenler ve Props
Bileşenleri işlev olarak oluşturun, props'ları kabul edip destructuring uygulayın ve beklenen veri yapılarını belgelemek için PropTypes veya TypeScript türlerini kullanın.
İşlevsel Bileşenler ve Props, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
React Bileşeni Nedir
React bileşeni, JSX döndüren bir JavaScript işlev, bir JavaScript işlevidir. Bileşenler, React uygulamalarının yapı taşları olan yeniden kullanılabilir ve birleştirilebilir kullanıcı arayüzü parçalarıdır.
function Welcome() {
return <h1>Welcome to CoddyKit!</h1>;
}
// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;Özellikler — Verileri Aşağı Aktarma
Özellikler, üst bileşenden alt bileşene veri aktarmanızı sağlar. Bileşen bunları ilk bağımsız değişkeni olarak düz bir nesne şeklinde alır.
function Greeting({ name, role }: { name: string; role: string }) {
return <p>Hello, {name}! Your role is {role}.</p>;
}
// Usage:
<Greeting name="Alice" role="admin" />Özellikler için TypeScript Arayüzü
Otomatik tamamlama, tür denetimi ve belgelendirme elde etmek için adlandırılmış bir arayüz tanımlayın.
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
variant?: 'primary' | 'secondary' | 'ghost';
}
function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn btn-${variant}`}
>
{label}
</button>
);
}Alt İçerik Özelliği
children özelliği, bileşenin açılış ve kapanış etiketleri arasındaki içeriği tutar. Oluşturulabilir her türlü içeriği kabul etmek için türünü React.ReactNode olarak belirtin.
interface CardProps {
title: string;
children: React.ReactNode;
}
function Card({ title, children }: CardProps) {
return (
<div className="card">
<h2>{title}</h2>
<div className="card-body">{children}</div>
</div>
);
}
// Usage:
<Card title="Hello">
<p>Card content goes here.</p>
</Card>Yapı Bozmayla Varsayılan Özellikler
Varsayılan değerleri doğrudan yapı bozma deseninde ayarlayın. Bu, modern yaklaşımdır; kullanımdan kaldırılan defaultProps API'si artık önerilmemektedir.
function Alert({ type = 'info', message, onClose }: AlertProps) {
return (
<div className={`alert alert-${type}`}>
<span>{message}</span>
<button onClick={onClose}>×</button>
</div>
);
}Bileşenleri Birleştirme
Bileşenler birleştirilir: bir Page, Layout kullanır; Layout da bir Nav ve Sidebar kullanır; bunların her biri Button ve Icon gibi daha küçük atomları kullanır. Bu bileşen ağacı, React bileşen ağacıdır.
Adlandırma Kuralları
Bileşen adları büyük harfle başlamalıdır. Küçük harfli adlar HTML öğeleri olarak kabul edilir. <div> bir HTML div'idir; <Div> ise Div adlı bir React bileşenidir.
Saf Bileşenler
Bir bileşen, aynı özellikler her zaman aynı çıktıyı üretiyor ve oluşturma sırasında hiçbir yan etki oluşmuyorsa saf kabul edilir. Saf bileşenlerin davranışını anlamak ve onları iyileştirmek daha kolaydır.
// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;
// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
return <p>{id}</p>;
};İşlevleri Özellik Olarak Aktarma
İşlevler (geri çağrılar), alt bileşenlerin üst bileşenlerle iletişim kurmasını sağlamak için özellik olarak aktarılır. Üst bileşen işlevi tanımlar; alt bileşen ise onu çağırır.
function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
return (
<li>
{text}
<button onClick={onDelete}>Delete</button>
</li>
);
}Özellikleri Yayma
Yayma işleci, bir nesnedeki tüm özellikleri bileşene aktarır. Sarmalayıcı veya aktarım bileşenleri için kullanışlıdır; ancak dikkatli kullanın, çünkü beklenmedik özellikler aktarılabilir.
function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
return <input {...props} className={`input-base ${props.className || ''}`} />;
}Özellikler Bağlamında Parçalar ve Anahtarlar
Bileşenlerden oluşan bir listeyi alt içerik olarak oluştururken her birinin benzersiz bir key özelliği olmalıdır. Anahtarlar, React'in hangi öğelerin değiştiğini, eklendiğini veya kaldırıldığını belirlemesine yardımcı olur.
Hızlı Kontrol
Modern bir React işlev bileşeninde bir özellik için varsayılan değeri nasıl sağlarsınız?
Özet: Bileşenler ve Özellikler
İşlevsel bileşenler, JSX döndüren JavaScript işlevleridir. Özellikler, üst bileşenden alt bileşene veri aktarır. Özellik türleri için TypeScript arayüzleri kullanın. Alt içerik için children: React.ReactNode kullanın. Varsayılan değerleri yapı bozmada belirtin. Alt bileşenden üst bileşene iletişim için geri çağrıları özellik olarak aktarın. Adlar büyük harfle başlamalıdır.
Sıkça Sorulan Sorular
“İşlevsel Bileşenler ve Props” dersi ücretsiz mi?
Evet — “İşlevsel Bileşenler ve Props” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“İşlevsel Bileşenler ve Props” dersinde ne öğreneceğim?
Bileşenleri işlev olarak oluşturun, props'ları kabul edip destructuring uygulayın ve beklenen veri yapılarını belgelemek için PropTypes veya TypeScript türlerini kullanın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“İşlevsel Bileşenler ve Props” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- JSX: Söz Dizimi ve Dönüştürme
- İşlevsel Bileşenler ve Props
- useState Hook'u: Durum ve Yeniden Oluşturmalar
- Listeler, Anahtarlar ve Koşullu Oluşturma