CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

JSX nedir?

JSX'in HTML benzeri sözdizimiyle arayüz tanımlamayı sağladığını öğrenirsin.

JSX nedir?

JSX, JavaScript dosyalarının içine HTML benzeri sözdizimi yazmaya olanak tanıyan bir React eklentisidir. return <h1>Merhaba</h1>; yazdığında aslında arka planda React.createElement(...) çağrısı üretilir.

JSX sayesinde arayüzü tasarlayan kodu doğrudan bileşenin yanına koyarsın; böylece görsel ve mantık bir arada durur. JSX bir şablon dili değildir; tamamen JavaScript'in bir parçasıdır.

JSX'in en büyük avantajı, bildirimsel olmasıdır: ekranda ne görmek istediğini söylersin, React gerisini halleder.

JSX neden kullanışlı?

JSX olmadan bir arayüzü React.createElement ile elle yazmak uzun ve okunması zor olur. JSX, HTML'e benzer şekliyle aynı yapıyı kısa ve anlaşılır yazmanı sağlar.

JSX'te süslü parantez { } içine herhangi bir JavaScript ifadesi yerleştirebilirsin. Böylece veriyi görselle bağlamak tek satırda halledilir.

JSX derlenmiş JavaScript'tir; tarayıcı onu doğrudan anlamaz. Bu yüzden Vite veya Babel gibi bir araç kodu dönüştürür.

Uygulama İlk JSX bileşeni

Aşağıdaki iskeleti tamamla. Title adında bir fonksiyon yaz; <h1>Hosgeldin</h1> döndürsün ve dışa aktarılsın.

Başlangıç kodu

App.jsx
// Title bileşenini buraya yaz

Örnek çözüm

App.jsx
function Title() {
  return <h1>Hosgeldin</h1>;
}

export default Title;

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 JSX'in derlendiği çağrı

  • React.createElement Doğru cevap
  • React.makeNode
  • React.build
  • document.createElement

Açıklama: JSX, arka planda React.createElement çağrılarına derlenir.

2 JSX'i derleyen araç

Soru 
JSX'i tarayıcının anlayacağı koda ____ veya Babel çevirir.
Cevap 
JSX'i tarayıcının anlayacağı koda Vite veya Babel çevirir.

Açıklama: Vite veya Babel, JSX'i React.createElement çağrılarına çevirir.

3 Kavramları eşleştir

Kavram Anlamı
JSX HTML benzeri sözdizimi
{ } İfade yuvası
React.createElement Derlenen çağrı
Babel Dönüştürücü

Başlangıç bölümündeki tüm dersler

1 React girişi

  1. React nedir?
  2. Kurulum ve Vite
  3. İlk bileşen
  4. Özet - React girişi

2 JSX temelleri

  1. JSX nedir?
  2. İfadeler ve süslü parantez
  3. Öznitelikler ve className
  4. Özet - JSX temelleri

3 Bileşenler

  1. Bileşen mantığı
  2. Bileşen ağacı
  3. İsimlendirme kuralları
  4. Özet - Bileşenler

4 Profil kartı

  1. Proje: Profil kartı
  2. Avatar bileşeni
  3. Bilgi listesi
  4. Kartı birleştir

5 Props

  1. Props nedir?
  2. Props okuma
  3. Children prop
  4. Varsayılan props
  5. Özet - Props

6 Koşullu render

  1. Koşullu render nedir?
  2. Ternary operatör
  3. Mantıksal AND (&&)
  4. Erken return
  5. Özet - Koşullu render

7 Liste render

  1. Liste render nedir?
  2. key özniteliği
  3. Diziden bileşen
  4. Filtreleme ve sıralama
  5. Özet - Liste render

8 Alışveriş listesi

  1. Proje: Alışveriş listesi
  2. Öğe bileşeni
  3. Liste gövdesi
  4. Boş durum

9 Olaylar

  1. Olaylar (events)
  2. Olay nesnesi
  3. Form olayları
  4. Özet - Olaylar

10 useState

  1. State nedir?
  2. useState çağrısı
  3. State güncelleme
  4. Birden fazla state
  5. Özet - useState

11 Sayaç uygulaması

  1. Proje: Sayaç uygulaması
  2. Sayı ve buton
  3. Azaltma ve sıfırlama
  4. Sınır kontrolü

12 Formlar

  1. Kontrollü input
  2. Form gönderimi
  3. Birden çok alan
  4. Özet - Formlar

13 Stil

  1. CSS ile stil
  2. CSS Modules
  3. Inline stiller
  4. Özet - Stil

14 styled-components

  1. styled-components nedir?
  2. Props ile stil
  3. Tema kullanımı
  4. Özet - styled-components

15 useReducer

  1. useReducer nedir?
  2. Aksiyon ve state
  3. useState vs useReducer
  4. Özet - useReducer

16 useEffect

  1. useEffect nedir?
  2. Bağımlılık dizisi
  3. Temizlik fonksiyonu
  4. Özet - useEffect

17 Context

  1. Context nedir?
  2. createContext
  3. Provider ve useContext
  4. Özet - Context

18 useRef

  1. useRef nedir?
  2. DOM erişimi
  3. Zamanlayıcı örneği
  4. Özet - useRef

19 Todo uygulaması

  1. Proje: Todo uygulaması
  2. Todo giriş formu
  3. Todo listesi
  4. Filtre ve özet

20 Başlangıç finali

  1. Meydan okuma: Hava durumu kartı
  2. Meydan okuma: Sepet özeti
  3. Meydan okuma: Sayaç ve sıfırlama
  4. Meydan okuma: Açılır menü