React Nedir, Ne İşe Yarar?

React, kullanıcı arayüzleri geliştirmek için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Web uygulamalarının ekranda görünen bölümlerini bileşenler hâlinde oluşturmayı sağlar.

Bir web sayfasındaki arama kutusu, ürün kartı, menü, form veya bildirim alanı ayrı birer React bileşeni olarak tasarlanabilir.

Bu yaklaşım sayesinde aynı bileşen farklı sayfalarda tekrar kullanılabilir. Uygulamanın verileri değiştiğinde React, kullanıcı arayüzünün ilgili bölümlerini günceller.

React Hangi Alanlarda Kullanılır?

• Web uygulamaları ve yönetim panelleri
• E-ticaret sitelerinin kullanıcı arayüzleri
• İnteraktif formlar ve başvuru ekranları
• Veri görselleştirme arayüzleri
• İçerik ve görev yönetimi uygulamaları
• Kurumsal web platformları
• Farklı JavaScript araçlarıyla geliştirilen büyük ölçekli uygulamalar

React tek başına bütün web geliştirme ihtiyaçlarını karşılayan bir sistem değildir. Yönlendirme, veri yönetimi, sunucu işlemleri ve diğer ihtiyaçlar için ek araçlar veya React tabanlı framework'ler kullanılabilir.

React Öğrenmek İçin Önce Ne Bilmek Gerekir?

React'e başlamadan önce web geliştirmenin temel teknolojilerine aşina olmak öğrenmeyi kolaylaştırır.

HTML Temelleri

Başlık, paragraf, bağlantı, form ve diğer HTML öğelerinin nasıl oluşturulduğunu bilmek gerekir. React'teki JSX sözdizimi, HTML'e benzeyen bir yapı kullandığı için HTML bilgisi önemli bir avantaj sağlar.

CSS Temelleri

Renkler, boşluklar, hizalama, Flexbox, Grid ve responsive tasarım gibi konular React bileşenlerinin görsel düzenini oluştururken kullanılır.

JavaScript Temelleri

React öğrenirken en önemli ön koşul JavaScript bilgisidir. Özellikle değişkenler, fonksiyonlar, diziler, nesneler ve asenkron işlemler üzerinde çalışmak yararlıdır.

Bu konulara henüz hâkim olmayanlar, ücretsiz MDN Web Development eğitimlerinden başlayabilir.

React Öğrenmeye Nereden Başlanmalı?

React öğrenmek için en güvenilir başlangıç noktalarından biri React'in resmî öğrenme rehberidir.

Resmî dokümantasyonda bileşen oluşturma, JSX kullanımı, kullanıcı etkileşimleri, state yönetimi ve bileşenler arasında veri paylaşımı gibi temel konular örneklerle anlatılır.

Üstelik birçok örnek doğrudan tarayıcıda düzenlenebilir. Bu nedenle ilk aşamada bilgisayarınıza herhangi bir geliştirme aracı kurmadan da React kodlarını deneyebilirsiniz.

Başlangıç İçin Önerilen Öğrenme Sırası

1. HTML ve CSS bilgilerinizi gözden geçirin.
2. JavaScript fonksiyonlarını ve dizi işlemlerini öğrenin.
3. React'in component mantığını kavrayın.
4. JSX ile arayüz oluşturun.
5. Props kullanarak bileşenlere veri aktarın.
6. State ile etkileşimli arayüzler geliştirin.
7. Event ve form işlemlerini öğrenin.
8. Hooks konularını çalışın.
9. API üzerinden veri almayı öğrenin.
10. Gerçek bir proje geliştirip yayımlayın.

React Bilgisayara Nasıl Kurulur?

React kodlarını denemek için çevrim içi editörler kullanılabilir. Ancak kendi projelerinizi bilgisayarınızda geliştirmek istiyorsanız uygun bir geliştirme ortamı kurmanız gerekir.

1. Node.js Kurun

Öncelikle Node.js internet sitesinden güncel ve desteklenen bir sürüm yükleyin. Node.js ile birlikte npm paket yöneticisi de kullanılabilir.

2. Kod Editörü Seçin

Visual Studio Code gibi bir editör kullanarak proje dosyalarınızı düzenleyebilirsiniz.

3. Vite ile Başlangıç Projesi Oluşturun

React'in temel çalışma mantığını öğrenmek amacıyla sıfırdan proje oluştururken Vite gibi bir geliştirme aracı kullanılabilir.

npm create vite@latest react-ilk-projem -- --template react
cd react-ilk-projem
npm install
npm run dev

Komutları terminalde çalıştırdıktan sonra geliştirme sunucusunun gösterdiği yerel adres üzerinden uygulamayı açabilirsiniz.

Komutların çalışması için bilgisayarınızda Vite'ın gerektirdiği Node.js sürümünün bulunması gerekir.

Güncel kurulum seçenekleri için React kurulum rehberini inceleyebilirsiniz.

React Öğrenirken Bilinmesi Gereken Temel Konular

1. Component Nedir?

Component, React uygulamasının yeniden kullanılabilir arayüz parçasıdır. React bileşenleri genellikle JSX döndüren JavaScript fonksiyonlarıdır.

function HosGeldin() {
  return <h2>React öğreniyorum!</h2>;
}

export default HosGeldin;

Bu örnekte HosGeldin isimli bir bileşen oluşturulur. Bileşen başka bir React bileşeni içinde kullanılabilir.

2. JSX Nedir?

JSX, JavaScript içerisinde HTML'e benzeyen arayüz ifadeleri yazmayı sağlayan sözdizimidir.

JSX ile JavaScript ifadeleri süslü parantezler içerisinde kullanılabilir.

function Kullanici() {
  const isim = "Elif";

  return <h2>Merhaba, {isim}!</h2>;
}

JSX, HTML ile birebir aynı değildir. Örneğin CSS sınıfı tanımlarken class yerine className kullanılır.

3. Props Nedir?

Props, bir bileşene dışarıdan veri aktarılmasını sağlar. Aynı bileşeni farklı bilgilerle tekrar kullanmak için yararlıdır.

function KursKarti({ baslik }) {
  return <h3>{baslik}</h3>;
}

function App() {
  return (
    <div>
      <KursKarti baslik="React Temelleri" />
      <KursKarti baslik="JavaScript" />
    </div>
  );
}

4. State Nedir?

State, bileşenin zaman içinde değişebilen verilerini yönetmek için kullanılır. Kullanıcı bir düğmeye bastığında sayacın artması veya bir form alanının güncellenmesi buna örnektir.

import { useState } from "react";

function Sayac() {
  const [sayi, setSayi] = useState(0);

  return (
    <div>
      <p>Sayaç: {sayi}</p>
      <button onClick={() => setSayi(sayi + 1)}>
        Artır
      </button>
    </div>
  );
}

5. React Hooks Nedir?

Hooks, React bileşenlerinde state ve diğer React özelliklerini kullanmayı sağlayan fonksiyonlardır.

Başlangıç seviyesinde özellikle useState ve useEffect konularını öğrenmek yararlıdır.

useEffect, bileşeni harici sistemlerle senkronize etmek için kullanılır. Ancak her veri hesaplamasında veya her kullanıcı etkileşiminde Effect kullanmak gerekmez. Önce normal JavaScript ve React'in veri akışı mantığı değerlendirilmelidir.

6. Event Handling Nedir?

Event handling, kullanıcı etkileşimlerine karşılık vermeyi ifade eder. Tıklama, form gönderme ve metin değiştirme gibi işlemler bu kapsamdadır.

7. Conditional Rendering Nedir?

Conditional rendering, belirli koşullara göre farklı arayüz içeriklerinin gösterilmesini sağlar.

8. List Rendering Nedir?

JavaScript dizilerindeki veriler map() kullanılarak ekranda listelenebilir. Liste öğelerinin uygun ve kararlı key değerlerine sahip olması önemlidir.

React Ücretsiz Nereden Öğrenilir?

React öğrenmek için kullanılabilecek ücretsiz kaynaklar arasında resmî dokümantasyon, web geliştirme rehberleri ve açık erişimli eğitim içerikleri bulunur.

Ücretsiz eğitim içeriğine erişim ile sertifika veya başka bir tamamlama belgesi alma koşulları aynı olmayabilir. Belgelendirme isteyenlerin ilgili platformun güncel koşullarını ayrıca kontrol etmesi gerekir.

8 Haftalık Ücretsiz React Öğrenme Yol Haritası

React öğrenmek isteyenler için aşağıdaki sekiz haftalık plan, temel kavramları sırayla öğrenmeye ve küçük projeler geliştirmeye yardımcı olabilir.

Plan, günlük ortalama 1-2 saat çalışma ayırabilen ve temel JavaScript bilgisi bulunan kişiler düşünülerek hazırlanmıştır. Hiç kodlama bilmeyenler için ön hazırlık süresi daha uzun olabilir.

1. Hafta: JavaScript Temellerini Güçlendirin

Fonksiyonlar, diziler, nesneler, map(), filter(), destructuring ve modül kullanımını tekrar edin. Basit JavaScript alıştırmaları yapın.

2. Hafta: İlk React Bileşenlerinizi Oluşturun

Vite ile bir React projesi başlatın. Sayfanızı başlık, menü ve içerik kartı gibi küçük bileşenlere ayırın.

3. Hafta: Props ve Liste Mantığını Öğrenin

Tek bir kart bileşenini farklı verilerle kullanın. Bir diziden gelen verileri listeleyin ve koşullara göre içerik gösterin.

4. Hafta: Etkileşimli Uygulamalar Geliştirin

useState kullanarak sayaç, açılır menü veya görev listesi oluşturun. State güncellemelerinin arayüzü nasıl etkilediğini gözlemleyin.

5. Hafta: Form ve Veri Yönetimi Çalışın

Metin alanları, onay kutuları ve form gönderme işlemlerini öğrenin. Gerektiğinde state'i ortak üst bileşene taşıma yaklaşımını deneyin.

6. Hafta: API Kullanımına Geçin

Bir açık API'den veri çekerek sonuçları ekranda gösterin. Yükleniyor, hata ve boş sonuç durumlarını da ele alın.

7. Hafta: Uygulama Yapısını Geliştirin

Birden fazla sayfa içeren örnek bir uygulama hazırlayın. Routing kavramını, bileşen organizasyonunu ve temel test yaklaşımını öğrenin.

8. Hafta: Projenizi Tamamlayın

Kullanılabilir bir uygulama geliştirin. Kodunuzu GitHub'a yükleyin, açıklayıcı bir README dosyası hazırlayın ve uygun bir barındırma hizmetinde yayımlayın.

React Öğrenirken Hangi Projeler Yapılmalı?

React öğrenmenin etkili yollarından biri, her yeni konuyu küçük bir projede kullanmaktır. Yalnızca eğitim videolarını izlemek yerine kendi kodunuzu yazmak ve hataları çözmek öğrenmeyi pekiştirir.

Başlangıç Seviyesi React Projeleri

• Sayaç uygulaması: State ve tıklama olayları
• Yapılacaklar listesi: Formlar, diziler ve liste yönetimi
• Profil kartları: Component ve props kullanımı
• Basit hesap makinesi: Kullanıcı etkileşimleri ve işlem mantığı
• SSS alanı: Koşullu gösterim ve açılır içerikler

Orta Seviyeye Geçiş Projeleri

• Hava durumu arayüzü: API kullanımı ve hata yönetimi
• Film arama uygulaması: Arama, filtreleme ve veri gösterimi
• Not uygulaması: State yönetimi ve yerel veri saklama
• Ürün listeleme sayfası: Kategoriler ve filtreleme
• Kişisel portföy: Routing, responsive tasarım ve yayımlama

Projelerinizi geliştirirken mobil uyumluluk, klavye erişilebilirliği, okunabilir kod ve anlaşılır hata mesajları gibi ayrıntılara da dikkat edin.

React Öğrenmek Ne Kadar Sürer?

React öğrenme süresi kişinin mevcut JavaScript bilgisine, günlük çalışma süresine ve geliştirdiği proje sayısına göre değişir.

JavaScript temellerini bilen biri birkaç haftada React'in temel kavramlarını öğrenmeye başlayabilir. Ancak gerçek projeleri bağımsız geliştirebilmek ve karşılaşılan hataları çözebilmek daha fazla pratik gerektirir.

Süreler resmî eğitim süreleri değil, kişisel çalışma planlaması için hazırlanmış yaklaşık örneklerdir.

React öğrenmek için belirli sayıda gün geçirmekten daha önemli olan, öğrendiğiniz konuları bağımsız olarak uygulayabilmektir.

React Öğrenirken Yapılan Yaygın Hatalar

JavaScript Öğrenmeden React'e Başlamak

Temel JavaScript kavramları yeterince anlaşılmadan React öğrenmeye çalışmak, kod örneklerinin neden çalıştığını kavramayı zorlaştırabilir.

Sadece Video İzlemek

Bir eğitimi izlerken her şey anlaşılır görünebilir. Ancak aynı uygulamayı bağımsız yazmak, eksik kalan bilgileri ortaya çıkarır.

Çok Fazla Kaynak Değiştirmek

Her hafta farklı bir eğitim serisine başlamak yerine bir ana kaynak seçip projelerle ilerlemek daha düzenli bir öğrenme süreci sağlayabilir.

Eski Kurulum Yöntemlerini Kullanmak

Güncelliğini yitirmiş kurulum rehberleri yeni başlayanların gereksiz sorunlarla karşılaşmasına neden olabilir. Özellikle Create React App kullanan eski içeriklerdeki talimatları güncel dokümantasyonla karşılaştırın.

Her Sorunu Yeni Bir Kütüphaneyle Çözmek

Temel React mantığını öğrenmeden çok sayıda ek kütüphane kullanmak uygulamanın karmaşıklığını artırabilir.

Projeleri Tamamlamamak

Birden fazla yarım proje yerine, küçük de olsa tamamlanmış ve yayımlanmış uygulamalar geliştirmek daha somut bir öğrenme deneyimi sağlar.

React Öğrendikten Sonra Hangi Konulara Geçilmeli?

React'in temel kavramlarını öğrendikten sonra modern frontend geliştirme ekosistemindeki diğer araçları inceleyebilirsiniz.

• TypeScript: JavaScript projelerinde tür denetimi
• React Router: Sayfalar ve yönlendirme işlemleri
• Next.js: React tabanlı kapsamlı uygulama geliştirme
• Test araçları: Bileşen ve kullanıcı etkileşimi testleri
• Erişilebilirlik: Farklı kullanıcıların arayüzü kullanabilmesini destekleme
• Performans: Gereksiz işlemleri azaltma ve kullanıcı deneyimini iyileştirme
• Git ve GitHub: Sürüm kontrolü ve proje paylaşımı

React öğrendikten sonra Angular veya Vue gibi diğer frontend teknolojilerini incelemek de farklı geliştirme yaklaşımlarını karşılaştırmaya yardımcı olabilir.

React Eğitim Programları ve Mesleki Gelişim Seçenekleri

React'i ücretsiz kaynaklarla öğrenmek mümkündür. Bununla birlikte belirli bir müfredat doğrultusunda ilerlemek isteyen kişiler üniversitelerin sürekli eğitim merkezleri tarafından sunulan programları da değerlendirebilir.

Bu noktada ücretsiz açık kaynak eğitimleri ile kurumsal eğitim programlarının katılım ve belgelendirme koşullarını birbirinden ayırmak gerekir.

React JS Programlama Eğitim Programı

React alanında yapılandırılmış bir eğitim seçeneği araştıranlar, İstanbul Kent Üniversitesi'nin React JS Programlama Sertifika Programı sayfasını inceleyebilir.

Programın güncel ders içeriği, eğitim süresi, katılım şartları ve belgelendirme bilgileri ilgili sayfadan öğrenilebilir.

Frontend Geliştirme: React, Angular ve Vue

Frontend geliştirme alanındaki farklı teknolojileri birlikte değerlendirmek isteyenler için İstanbul Kent Üniversitesi'nin Frontend Geliştirme: React, Angular ve Vue Eğitim Programı da incelenebilecek seçenekler arasındadır.

React, Angular ve Vue'nun farklı geliştirme yaklaşımlarını öğrenmek, öğrencilerin proje ihtiyaçlarına uygun teknolojileri değerlendirmesine yardımcı olabilir.

React Öğrenmek İçin Üniversite Okumak Şart mı?

React öğrenmek için belirli bir üniversite bölümünden mezun olmak zorunlu değildir. Resmî dokümantasyon, ücretsiz eğitim içerikleri ve bireysel projeler aracılığıyla React öğrenilebilir.

Bununla birlikte bilgisayar bilimleri, yazılım mühendisliği ve ilgili bölümlerde alınan eğitim; algoritmalar, veri yapıları ve yazılım tasarımı gibi konularda güçlü bir temel sağlayabilir.

İş başvurularında aranan koşullar işverene ve pozisyona göre değişir. Teknik bilgi, problem çözme becerisi, proje deneyimi ve iletişim yetkinlikleri de değerlendirmede önem taşıyabilir.

React Öğrenenler Nasıl Portföy Hazırlamalı?

React öğrendikten sonra geliştirilen projeleri düzenli biçimde sunmak, teknik becerilerin görünür olmasını sağlar.

Başlangıç için üç tamamlanmış proje seçilebilir:

1. React'in temel kavramlarını gösteren küçük bir uygulama
2. API kullanan ve hata durumlarını yöneten bir uygulama
3. Birden fazla sayfa veya kapsamlı kullanıcı etkileşimi içeren proje

Her proje için GitHub deposu, kısa açıklama, kurulum talimatları ve mümkünse çalışan bir demo bağlantısı hazırlanabilir.

Projelerde kullanılan teknolojileri ve karşılaşılan sorunlara nasıl çözüm bulunduğunu açıklamak da portföyün daha anlaşılır olmasına yardımcı olur.

React Hakkında Sık Sorulan Sorular

Sonuç: React Öğrenmeye Küçük Projelerle Başlayın

React öğrenmek için yüksek bir bütçe ayırmak gerekmez. Resmî dokümantasyon ve ücretsiz eğitim kaynakları, başlangıç seviyesindeki kişilere kapsamlı öğrenme fırsatları sunar.

En verimli yaklaşım, önce JavaScript temellerini öğrenmek, ardından React'in component, JSX, props ve state mantığını kavramak ve bu bilgileri küçük projelerde uygulamaktır.

Sekiz haftalık bir çalışma planı başlangıç için yol gösterici olabilir. Ancak önemli olan belirli bir sürede bütün konuları bitirmek değil, kendi başınıza çalışan uygulamalar geliştirebilecek düzeye ilerlemektir.

Ücretsiz kaynakların yanında yapılandırılmış eğitim seçeneklerini incelemek isteyenler, İstanbul Kent Üniversitesi'nin React JS Programlama ve Frontend Geliştirme programlarını değerlendirebilir.

Kaynaklar ve İleri Okuma

• React - Resmî Öğrenme Rehberi
• React - Kurulum Rehberi
• React - Sıfırdan Proje Oluşturma
• React - Yeni Uygulama Oluşturma Seçenekleri
• MDN - Web Geliştirme Eğitimi
• freeCodeCamp - React Başlangıç Rehberi
• Vite - Resmî Başlangıç Rehberi

Güncelleme: 2 Kasım 2026. Kurulum araçları ve kütüphane sürümleri zamanla değişebilir. Proje oluştururken güncel resmî dokümantasyon esas alınmalıdır.