React mı Angular mı: Farklar ve Hangisi Ne Zaman Seçilmeli

React kullanıcı arayüzleri kurmak için bir JavaScript kütüphanesidir, Angular ise web uygulamaları kurmak için eksiksiz bir framework'tür. React ile bileşenleri JSX döndüren fonksiyonlar olarak yazar ve yönlendirme, formlar ve veri için ayrı araçlar seçersin; Angular ile HTML şablonlu TypeScript class'ları yazarsın ve yönlendirme, formlar, bir HTTP istemcisi ve bağımlılık enjeksiyonu kutudan çıkar. İşte ikisinde de aynı sayaç.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

O bileşenin Angular sürümü:

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Clicked {{ count() }} times</button>
    `,
})
export class CounterComponent {
    count = signal(0);

    increment() {
        this.count.update((n) => n + 1);
    }
}

Fikirler bire bir eşleşir: React'in useState(0)'ı Angular'ın signal(0)'ıdır, onClick={...}, (click)="..."'dır ve {count}, {{ count() }}'dir. Fark kodun nerede yaşadığıdır: React'te işaretleme döndüren tek bir fonksiyon, Angular'da bir class artı bir şablon metni.

Kütüphane ve framework

Diğer farkların çoğunu yönlendiren fark budur. React render'ı ve bileşen state'ini kapsar. Geri kalan her şey senin seçimindir:

• Yönlendirme: React Router, TanStack Router ya da bir framework'ün dosya tabanlı rotaları.
• Veri çekme: bir efektte fetch, TanStack Query ya da bir framework'ün loader'ları ve sunucu bileşenleri.
• Formlar: düz kontrollü input'lar, React 19 form action'ları ya da React Hook Form.
• Global state: context, Zustand, Redux Toolkit, Jotai.

Birçok ekip bu seçimlerin çoğunu, yönlendirmeyi, veri yüklemeyi ve sunucu tarafı render'ı bir araya getiren Next.js ya da framework modunda React Router gibi bir React framework'üyle başlayarak atlar.

Angular bu seçimleri senin yerine yapar: @angular/router, reaktif ve şablon tabanlı formlar, HttpClient, bağımlılık enjeksiyonu, bir test kurulumu ve bileşen ile servis üreten ng CLI'ı. Her Angular projesi genel olarak aynı görünür; büyük kuruluşların onu seçmesinin yaygın bir nedeni budur. Bedeli, öğrenilecek daha geniş bir yüzey ve bir parçayı değiştirmek için daha az özgürlüktür.

JSX ve şablonlar

React bileşenleri JavaScript olan JSX döndürür. Koşullar && ya da bir ternary'dir, listeler .map()'tir ve JavaScript'te yapabildiğin her şeyi işaretlemede de yapabilirsin. Angular şablonları kendi sözdizimi olan HTML'dir: @if, track ile @for, [property] bağlamaları, (event) bağlamaları ve {{ }} interpolasyonu. Şablonlar işaretlemeyi ve mantığı gözle görülür şekilde ayrı tutar; JSX ise onları tek bir yerde tutar ve sana dilin tamamını verir. İşte karşılaştırılacak ikinci özellik, filtrelenmiş bir liste.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    console.log('render, query =', JSON.stringify(query));

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

Kutuya an yaz ve konsolu izle: tüm fonksiyon her tuş vuruşunda yeniden çalışır ve visible sadece yeniden hesaplanır. Şablonu kendi dosyasında olan aynı bileşen Angular'da:

import { Component, computed, signal } from '@angular/core';

@Component({
    selector: 'app-fruit-filter',
    templateUrl: './fruit-filter.component.html',
})
export class FruitFilterComponent {
    fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
    query = signal('');

    visible = computed(() =>
        this.fruits.filter((f) => f.toLowerCase().includes(this.query().toLowerCase()))
    );
}

<input #box [value]="query()" (input)="query.set(box.value)" placeholder="Filter fruit" />
<ul>
    @for (fruit of visible(); track fruit) {
        <li>{{ fruit }}</li>
    } @empty {
        <li>No match</li>
    }
</ul>

Angular'da computed, visible'ın query'ye bağlı olduğunu bildirir, böylece Angular onu hangi şablonun okuduğunu bilir ve visible'ı yalnızca query değiştiğinde yeniden hesaplar. React'te bir bildirim yoktur: bileşen yeniden çalışır ve yeniden hesaplar. React'teki key={fruit} ile Angular'daki track fruit aynı işi yapar: framework'e hangi liste öğesinin hangisi olduğunu söyler.

Önce JavaScript, önce TypeScript

React, JSX ile düz JavaScript'tir; TypeScript ise eklediğin bir seçenektir (npm create vite@latest my-app -- --template react-ts). Yeni React projelerinin çoğu onu ekler, ama React'i tipleri bilmeden öğrenebilirsin. Angular TypeScript için yapılmıştır: decorator'lar, bağımlılık enjeksiyonu ve şablon tip denetleyicisi hepsi onu varsayar. Ekibin zaten tipli kod yazıyorsa bu bir sorun değildir; programlamaya yeniysen aynı anda öğrenilecek bir şey daha demektir. TypeScript ile React sayfası tiplemenin React tarafında nasıl çalıştığını gösteriyor.

Veri akışı ve değişiklik algılama

İkisi de veriyi girdiler aracılığıyla aşağı aktarır (React'te props, Angular'da input() ya da @Input()) ve olayları callback'ler aracılığıyla yukarı gönderir (React'te props olarak aktarılan fonksiyonlar, Angular'da output() ya da @Output()). Fark, her birinin bir değişikliği nasıl fark ettiğidir.

React state'i değişmez anlık görüntüler olarak ele alır. Bir setter'ı yeni bir değerle çağırırsın, React bileşen fonksiyonunu yeniden çalıştırır, yeni JSX'i eskisiyle karşılaştırır ve DOM'u yamalar. Hiçbir şey otomatik olarak takip edilmez: render fonksiyonu bağımlılık grafiğinin kendisidir. Bunun üzerine düşünmek basittir; bedeli ise bazen işi atlamak için memo, useMemo ya da useCallback eklemen (ya da React Compiler'ın eklemesine izin vermen) gerekmesidir.

Angular geçmişte herhangi bir async olayı algılamak için Zone.js kullanır, sonra bileşen ağacını değişen bağlamalar için kontrol ederdi. Modern Angular signal'lara geçiyor: signal, computed ve effect her şablonun hangi değerleri okuduğunu takip eder, böylece Angular yalnızca signal'ları değişen bileşenleri kontrol eder; son sürümler ise Zone.js olmadan tamamen çalışabilir. Angular şablonları, React bileşenleri gibi her değişiklikte tüm bir fonksiyonu yeniden çalıştırmaz.

Günlük kodda ikisi mekaniklerin düşündürdüğünden daha yakın hissettirir: state tutarsın, ondan değerler türetirsin ve ekran takip eder.

State yönetimi

React'te yerel state useState ya da useReducer'dır, paylaşılan state bir ebeveyne taşınır ya da context'e konur, uygulama geneli state ise çoğu zaman küçük bir store kütüphanesinde yaşar. Angular'da yerel state bileşen üzerindeki signal'lardır ve paylaşılan state genellikle ihtiyaç duyulan her yere enjekte edilen bir serviste yaşar; bağımlılık enjeksiyonu Angular'ın "birbirinden uzak iki bileşen veriyi nasıl paylaşır" sorusuna yerleşik cevabıdır. NgRx, Redux tarzı bir store isteyen ekipler için vardır. React'in bağımlılık enjeksiyonu sistemi yoktur; benzer bir rolü context doldurur.

Karşılaştırma tablosu

Öğrenme eğrisi

React ile başlamak daha hızlıdır. JavaScript bilen bir başlangıç seviyesindeki geliştirici bileşenleri, props'u, state'i ve efektleri öğrendikten sonra gerçek bir şey kurabilir; React nedir sayfası tüm fikri birkaç dakikada anlatıyor. Öğrenme daha sonraya kayar: bir yönlendirici, bir veri çekme yaklaşımı ve bir form stratejisi seçmen gerekir ve farklı React kod tabanları farklı seçimler yapar.

Angular'ın başlangıcı daha diktir: TypeScript, decorator'lar, şablonlar, signal'lar, bağımlılık enjeksiyonu, yönlendirici ve form modülleri, bazı API'ler için de RxJS. Ama onu bir kez öğrendiğinde her Angular projesi aynı parçaları aynı şekilde kullanır, bu yüzden projeler arasında geçmek daha kolaydır.

Hangisi ne zaman seçilmeli

React'i şu durumlarda seç:

• Küçük bir çekirdek ve geri kalanı seçme özgürlüğü istiyorsan ya da sunucu tarafı render ve dosya tabanlı rotalar için Next.js gibi bir framework istiyorsan.
• Aynı bileşen modelini yeniden kullanan React Native ile mobil uygulamalar da kurmayı planlıyorsan.
• Ekip çoğunlukla JavaScript'te rahatsa ya da front-end geliştirmeyi öğreniyorsan ve çalışan bir uygulamaya giden en kısa yolu istiyorsan.

Angular'ı şu durumlarda seç:

• Büyük bir ekibin birçok projede, tartışılacak daha az mimari kararla, tek bir standart yapıya ihtiyacı varsa.
• Formların, HTTP'nin, yönlendirmenin ve bağımlılık enjeksiyonunun tek bir ekip tarafından birlikte bakımının yapılmasını ve CLI tarafından birlikte yükseltilmesini istiyorsan.
• Ekip zaten TypeScript yazıyorsa ve class tabanlı servisleri ve şablon ile mantık arasındaki net ayrımı seviyorsa.

İkisi de olgun, production'da yaygın olarak kullanılıyor ve bir kariyer için iyi. Beceriler aktarılır: bileşenler, tek yönlü veri akışı, türetilmiş state ve reaktif güncellemeler ikisinde de aynı fikirlerdir.