React Nedir? JavaScript Arayüz Kütüphanesi Anlatımı

React, kullanıcı arayüzlerini bileşenlerden kurmaya yarayan bir JavaScript kütüphanesidir. Ekranın mevcut veriye göre nasıl görünmesi gerektiğini tarif edersin; veri değiştiğinde React sayfayı buna uyacak şekilde günceller. React, React JS ve ReactJS aynı şeydir: Facebook'ta (bugünkü adıyla Meta) geliştirilmiş açık kaynaklı bir kütüphane.

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

İki düğmeye de tıkla. Her Counter kendi sayısını tutar, çünkü her biri kendi state'i olan ayrı bir bileşen kopyasıdır. Üçüncü bir satır ekle, <Counter label="Plums" />, ve yeni, bağımsız bir sayaç belirir.

Bu kısa örnek, React'in üzerine kurulduğu üç fikri zaten gösteriyor: bileşenler (Counter ve App arayüz döndüren fonksiyonlardır), JSX (return içindeki HTML benzeri sözdizimi) ve state (count, değiştiğinde React'in bileşeni yeniden çizmesini sağlayan bir değer).

React'in çözdüğü sorun

Bir kullanıcı arayüzü, bir verinin resmidir. Veri değişince resim de değişmek zorundadır ve ekranda o veriye bağlı her parça onunla birlikte değişmelidir. Kütüphane olmadan bu kodu elle yazarsın: her öğeyi bulur, sonra metnini, sınıfını ya da görünürlüğünü kendin ayarlarsın. Her yeni özellik, güncellemeyi unutmaman gereken bir yer daha ekler.

React bunu tersine çevirir. Belirli bir state için ekranın nasıl olması gerektiğini söyleyen tek bir fonksiyon yazarsın, React de sayfanın hangi parçalarının değişmesi gerektiğini kendisi bulur. Buna bildirimsel (declarative) arayüz denir; her DOM değişikliğini adım adım listeleyen buyurgan (imperative) kodun karşıtıdır. İşte iki stil, tek bir örnekte yan yana:

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

function Declarative() {
    const [count, setCount] = useState(0);

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand, paragrafını düz DOM koduna bırakır (efekt bu kodu ancak React paragrafı oluşturduktan sonra bir kez çalıştırır). Sayıyı bir değişkende tutar, her öğeyi querySelector ile bulur ve metnini elle ayarlar. Declarative ise sadece "sayıyı göster ve çift olup olmadığını göster" der. handleClick içinde .parity'yi ayarlayan satırı sil ve birkaç kez tıkla: ilk satır artık 3'ün çift olduğunu iddia eder, ikinci satır ise senkronu kaybedemez, çünkü metin her render'da count'tan hesaplanır.

React sayfayı nasıl günceller

State değiştiğinde React bileşen fonksiyonunu yeniden çağırır. Bu çağrıya render denir. Fonksiyon arayüzün yeni bir tarifini döndürür, React bunu öncekiyle karşılaştırır ve gerçek sayfada yalnızca farklı olan kısımları değiştirir. Bellekteki bu tarife çoğu zaman sanal DOM (virtual DOM) denir.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Önizlemenin altındaki konsolu aç ve birkaç harf yaz. Her tuş vuruşu yeni değerle bir render kaydeder. Input odağını ve imleç konumunu korur, çünkü React tüm sayfaya değil, yalnızca paragrafın metnine ve input'un değerine dokundu. Render sayfası bir bileşenin tam olarak ne zaman yeniden render edildiğini anlatır.

Bir bakışta bileşenler, JSX ve state

Bileşenler, adı büyük harfle başlayan JavaScript fonksiyonlarıdır. Ekranda ne görünmesi gerektiğini döndürürler ve onları HTML etiketleri gibi kullanırsın: <Counter />. Bir sayfa, düğme gibi küçüklerden bütün bir ayarlar ekranı gibi büyüklere kadar bileşenlerden oluşan bir ağaçtır. Bkz. bileşenler.

JSX, JavaScript içinde işaretleme yazmanı sağlayan sözdizimidir. Süslü parantezler seni JavaScript'e geri götürür; böylece {count} bir değer gösterir, {items.map(...)} ise bir diziyi listeye çevirir. Bir derleme aracı, tarayıcı çalıştırmadan önce JSX'i düz fonksiyon çağrılarına derler.

State, bir bileşenin render'lar arasında hatırladığı veridir. Onu useState hook'u ile oluşturursun; setter'ını çağırmak da React'e bir şeyin değiştiğini söylemenin yoludur. Veri, bir bileşenin argümanları olan props aracılığıyla ebeveynlerden çocuklara doğru akar.

Bu örnek hepsini kullanıyor: state'teki bir diziden render edilen bir liste ve ona ekleme yapan bir form.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Bir görev ekle ve iki şey aynı anda değişir: liste ve altındaki sayı. Sayıya güncellenmesini hiç söylemedin. İkisi de tasks'tan okur, bu yüzden ikisi de onu takip eder. Başlangıç dizisini [] yap; liste bunun yerine "Nothing to do." gösterir.

React ne değildir

React tam bir framework değil, bir kütüphanedir. Bileşenleri, state'i ve bunları arayüze dönüştürmeyi kapsar; eksiksiz bir uygulamanın ihtiyaç duyduğu birkaç şeyi bilerek dışarıda bırakır:

• Yönlendirme (routing). URL'leri sayfalara eşlemenin yerleşik bir yolu yoktur. Bu boşluğu React Router ve framework yönlendiricileri doldurur.
• Veri çekme ve sunucu tarafı render. React sana efektler ve Suspense gibi araçlar verir, ama verinin nereden geldiği ya da sayfaların sunucuda nasıl render edileceği konusunda bir görüş dayatmaz.
• Bir derleme kurulumu. Tarayıcılar JSX'i anlamaz, bu yüzden onu derlemek için Vite gibi bir araca ihtiyacın var.

Framework'ler bu parçaları sağlamak için React'in üstüne kurulur. Next.js ve React Router'ın framework modu yönlendirme, sunucu tarafı render ve veri yükleme ekler; React ekibi de tam bir uygulamaya bunlardan biriyle başlamayı önerir. İstemci tarafı bir uygulama ya da öğrenmek için Vite ile düz React küçük ve hızlı bir başlangıçtır; bkz. React nasıl kurulur.

React ve React Native

React'in kendisi yalnızca bileşenleri ve nasıl değiştiklerini tarif eder. Ayrı bir renderer onları görebileceğin bir şeye dönüştürür. React DOM web sayfalarına render eder; bu sitedeki her örnek bunu kullanır. React Native aynı türden bileşenleri yerel iOS ve Android görünümlerine render eder; bu yüzden <div> ve <p> yerine <View> ve <Text> yazarsın ve ortada HTML ya da CSS dosyası yoktur. Bileşenler, props, state ve hook'lar ikisinde de aynı çalışır, yani burada öğrendiklerin doğrudan oraya taşınır.

React ne zaman öğrenilmeli

React'i JavaScript temellerinden sonra öğren, çünkü React'teki her şey JavaScript'tir. Başlamadan önce şunlarla rahat olmalısın:

• değişkenler, fonksiyonlar ve ok fonksiyonları
• diziler ve onların map ve filter metotları
• nesneler, destructuring ve spread sözdizimi (...)
• import ve export
• veri yüklemek için promise'ler ve async/await

Bunlar tanıdık geliyorsa JSX ve bileşenlerle, sonra props ve state ile başla. Efektler, ref'ler, context ve performans araçları, küçük etkileşimli bileşenler kurmak doğal gelmeye başladığında sırası gelir.