Blog

React Eğitimi: Yeni Başlayanlar İçin Rehber

Audrey Lopez

Audrey Lopez

13 June 2025

React Eğitimi: Yeni Başlayanlar İçin Rehber

Hoş geldiniz, hevesli React geliştiricisi! Harika bir seçim yaptınız. React, kullanıcı arayüzleri oluşturmak için güçlü ve popüler bir JavaScript kütüphanesidir ve onu öğrenmek, web geliştirme becerilerinizi artırmanın kesin bir yoludur. Bu kapsamlı, adım adım kılavuz sizi sıfırdan kahramana taşıyacak ve 2025'te kendi React uygulamalarınızı oluşturmaya başlamak için ihtiyacınız olan pratik bilgiyle donatacak. Sadece okumaya değil, yapmaya odaklanacağız, bu yüzden biraz kod yazmaya hazır olun!

💡
Güzel API Dokümantasyonu oluşturan harika bir API Test Aracı mı istiyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılar ve Postman'in yerini çok daha uygun bir fiyata alır!
düğme

React Geliştirme Ortamınızı Kuralım

Harika kullanıcı arayüzleri oluşturmaya başlamadan önce çalışmak için bir yer ayarlamamız gerekiyor. Bunu, yeni bir projeye başlamadan önce atölyenizi hazırlamak gibi düşünün.

Temelleri Yükleme: Node.js ve npm

React uygulamaları Node.js ve onun paket yöneticisi npm (Node Package Manager) kullanılarak oluşturulur ve yönetilir.

Başlamak için resmi Node.js web sitesine gidin ve en son Uzun Süreli Destek (LTS) sürümünü indirin. Yükleyici basittir; sadece ekrandaki talimatları izleyin. Kurulduktan sonra hem Node.js hem de npm kullanıma hazır olacaktır. Terminalinizi veya komut isteminizi açıp şunu yazarak kurulumu doğrulayabilirsiniz:Bash

node -v
npm -v

Bu komutlar, sırasıyla kurulu Node.js ve npm sürümlerini yazdırmalıdır.

Vite ile İlk React Projeniz

Geçmişte, create-react-app yeni bir React projesi başlatmak için başvurulan araçtı. Ancak, modern web geliştirme ortamı hızla ilerliyor ve 2025'te inanılmaz hızı ve verimliliği nedeniyle Vite önerilen seçenektir.

Vite ile yeni bir React projesi oluşturmak için terminalinizi açın ve aşağıdaki komutu çalıştırın:Bash

npm create vite@latest my-first-react-app -- --template react

Bu komutu parçalara ayıralım:

Komut tamamlandığında, proje adınızla yeni bir dizininiz olacaktır. Bu dizine gidin:Bash

cd my-first-react-app

Ardından, projenin bağımlılıklarını yüklemeniz gerekir. Bunlar, React uygulamanızın doğru çalışması için ihtiyaç duyduğu diğer paketlerdir. Şu komutu çalıştırın:Bash

npm install

Son olarak, yepyeni React uygulamanızı çalışırken görmek için geliştirme sunucusunu başlatın:Bash

npm run dev

Terminaliniz genellikle http://localhost:5173 gibi yerel bir URL gösterecektir. Bu URL'yi web tarayıcınızda açın ve Vite tarafından oluşturulan varsayılan React uygulamasını göreceksiniz. Tebrikler, ilk React projenizi kurdunuz!

React'in Kalbi: Bileşenler ve JSX

Artık çalışan bir React uygulamanız olduğuna göre, React'i bu kadar güçlü yapan temel kavramlara dalalım: bileşenler ve JSX.

Bileşenler Nedir?

Temelde, bir React uygulaması bileşenler adı verilen yeniden kullanılabilir, kendi içinde bağımsız UI parçalarının bir koleksiyonudur. Bir web sayfasını LEGO tuğlalarıyla inşa edilmiş gibi düşünün. Her tuğla bir bileşendir ve daha karmaşık yapılar oluşturmak için bunları birleştirebilirsiniz.

my-first-react-app projenizde src klasörünü açın ve App.jsx adlı bir dosya bulacaksınız. Bu sizin ana uygulama bileşeninizdir. Temelleri anlamak için içeriğini basitleştirelim:JavaScript

// src/App.jsx

function App() {
  return (
    <div>
      <h1>Merhaba, React Dünyası!</h1>
      <p>Bu benim ilk React bileşenim.</p>
    </div>
  );
}

export default App;

Bu kodda:

JSX'i Anlamak: JavaScript XML

JSX, JavaScript dosyalarınızın içine HTML benzeri kod yazmanıza olanak tanıyan JavaScript için bir sözdizimi uzantısıdır. Aslında HTML değildir, ancak UI kodu yazmayı çok daha sezgisel ve okunabilir hale getirir.

Perde arkasında, bir transpiler (bizim durumumuzda Vite tarafından desteklenir) adı verilen bir araç, bu JSX'i tarayıcıların anlayabileceği normal JavaScript'e dönüştürür.

JSX'in gücünü görmek için App.jsx dosyamızı değiştirelim. Süslü parantezler {} kullanarak JavaScript ifadelerini doğrudan JSX'imizin içine gömebiliriz.JavaScript

// src/App.jsx

function App() {
  const name = "Acemi Geliştirici";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Merhaba, {name}!</h1>
      <p>{year} yılında React yolculuğunuza hoş geldiniz.</p>
    </div>
  );
}

export default App;

Dosyayı kaydedin ve tarayıcınız yeni içeriği görüntülemek için otomatik olarak güncellenecektir. Bu, Vite'ın Sıcak Modül Değişimi (HMR) adı verilen bir özelliğidir ve harika bir geliştirme deneyimi sağlar.

İlk Özel Bileşeninizi Oluşturma

Kendi bileşenimizi oluşturalım. src klasöründe Greeting.jsx adında yeni bir dosya oluşturun.JavaScript

// src/Greeting.jsx

function Greeting() {
  return (
    <h2>Bu, özel bileşenimden bir selamdır!</h2>
  );
}

export default Greeting;

Şimdi, bu yeni Greeting bileşenini App.jsx bileşenimizin içinde kullanalım.JavaScript

// src/App.jsx
import Greeting from './Greeting'; // Greeting bileşenini içe aktar

function App() {
  const name = "Acemi Geliştirici";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Merhaba, {name}!</h1>
      <p>{year} yılında React yolculuğunuza hoş geldiniz.</p>
      <Greeting /> {/* Greeting bileşenini kullan */}
    </div>
  );
}

export default App;

<Greeting />'i tıpkı normal bir HTML etiketi gibi içe aktararak ve sonra kullanarak, kullanıcı arayüzümüzü birden çok bileşenden oluşturduk. Bu, React uygulamalarının temel yapı taşıdır.

Props ile Veri Aktarma

Greeting bileşenimiz biraz statik. Farklı insanları selamlamak istersek ne olur? İşte burada props (özelliklerin kısaltması) devreye girer. Props, verileri bir üst bileşenden bir alt bileşene nasıl aktardığınızdır.

Props ile Bileşenleri Dinamik Hale Getirme

Greeting.jsx dosyamızı bir name prop'u kabul edecek şekilde değiştirelim.JavaScript

// src/Greeting.jsx

function Greeting(props) {
  return (
    <h2>Merhaba, {props.name}! Bu, özel bileşenimden bir selamdır.</h2>
  );
}

export default Greeting;

Şimdi, App.jsx'te Greeting bileşenlerimize bir name prop'u aktarabiliriz.

JavaScript

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

Şimdi, her biri benzersiz bir ada sahip üç farklı selamlama göreceksiniz. Props, bileşenleri farklı verilerle yeniden kullanmamıza olanak tanıyarak kullanıcı arayüzümüzü inanılmaz derecede esnek hale getirir.

Yaygın ve modern bir JavaScript uygulaması, props nesnesini doğrudan fonksiyonun parametre listesinde ayrıştırmaktır. Greeting.jsx dosyasını yeniden düzenleyelim:JavaScript

// src/Greeting.jsx

function Greeting({ name }) {
  return (
    <h2>Merhaba, {name}! Bu, özel bileşenimden bir selamdır.</h2>
  );
}

export default Greeting;

Bu, aynı sonucu daha temiz ve daha kısa kodla elde eder.

State ile Bileşen Belleğini Yönetme

Props, bileşen ağacında verileri aşağı doğru aktarmak için harika olsa da, bir bileşenin kendi verilerini hatırlaması ve yönetmesi gerektiğinde ne olur? İşte burada state devreye girer. State, bir bileşen içinde yönetilen veridir. Bir bileşenin state'i değiştiğinde, React yeni state'i yansıtmak için o bileşeni otomatik olarak yeniden oluşturur.

useState Hook'unu Tanıtma

Fonksiyonel bileşenlerde state'i yönetmek için React'ten Hook adı verilen özel bir fonksiyon kullanırız. En temel Hook useState'tir.

useState'in nasıl çalıştığını anlamak için basit bir sayaç bileşeni oluşturalım. src klasörünüzde Counter.jsx adında yeni bir dosya oluşturun.JavaScript

// src/Counter.jsx
import { useState } from 'react';

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

  return (
    <div>
      <p>{count} kez tıkladınız</p>
      <button onClick={() => setCount(count + 1)}>
        Bana Tıkla
      </button>
    </div>
  );
}

export default Counter;

Bunu parçalara ayıralım:

  1. count: State'in mevcut değeri.
  2. setCount: count state'ini güncellemek için kullanabileceğimiz bir fonksiyon.

Şimdi, bu Counter bileşenini App.jsx dosyamıza ekleyelim:JavaScript

// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Harika React Uygulamam</h1>
      <Counter />
    </div>
  );
}

export default App;

Şimdi tarayıcınızda bir sayaç görmelisiniz. Düğmeye her tıkladığınızda sayı artar. React, state'i her değiştiğinde Counter bileşenini yeniden oluşturur.

Kullanıcı Eylemlerine Yanıt Verme: Olayları Yönetme

Etkileşim, modern web uygulamalarının kalbinde yer alır. React, tıklamalar, form gönderimleri ve klavye girişi gibi olayları yönetmek için basit ve tutarlı bir yol sunar.

Counter bileşenimizde onClick ile temel bir olay işleyicisini zaten gördük. Kullanıcı girdisi alan basit bir form oluşturarak bunu daha ayrıntılı inceleyelim.

NameForm.jsx adında yeni bir bileşen dosyası oluşturun.JavaScript

// src/NameForm.jsx
import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // Varsayılan form gönderim davranışını engeller
    alert(`Merhaba, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ad:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <button type="submit">Gönder</button>
    </form>
  );
}

export default NameForm;

Bu form bileşenini analiz edelim:

Çalışırken görmek için bu NameForm'u App.jsx dosyanıza ekleyin.

Bilgi Görüntüleme: Koşullu Oluşturma ve Listeler

Gerçek dünya uygulamaları genellikle belirli koşullara bağlı olarak içeriği göstermesi veya gizlemesi gerekir ve sıklıkla veri listelerini görüntülemesi gerekir.

Koşullu Oluşturma ile Gösterme ve Gizleme

Bir kullanıcının oturum açıp açmadığına bağlı olarak farklı bir mesaj görüntüleyen bir bileşen oluşturalım. LoginMessage.jsx adında bir dosya oluşturun.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Tekrar hoş geldiniz!</h2>;
  }
  return <h2>Lütfen oturum açın.</h2>;
}

export default LoginMessage;

Daha kısa koşullu oluşturma için üçlü operatörü de kullanabiliriz.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>Tekrar hoş geldiniz!</h2> : <h2>Lütfen oturum açın.</h2>}
    </div>
  );
}

export default LoginMessage;

Ardından bu bileşeni App.jsx dosyasında kullanabilir ve farklı mesajları görmek için isLoggedIn prop'unu aktarabilirsiniz.

Veri Listelerini Görüntüleme

Öğe listesini oluşturmak için genellikle map() dizi yöntemini kullanırsınız. Bir meyve listesini görüntülemek için bir bileşen oluşturalım. FruitList.jsx adında bir dosya oluşturun.JavaScript

// src/FruitList.jsx

function FruitList() {
  const fruits = ['Elma', 'Muz', 'Kiraz', 'Hurma'];

  return (
    <div>
      <h3>Favori Meyvelerim:</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Burada, fruits dizisi üzerinde map işlemi yapıyoruz ve her meyve için bir <li> elementi döndürüyoruz.

key={index} prop'unu fark edeceksiniz. Bir öğe listesini oluşturduğunuzda, React'in liste değiştiğinde listeyi verimli bir şekilde güncellemesi için her öğe için benzersiz bir key'e ihtiyacı vardır. Dizi indeksini anahtar olarak kullanmak, basit, statik listeler için kabul edilebilir. Ancak, öğelerin eklenebildiği, kaldırılabildiği veya yeniden sıralanabildiği dinamik listeler için, mevcutsa verilerinizden benzersiz bir kimlik kullanmak en iyisidir.

Uygulamanıza Stil Ekleme

Harika bir uygulamanın iyi görünmesi gerekir. React bileşenlerinizi stilize etmenin birkaç yolu vardır.

CSS Stil Sayfaları

En basit yol, normal CSS dosyalarını kullanmaktır. src klasöründe bir App.css dosyası bulacaksınız. Stillerinizi oraya ekleyebilirsiniz.

Örneğin, FruitList bileşenimizi stilize etmek için App.css dosyasına şunu ekleyebilirsiniz:CSS

/* src/App.css */

.fruit-list {
  list-style-type: none;
  padding: 0;
}

.fruit-item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

Ardından, FruitList.jsx dosyanızda bu CSS sınıflarını kullanabilirsiniz.JavaScript

// src/FruitList.jsx
import './App.css'; // CSS dosyasını içe aktardığınızdan emin olun

function FruitList() {
  const fruits = ['Elma', 'Muz', 'Kiraz', 'Hurma'];

  return (
    <div>
      <h3>Favori Meyvelerim:</h3>
      <ul className="fruit-list">
        {fruits.map((fruit, index) => (
          <li key={index} className="fruit-item">{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

JSX'te class yerine className kullandığımıza dikkat edin, çünkü class JavaScript'te ayrılmış bir anahtar kelimedir.

CSS Modülleri

Daha büyük uygulamalar için, CSS Modülleri stilleri belirli bir bileşenle sınırlamanın bir yolunu sunarak stil çakışmalarını önler. Bir CSS Modülü dosyası .module.css uzantısıyla adlandırılır.

FruitList.module.css oluşturalım:CSS

/* src/FruitList.module.css */

.list {
  list-style-type: square;
}

.item {
  color: blue;
}

Şimdi, FruitList.jsx dosyasında, stilleri bir nesne olarak içe aktarıyorsunuz:JavaScript

// src/FruitList.jsx
import styles from './FruitList.module.css';

function FruitList() {
  const fruits = ['Elma', 'Muz', 'Kiraz', 'Hurma'];

  return (
    <div>
      <h3>Favori Meyvelerim (CSS Modülleri ile Stilize Edilmiş):</h3>
      <ul className={styles.list}>
        {fruits.map((fruit, index) => (
          <li key={index} className={styles.item}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Vite otomatik olarak benzersiz sınıf adları oluşturacak ve FruitList.module.css dosyasındaki stillerin yalnızca FruitList bileşenine uygulandığından emin olacaktır.

React Router ile Uygulamanızda Gezinme

Çoğu web uygulamasının birden çok sayfası vardır. React ile oluşturulan tek sayfa uygulama (SPA) gibi bir uygulamada bu "sayfalar" arasında gezinmeyi yönetmek için React Router adlı bir kütüphane kullanırız.

React Router Kurulumu

Önce React Router'ı yüklemeniz gerekir:Bash

npm install react-router-dom

Sayfalarınızı Oluşturma

İki basit sayfa bileşeni oluşturalım: HomePage.jsx ve AboutPage.jsx.JavaScript

// src/HomePage.jsx

function HomePage() {
  return (
    <div>
      <h1>Ana Sayfa</h1>
      <p>Harika uygulamamızın ana sayfasına hoş geldiniz!</p>
    </div>
  );
}

export default HomePage;

JavaScript

// src/AboutPage.jsx

function AboutPage() {
  return (
    <div>
      <h1>Hakkında Sayfası</h1>
      <p>Bu, inanılmaz uygulamamızla ilgili her şey.</p>
    </div>
  );
}

export default AboutPage;

Router'ı Yapılandırma

Şimdi, App.jsx dosyasında rotalarımızı yapılandıracağız.JavaScript

// src/App.jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Ana Sayfa</Link>
            </li>
            <li>
              <Link to="/about">Hakkında</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

React Router'dan gelen yeni bileşenleri parçalara ayıralım:

Şimdi, "Ana Sayfa" ve "Hakkında" bağlantılarına tıkladığınızda, içerik tam sayfa yeniden yüklemesi olmadan değişecektir. İstemci tarafı yönlendirmeyi başarıyla uyguladınız!

Daha İleri Gitme: useEffect Hook'u

useState Hook'u, doğrudan oluşturulan şeyi etkileyen state'i yönetmek içindir. Peki ya bir API'den veri çekme, abonelikler ayarlama veya DOM'u manuel olarak değiştirme gibi yan etkiler ne olacak? Bunun için useEffect Hook'unu kullanırız.

useEffect Hook'u varsayılan olarak her oluşturmadan sonra çalışır. Sahte bir API'den veri çeken bir bileşen oluşturarak bunu çalışırken görelim.

Yeni bir dosya DataFetcher.jsx oluşturun.JavaScript

// src/DataFetcher.jsx
import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Bu fonksiyon, bileşen oluşturulduktan sonra çağrılacaktır
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Veri çekerken hata oluştu:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // Boş bağımlılık dizisi önemlidir!

  if (loading) {
    return <p>Yükleniyor...</p>;
  }

  return (
    <div>
      <h3>Çekilen Veri:</h3>
      <h4>{data.title}</h4>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcher;

Burada useEffect'i anlamanın anahtarı ikinci argümandır: bağımlılık dizisi.

Bileşen yüklendiğinde veriyi çekip görüntülemesi için DataFetcher'ı App.jsx dosyanıza ekleyin.

Sonuç ve Sonraki Adımlar

Uzun bir yol kat ettiniz! Şunları öğrendiniz:

Bu büyük bir başarı ve artık üzerine inşa edebileceğiniz sağlam bir temele sahipsiniz. React dünyası geniş ve heyecan verici. İşte daha sonra keşfetmek isteyebileceğiniz bazı konular:

Şimdi yapabileceğiniz en önemli şey inşa etmeye devam etmek. Pratik yapmak anahtardır. Günlük olarak kullandığınız basit bir web sitesini veya uygulamayı yeniden oluşturmayı deneyin. Yeni özelliklerle kendinize meydan okuyun. Ne kadar çok kod yazarsanız, o kadar kendinize güvenir ve yetenekli hale gelirsiniz.

React topluluğuna hoş geldiniz. İyi kodlamalar!

💡
Güzel API Dokümantasyonu oluşturan harika bir API Test Aracı mı istiyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılar ve Postman'in yerini çok daha uygun bir fiyata alır!
düğme

API Tasarım-Öncelikli Yaklaşımı Apidog'da Uygulayın

API'leri oluşturmanın ve kullanmanın daha kolay yolunu keşfedin

Ücretsiz Kaydolİndir