İçeriğe geç
Codary
React Modül 1: React'e Giriş ve JSX

1.1 React Nedir? İlk Bileşen

Kolay
Ders 1 / 21 %0 Ders listesi
1.1 React Nedir? İlk Bileşen 1.2 JSX Kuralları 1.3 JSX İçinde JavaScript İfadeleri 2.1 Bileşenleri Birleştirmek 2.2 Props ile Veri Aktarmak 2.3 children Prop'u ile Sarmalayıcı Bileşenler 2.4 Hatayı Bul: Kart Ekranda Görünmüyor 3.1 useState ile Sayaç 3.2 Olay Yönetimi (Event Handling) 3.3 Nesne ve Dizi State'lerini Güncellemek 3.4 Hatayı Bul: Sonsuz Render Döngüsü 4.1 Liste Render ve key 4.2 Koşullu Render 4.3 Formlar ve onSubmit 5.1 useEffect ile Yan Etkiler 5.2 useRef ve useMemo 5.3 Özel Hook Yazmak 5.4 State'i Yukarı Taşımak (Lifting State Up) 6.1 Proje 1: To-Do Uygulaması 6.2 Proje 2: Filtrelenebilir Ürün Kataloğu 6.3 Proje 3: Alışveriş Sepeti
Misafir olarak çalışıyorsun. İlerlemeni kaydetmek ve sonraki dersleri açmak için giriş yap. Giriş yap / Kayıt ol

React Nedir?

Bir alışveriş sitesini düşün: üstte menü, solda filtreler, ortada ürün kartları, sağ üstte sepet sayacı. Sepete bir ürün eklediğinde sadece sayaç değişmeli, sayfanın geri kalanı değil. Düz JavaScript ile bunu yapmak için hangi elemanın ne zaman güncelleneceğini tek tek yönetmen gerekir; sayfa büyüdükçe bu iş içinden çıkılmaz hale gelir.

React, Meta'nın geliştirdiği ve bu sorunu çözen bir arayüz kütüphanesidir. Instagram, Netflix, Airbnb ve WhatsApp Web React ile yapılır. İki temel fikri vardır:

  1. Bileşenler: Arayüzü küçük, tekrar kullanılabilir parçalara bölersin: Menu, UrunKarti, SepetSayaci.
  2. Veriden arayüz: Ekranın nasıl görüneceğini veriye göre tarif edersin. Veri değişince React ekranın sadece değişen kısmını kendisi günceller.

İlk bileşen

Bileşen, ekranda görünecek şeyi döndüren bir JavaScript fonksiyonudur:
Örnek KodJSX
function Selam() {
  return <h1>Merhaba!</h1>;
}
return'den sonraki <h1> HTML'e benzer ama aslında JSX'tir: JavaScript içinde arayüz yazmanın yolu. Bir sonraki derste kurallarını göreceksin.

Kurallar

  • Bileşen adları büyük harfle başlar (Selam, KursKarti). Küçük harfle başlayan etiketleri React HTML etiketi sanır.
  • Bileşen bir şey döndürmelidir; hiçbir şey göstermeyecekse null döndürür.

Bu editörde

Yazdığın App bileşeni otomatik olarak önizlemeye çizilir. Gerçek bir projede bunu şu satır yapar:
Örnek KodJSX
createRoot(document.getElementById("root")).render(<App />);
Kendi bilgisayarında bir React projesi başlatmak için Node.js kurup şu komutları çalıştırabilirsin:
Örnek KodBASH
npm create vite@latest benim-uygulamam -- --template react
cd benim-uygulamam
npm install
npm run dev

Sık yapılan hatalar

  • return yazmayı unutmak: Bileşen hiçbir şey göstermez.
  • Bileşen adını küçük harfle yazmak: function app() çalışmaz.
Görev Kendin yazarak öğren
  1. App adında bir bileşen (fonksiyon) yaz.
  2. Bileşen Merhaba React! yazan bir h1 başlığı döndürsün.

    Bilgi Kontrol Quizi

    React'te arayüzün tekrar kullanılabilir parçalarına ne denir?

    App.jsx

    Parantez ve tırnaklar kendiliğinden kapanır. Tab girinti ekler; editörden çıkmak için önce Esc, sonra Tab.

    Çıktı Konsolu: Hazır 
    Çıktı görmek için "Kodu Çalıştır" butonuna basın...