Bir React bileşeni, JSX döndüren bir JavaScript fonksiyonudur: düğme, kart ya da bütün bir sayfa gibi yeniden kullanılabilir bir arayüz parçası. Onu bir HTML etiketi gibi kullanırsın, <Profile />, ve React ekrana ne koyacağını bulmak için fonksiyonu çağırır. Uygulamalar, bileşenleri başka bileşenlerin içine koyarak kurulur.
App, Profile'ı iki kez render eder ve her Profile bir Avatar render eder. Avatar içindeki baş harfleri değiştir; iki profil de güncellenir, çünkü tek bir tanımı paylaşırlar. Şu an bu listedeki herkes aynı; sonraki sayfa, props, her kopyaya kendi verisini nasıl aktaracağını gösteriyor.
Bileşen yazmak
Bir fonksiyon bileşeninin iki şartı vardır:
- Adı büyük harfle başlar:
profiledeğil,Profile. - React'in render edebileceği bir şey döndürür: JSX, bir metin, bir sayı,
null(hiçbir şey render etme) ya da bunlardan oluşan bir dizi.
function Welcome() {
return <h1>Welcome back</h1>;
}
// Arrow functions work the same way
const Welcome = () => <h1>Welcome back</h1>;
JSX birkaç satıra yayıldığında onu return'den sonra parantezlerle sar. Parantezler olmadan, arkasından satır sonu gelen bir return undefined döndürür ve ondan sonraki her şey yok sayılır.
Ad neden büyük harfle başlamalı
JSX bir etiketin ilk harfine bakar. Küçük harf yerleşik bir HTML öğesi demektir, bu yüzden <div>, <div> olarak kalır. Büyük harf "kapsamdaki bir değişken" demektir, bu yüzden <Profile /> senin Profile fonksiyonunu çağırır. Bir bileşene küçük harfle ad verirsen React bunun yerine o adla bilinmeyen bir HTML öğesi oluşturur:
İkinci satır yalnızca etiketini gösterir ve konsol yalnızca Greeting ran gösterir. React sayfaya boş bir <greeting> etiketi koydu ve küçük harfli fonksiyonu hiç çağırmadı. Bir geliştirme derlemesi ayrıca The tag <greeting> is unrecognized in this browser uyarısı verir; önizleme bir production derlemesi gibi çalışır, bu yüzden yalnızca eksik metni görürsün. Düzeltmek için fonksiyonu Greetings, etiketi de <Greetings /> olarak yeniden adlandır.
Bileşenleri birleştirmek
Bileşenler iç içe kullanılmak için vardır. Bir sayfa bir ağaçtır: en üstte App, sonra yerleşim parçaları, sonra tek tek düğmelere kadar daha küçük parçalar. Her bileşen yalnızca doğrudan render ettiği parçaları bilir, bu yüzden her seferinde tek bir bileşen üzerine düşünebilirsin.
Her LikeButton'ın kendi state'i vardır, bu yüzden bir gönderiyi beğenmek diğerlerine dokunmaz. Her gönderiye bir paylaş düğmesi eklemek için onu bir kez yazar ve Post içine <ShareButton /> eklersin.
Bir bileşen ne zaman bölünmeli
Sabit bir kural yok, ama birkaç işaret bir parçanın kendi bileşenini hak ettiğini söyler: aynı işaretleme iki yerde görünüyor, JSX'in bir bölümünün kendi state'i var (yukarıdaki beğen düğmesi gibi) ya da fonksiyon return'ünü görmek için kaydırmanı gerektirecek kadar uzamış. Bu çizgiler boyunca bölmek her bileşeni tek ekranda okunabilecek kadar küçük tutar. Erken bölmenin maliyeti azdır: bir bileşen sadece bir fonksiyondur, yani ikisini yeniden birleştirmek kolaydır.
Bileşenleri export ve import etmek
Buradaki editörler tek bir dosya tutar, ama gerçek bir proje bileşenleri kendi dosyalarına koyar. Bir dosyanın bir varsayılan export'u (default export) ve istediği kadar adlandırılmış export'u (named export) olabilir:
// Avatar.jsx
export default function Avatar({ initials }) {
return <div className="avatar">{initials}</div>;
}
// Badge.jsx
export function Badge({ label }) {
return <span className="badge">{label}</span>;
}
export function NewBadge() {
return <Badge label="new" />;
}
// Profile.jsx
import Avatar from './Avatar.jsx';
import { Badge, NewBadge } from './Badge.jsx';
export default function Profile() {
return (
<div>
<Avatar initials="AL" />
<Badge label="admin" />
<NewBadge />
</div>
);
}
Varsayılan export herhangi bir adla import edilebilir; adlandırılmış export ise süslü parantez içinde, tam adıyla import edilir. Ekipler genellikle bir stil seçer ve ona bağlı kalır. Dosya adları çoğu zaman bileşenle eşleşir: Avatar.jsx, Avatar'ı export eder.
Bileşenleri saf tut
React, bir bileşenin render sırasında saf bir fonksiyon gibi davranmasını bekler: aynı props ve state aynı JSX'i verir ve render, çalışmadan önce var olan hiçbir şeyi değiştirmez. React bir bileşeni senin kontrol etmediğin zamanlarda birçok kez render edebilir, bu yüzden render sırasında dış değişkenleri düzenleyen bir bileşen her seferinde farklı bir çıktı üretir.
Saf olmayan fincanlar 1, 2, 3 ile başlar. Düğmeye tıkla: misafirlerle ilgili hiçbir şey değişmedi, ama saf olmayan liste artık 4, 5, 6 diyor, çünkü her render paylaşılan guest değişkenine ekleme yaptı. Saf fincanlar numaralarını props'tan alır ve doğru kalır. Geliştirmede Strict Mode tam olarak bu tür bir hatayı ortaya çıkarmak için her bileşeni iki kez render eder; önizleme bir production derlemesi gibi çalışır, bu yüzden burada kayma yalnızca yeniden render ettiğinde görünür.
Bir şeyleri değiştirmek sorun değil, yeter ki render sırasında olmasın. State'i olay işleyicilerinde güncelle, dış dünyayla (zamanlayıcılar, abonelikler, belge başlığı) ise efektlerde konuş.
Bileşenler ve öğeler
Bileşen fonksiyonun kendisidir, Profile. Öğe (element) ise <Profile /> yazdığında JSX'in oluşturduğu şeydir: "Profile'ı bu props ile render et" diyen küçük bir nesne. React öğeleri oluşturur, adını verdikleri bileşenleri çağırır ve sonucu DOM'a çevirir. Bir bileşeni asla kendin Profile() diye çağırmazsın; <Profile /> yazar ve React'in onu çağırmasına izin verirsin, böylece state'ini ve ağaçtaki yerini takip edebilir.
Bu yer önemlidir. Bu örnek bir bileşeni başka bir bileşenin içinde tanımlıyor, ki bu yaygın bir hatadır:
Bir şey yaz, sonra düğmeye tıkla: metnin kaybolur. App'in her render'ı yepyeni bir NameField fonksiyonu oluşturur, bu yüzden React o noktada farklı bir bileşen tipi görür ve eskisini state'iyle birlikte atar. NameField'ı App'in üstüne, dosyanın en üst düzeyine taşı; metin her tıklamadan sağ çıkar. Render sayfası React'in neyi tutacağına nasıl karar verdiğini anlatıyor.
Fonksiyon bileşenleri ve class bileşenleri
React 16.8'de hook'lar gelmeden önce, state'e ihtiyaç duyan bileşenler class olarak yazılırdı:
import { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Class bileşenleri React 19'da hâlâ çalışır; onlarla eski kod tabanlarında ve hâlâ class gerektiren error boundary'lerde karşılaşacaksın. Yeni kod, aynı işleri daha az kodla yapan useState ve useEffect gibi hook'larla fonksiyon bileşenlerini kullanır. Class bileşenleri sayfası her class özelliğini karşılık gelen hook'la eşleştiriyor.
Sıkça Sorulan Sorular
React'te bileşen nedir?
Bileşen, JSX döndüren bir JavaScript fonksiyonu olarak yazılmış, yeniden kullanılabilir bir arayüz parçasıdır. Onu bir HTML etiketi gibi kullanırsın, <Profile />, ve React neyi çizeceğini bulmak için fonksiyonu çağırır.
React bileşen adları neden büyük harfle başlamalı?
JSX, bir etiketin ne olduğuna karar vermek için ilk harfe bakar. <profile /> gibi küçük harfli bir etiket profile adlı bir HTML öğesi olarak ele alınır ve fonksiyonun hiç çağrılmaz. <Profile /> gibi büyük harfle başlayan bir etiket ise senin bileşenine işaret eder.
Fonksiyon bileşenleri ile class bileşenleri arasındaki fark nedir?
İkisi de arayüzü tarif eder. Fonksiyon bileşenleri düz fonksiyonlardır ve state ile efektler için hook'ları kullanır; class bileşenleri React.Component'ten türer ve render ile componentDidMount gibi metotlar kullanır. Yeni kod fonksiyon bileşenlerini kullanır.
React'te saf (pure) bileşen nedir?
Saf bir bileşen aynı props ve state için aynı JSX'i döndürür ve render sırasında kendi dışındaki hiçbir şeyi değiştirmez. React, bileşenleri sürpriz yaşamadan gerektiği kadar sık render edebilmek için buna güvenir.
Bir bileşeni başka bir bileşenin içinde tanımlayabilir miyim?
Bundan kaçın. Başka bir bileşenin içinde tanımlanan bileşen her render'da yeni bir fonksiyondur, bu yüzden React onu her seferinde farklı bir bileşen olarak görür ve state'ini sıfırlar. Bileşenleri dosyanın en üst düzeyinde tanımla.
