React.js Başlangıç Rehberi: Modern Web Uygulamaları Geliştirme

Günümüz web dünyasında kullanıcı deneyimi her şeyden önce geliyor. Hızlı yüklenen, dinamik ve kullanıcı etkileşimlerine anında yanıt veren web siteleri geliştirmek artık bir lüks değil, zorunluluk haline geldi. İşte tam bu noktada, Facebook (Meta) tarafından geliştirilen ve açık kaynaklı olarak sunulan React kütüphanesi devreye giriyor. Eğer siz de modern web geliştirme dünyasına adım atmak istiyorsanız, hazırladığımız bu kapsamlı React.js Başlangıç Rehberi sayesinde temel kavramları öğrenebilir ve ilk modern web uygulamanızı geliştirmeye başlayabilirsiniz.

React, kullanıcı arayüzleri (UI) oluşturmak için kullanılan en popüler JavaScript kütüphanelerinden biridir. Geleneksel web geliştirme yöntemlerinin aksine, web sayfalarını tek bir bütün olarak değil, "Component" adı verilen küçük, bağımsız ve yeniden kullanılabilir parçalara bölerek yönetmemizi sağlar. Bu modüler yaklaşım, hem kodun okunabilirliğini artırır hem de büyük ölçekli projelerin bakımını son derece kolaylaştırır.

React.js Başlangıç Rehberi ile Neden Bu Teknolojiyi Seçmelisiniz?

Web geliştirme dünyasında Angular, Vue ve Svelte gibi birçok alternatif bulunmasına rağmen, React'in pazar payı ve popülaritesi her geçen gün artmaktadır. Peki, modern web uygulamaları geliştirmek için neden React'i tercih etmelisiniz?

Birincisi, Sanal DOM (Virtual DOM) teknolojisidir. Geleneksel web sayfalarında herhangi bir veri değiştiğinde tüm sayfa veya tüm DOM ağacı yeniden yüklenir. Bu durum büyük projelerde ciddi performans kayıplarına yol açar. React ise bellek üzerinde sayfanın sanal bir kopyasını (Virtual DOM) tutar. Bir değişiklik olduğunda, sadece değişen kısmı tespit eder ve gerçek DOM üzerinde yalnızca o alanı günceller. Bu sayede olağanüstü bir hız ve performans elde edilir.

İkinci olarak, bileşen tabanlı (Component-Based) yapısıdır. Geliştirdiğiniz bir butonu, arama çubuğunu veya kullanıcı kartını projenin farklı yerlerinde, hatta farklı projelerde bile tekrar tekrar kullanabilirsiniz. Bu durum kod tekrarını önler ve geliştirme sürecini ciddi oranda hızlandırır.

Üçüncüsü ise arkasındaki devasa topluluk desteğidir. Meta'nın sürekli güncellediği ve desteklediği React, dünyadaki en büyük geliştirici topluluklarından birine sahiptir. Bu sayede karşılaştığınız herhangi bir sorunun çözümünü internette saniyeler içinde bulabilirsiniz.

React Öğrenmeden Önce Neleri Bilmelisiniz?

React doğrudan bir programlama dili değil, bir JavaScript kütüphanesidir. Bu nedenle React öğrenmeye başlamadan önce temel web teknolojilerine hakim olmanız gerekir. Temel düzeyde HTML ve CSS bilgisinin yanı sıra, modern JavaScript (ES6+) standartlarını iyi bilmek işinizi oldukça kolaylaştıracaktır.

Özellikle şu JavaScript konularına aşina olmalısınız:

• let ve const ile değişken tanımlama,
• Arrow Functions (Ok Fonksiyonları),
• Destructuring (Seçerek Değişkene Atama),
• Array Methods (Özellikle map, filter ve reduce),
• Promises ve Async/Await yapısı.

React'in Temel Kavramları

React dünyasına adım attığınızda sıkça karşılaşacağınız ve öğrenmeniz gereken temel yapı taşları şunlardır:

1. JSX (JavaScript XML) Nedir?

JSX, JavaScript dosyalarınızın içinde HTML benzeri kodlar yazmanıza olanak tanıyan özel bir sözdizimi uzantısıdır. React projelerinde kullanımı zorunlu olmasa da, kod yazmayı ve görsel yapıyı anlamayı çok kolaylaştırdığı için standart olarak kabul edilir.

Örnek bir JSX kullanımı şu şekildedir:

const element = <h1 className="baslik">React Dünyasına Hoş Geldiniz!</h1>;

2. Components (Bileşenler)

Bileşenler, React uygulamalarının yapı taşlarıdır. Sayfadaki her bir arayüz elemanını bir bileşen olarak düşünebilirsiniz. Modern React geliştirme süreçlerinde neredeyse tamamen "Fonksiyonel Bileşenler" (Functional Components) kullanılır.

Basit bir fonksiyonel bileşen örneği:

function Selamla() {
  return (
    <div className="kart">
      <h2>Merhaba Geliştirici!</h2>
      <p>React öğrenmek harika bir deneyim.</p>
    </div>
  );
}

3. Props (Özellikler)

Bileşenlerin dinamik olmasını sağlayan en önemli özelliklerden biri props yapısıdır. Props, bir üst bileşenden (Parent) alt bileşene (Child) veri aktarmak için kullanılır. Props verileri salt okunurdur (read-only), yani alt bileşen kendisine gelen props değerini doğrudan değiştiremez.

function KullaniciKarti(props) {
  return (
    <div className="profil">
      <h3>Kullanıcı: {props.isim}</h3>
      <p>Rol: {props.rol}</p>
    </div>
  );
}

4. State (Durum Yönetimi) ve Hooks

State, bir bileşenin kendi içinde barındırdığı, zamanla değişebilen ve güncellendiğinde bileşenin yeniden ekrana çizilmesini (render) sağlayan dinamik verilerdir. Modern React'te state yönetimi için "Hook" adı verilen özel fonksiyonlar kullanılır. En temel hook useState fonksiyonudur.

import React, { useState } from 'react';

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

  return (
    <div className="sayac-kutu">
      <p>Güncel Değer: {sayi}</p>
      <button onClick={() => setSayi(sayi + 1)}>Artır</button>
    </div>
  );
}

İlk React Projenizi Başlatın

React dünyasına pratik bir giriş yapmak için bilgisayarınızda Node.js kurulu olmalıdır. Projenizi hızlıca oluşturmak için günümüzün en popüler ve hızlı aracı olan Vite aracını kullanabilirsiniz. Terminalinizi açın ve sırasıyla şu komutları çalıştırın:

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

Bu komutlar çalıştıktan sonra terminalde size yerel bir adres (örneğin http://localhost:5173) verilecektir. Bu adresi tarayıcınızda açarak ilk React uygulamanızı canlı olarak görebilir ve kodları düzenlemeye başlayabilirsiniz.

Sonuç ve Yol Haritası

React öğrenmek, modern web geliştirme süreçlerinde kendinizi kanıtlamanız ve harika projeler üretmeniz için mükemmel bir kapı aralar. Bu rehber ile React'in temel felsefesini, bileşen mantığını ve durum yönetimini kavradınız. Şimdi yapmanız gereken, bolca pratik yapmak ve küçük ölçekli projeler (yapılacaklar listesi uygulaması, hava durumu uygulaması vb.) geliştirmektir.

Kendinizi daha da geliştirmek için React resmi web sitesi üzerindeki dökümanları inceleyebilir, ardından React Router ile sayfa yönlendirmelerini ve Redux Toolkit veya Zustand ile küresel durum yönetimini öğrenebilirsiniz. Yolculuğunuzda başarılar dileriz!