React

React’i Meta’da (o zaman Facebook) çalışanlar 2013’te açtı. Sayfa tek kocaman dosya olmaz. Her bileşen kendi verisini ve görünüşünü tutar. JSX HTML’e benzer, ama JavaScript’in içindedir. Tarayıcı JSX’i kendi okumaz. Derleme aracı onu düz JavaScript’e çevirir.

React değişen ekran içindir: liste uzar, düğmenin durumu değişir, aynı kart çok yerde kullanılır.

• Aynı düğmeyi birkaç yerde kullanmak
• Listeyi veriden çıkarmak
• Formanın hatasını ekranda göstermek
• Next.js gibi bir çatının içinde sayfa

React ile kart, menü ve arama kutusu yazarsın. Durum değişince React yalnız değişen kısmı yenilemeye çalışır. Veritabanı değildir ve sunucuyu kendi kurmaz. React Native ayrı kütüphanedir: telefon uygulaması içindir, aynı şey değildir.

İlk bileşen kolaydır. Zorluk durumun nerede tutulduğudur. Her düğme kendi içinde sayarsa sayfa sonra dağınık olur. Etki veya liste anahtarı yanlışsa ekran fazla yenilenir ya da eski değer kalır.

Avantaj: aynı parça yeniden yazılmaz, büyük arayüz parçalara bölünür. Sınır: JSX ve derleme aracı ek adımdır. Küçük sabit sayfa için düz HTML daha düz yoldur. React her projenin şartı değildir.

Bileşen bir fonksiyondur. Props dışarıdan gelen değerdir. State onun kendi içinde değişen değerdir.

• JSX görünüşü JavaScript’in içine yazar
• Props bileşeni değiştirmez, gelen veridir
• State değişince o parça yenilenir
• Anahtar listede hangi satırın hangisi olduğunu tutar

Bu fonksiyon bir başlık döndürür. Tarayıcıda görmek için onu sayfaya bağlamak ve JSX’i çevirmek gerekir.

function Hello() {
  return <h1>Salam</h1>;
}

Yukarıdaki fonksiyon yalnız bir başlık döndürür. Bu dördü gerçekten kullanılan fikirleri gösterir: dışarıdan gelen değer, değişen sayı, liste ve nota göre değişen cümle. Tarayıcı JSX'i yazıldığı gibi çalıştırmaz. Derleme aracı onu JavaScript'e çevirir. useState React'ten gelir, bu yüzden dosyada projenin zaten gösterdiği import olmalıdır.

Ad alan bir cümle

Greeting bir bileşendir. Süslü parantez içindeki name bir prop'tur: bileşeni kullanan kişiden gelir. Bileşen adı kendi uydurmaz. {name} o değeri cümlenin içine koyar. Üst parça Aysel verirse ekran Salam, Aysel der. Prop değişince cümle değişir. Fonksiyonun kendisi aynı kalır.

function Greeting({ name }) {
  return <p>Salam, {name}</p>;
}

Bir bileşen birçok ad için kullanılabilir. Her kişi için paragrafı kopyalamazsın.

Sayan bir düğme

count state'tir. 0'dan başlar. Ona yeni sayı vermenin yolu setCount'tur. Düğme o anki sayıyı gösterir. onClick kişi basınca çalışır. count + 1 count'u kendi değiştirmez. setCount React'e yeni değeri söyler ve React düğmeyi yeniden çizer. count = count + 1 yazmak React'i atlar, ekran eski sayıda kalır.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Her basış sonraki sayıyı gösterir: 0, sonra 1, sonra 2. Sayfa yenilenmez.

Diziden liste

names olağan veridir. map her adı dolaşır ve bir li döndürür. React key ister ki liste sonra değişince hangi satırın hangisi olduğunu bilsin. Burada adın kendisi anahtardır ve bu yalnız iki ad farklı olduğu için uygundur. Boş dizi satır çizmez. Diziye Nigar eklersen üçüncü satır yeni bir HTML satırı olmadan gelir.

const names = ["Aysel", "Murad"];

function NameList() {
  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

Ekranda iki öğe görünür: Aysel ve Murad. ul listedir. Veri etiketlerin içine teker teker yazılmamıştır.

Nota göre değişen cümle

score yukarıdaki ad gibi prop olarak gelir. Soru işareti iki sözden birini seçer. Not 50 veya daha çoksa paragraf Keçdi der. Değilse Qaldı der. 50'nin kendisi geçer, çünkü koşul büyük veya eşittir. Bu hâlâ bir bileşendir. Karar JavaScript ifadesinin içindedir, ayrı bir HTML dosyasında değil.

function Score({ score }) {
  return <p>{score >= 50 ? "Keçdi" : "Qaldı"}</p>;
}

85 Keçdi gösterir. 40 Qaldı gösterir. Bileşen notu saklamaz. Çağıran saklar.

• React ve JavaScript aynı mı? Hayır. React kütüphanedir. Onu JavaScript yazar.
• React bir çatı mı? Kendini kütüphane sayar. Sayfa yolu ve sunucu için genellikle başka araç eklenir.
• React HTML’in yerine mi geçer? Hayır. Sonuçta tarayıcı yine öğe görür.