Özet - JSX temelleri

JSX ifade, öznitelik ve stillerini birleştirerek bir karşılama kartı yazarsın.

Özet - JSX temelleri

Bu grupta JSX'in ne olduğunu, süslü parantezlerle JavaScript ifadelerini nasıl gömdüğünü ve özniteliklerin JSX'te nasıl yazıldığını öğrendin. Şimdi bunları birleştirme zamanı.

Akış şöyledir: bir fonksiyon tanımlarsın, içinde return ile JSX döndürürsün, süslü parantezle dinamik değer koyarsın ve className, htmlFor gibi camelCase öznitelikleri yazarsın. Son olarak bileşeni export default ile dışa aktarırsın.

Bir sonraki adımda bunları tek bir bileşende birleştireceksin.

Uygulama Karşılama kartı

Aşağıdaki iskeleti tamamla. Welcome adında bir bileşen yaz; <section className="welcome"> içinde <h1>Merhaba</h1> ve <p>React'e hosgeldin</p> döndürsün. Dışa aktarmayı unutma.

Örnek çözümü göster

function Welcome() {
  return (
    <section className="welcome">
      <h1>Merhaba</h1>
      <p>React'e hosgeldin</p>
    </section>
  );
}

export default Welcome;

Kendini test et

Süslü parantez içine ne konur?
- HTML etiketi
- CSS kuralı
- Yorum
- JavaScript ifadesi
Cevabı göster

JavaScript ifadesi — Süslü parantez içine JavaScript ifadesi konur.
Akış adımlarını eşleştir

function

Tanımla
return

Döndür
className

Sınıf ver
export default

Dışa aktar

Sıradaki ders: Bileşen mantığı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler