React ile 4 Uygulama Geliştirme Rehberi: Kartvizitten Dilek Listesine

Modern web geliştirmenin temel taşlarından biri haline gelen React, bileşen tabanlı yapısı ve deklaratif yaklaşımı sayesinde dinamik ve kullanıcı dostu arayüzler oluşturmak için eşsiz bir araç sunar. Bu makalede, React becerilerinizi pekiştirmek ve farklı karmaşıklık seviyelerindeki projelerde deneyim kazanmak amacıyla dört farklı uygulama geliştireceğiz: Duyarlı bir dijital kartvizit, etkileşimli bir portföy sayfası, basit bir yapılacaklar listesi ve son olarak kapsamlı bir Noel dilek listesi uygulaması. Bu yolculuk boyunca React’ın temel kavramlarından (bileşenler, prop’lar, state) ileri seviye konulara (yerel depolama, veri yönetimi) kadar birçok konuya değinecek, pratik örneklerle öğrenmenizi kolaylaştıracağız. Hazırsanız, React dünyasına dalalım!

React Temellerine Hızlı Bir Bakış

React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Temel felsefesi, karmaşık UI’ları yönetilebilir, yeniden kullanılabilir ve bağımsız bileşenlere ayırmaktır. Bu bölüm, React’a yeni başlayanlar veya bilgilerini tazelemek isteyenler için bir temel oluşturacaktır.

Bileşenler ve Prop’lar: React’ın Yapı Taşları

React’ta her şey bir bileşendir. Bileşenler, uygulamanızın bağımsız ve yeniden kullanılabilir parçalarıdır. İki ana bileşen türü vardır: Fonksiyonel bileşenler ve sınıf bileşenleri. Günümüzde, React Hook’ları sayesinde fonksiyonel bileşenler çok daha yaygın olarak kullanılmaktadır. Prop’lar (properties), bileşenler arasında veri aktarımı yapmak için kullanılır. Üst bileşenden alt bileşene veri göndermenin tek yönlü bir yoludur ve prop’lar genellikle salt okunurdur.

import React from 'react';

function Selamlama(props) {
  return Merhaba, {props.isim}!;
}

// Kullanım:

State Yönetimi ve Hook'lar (useState, useEffect)

State, bir bileşenin zamanla değişebilen verilerini ifade eder. React'ta state, uygulamanızın dinamik olmasını sağlayan temel mekanizmadır. useState hook'u, fonksiyonel bileşenlerde state yönetimi için kullanılırken, useEffect hook'u yan etkileri (veri çekme, DOM manipülasyonu, timer'lar vb.) yönetmek için kullanılır. Bu hook'lar, React'ın gücünü fonksiyonel bileşenlere taşımıştır.

import React, { useState } from 'react';

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

  return (
    
      Sayaç: {sayi}
      
    
  );
}

Olay Yönetimi ve Koşullu Render Etme

React'ta olay yönetimi, HTML'deki olay yönetimine benzer ancak bazı farklılıklar içerir (örneğin, camelCase isimlendirme ve fonksiyon referansları). Buton tıklamaları, form gönderimleri gibi kullanıcı etkileşimlerini ele almak için kullanılır. Koşullu render etme ise, belirli bir koşula bağlı olarak bileşenlerin veya öğelerin gösterilip gizlenmesidir. Bu, uygulamanızın farklı durumlara göre farklı UI'lar sunmasını sağlar.

Uygulama 1: Duyarlı Bir Dijital Kartvizit

İlk uygulamamız, temel React kavramlarını pekiştireceğimiz ve responsive tasarım prensiplerini uygulayacağımız basit bir dijital kartvizit olacak. Bu proje, React bileşenlerinin nasıl oluşturulduğunu, prop'ların nasıl kullanıldığını ve CSS ile stil verildiğini anlamanıza yardımcı olacak.

Bileşen Yapısı ve Prop Kullanımı

Kartvizit uygulamamız için ana bir Kartvizit bileşeni oluşturacağız. Bu bileşen, isim, unvan, fotoğraf, iletişim bilgileri gibi prop'ları alacak ve bunları uygun şekilde render edecek. Her bir bilgi parçası (örneğin, bir sosyal medya bağlantısı) için ayrı bir alt bileşen oluşturmak, kodun daha düzenli olmasını sağlayacaktır.

import React from 'react';

function Kartvizit({ ad, unvan, fotograf, eposta, telefon }) {
  return (
    
      
      {ad}
      {unvan}
      E-posta: {eposta}
      Telefon: {telefon}
    
  );
}

export default Kartvizit;

Temel Stil Belirleme (CSS Modülleri veya Styled Components)

Kartvizitin görsel çekiciliğini artırmak için CSS kullanacağız. Projenin büyüklüğüne göre CSS Modülleri, Styled Components veya Tailwind CSS gibi modern stil yaklaşımlarından birini tercih edebilirsiniz. Bu uygulamada basit CSS dosyaları kullanmak yeterli olacaktır. Odak noktamız, kartvizitin farklı ekran boyutlarında iyi görünmesini sağlamak.

/* Kartvizit.css */
.kartvizit-kutusu {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 20px;
  text-align: center;
  max-width: 300px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.profil-fotografi {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

/* Diğer stiller... */

Duyarlılık (Responsive Design) İlkeleri

Kartvizitin hem masaüstü hem de mobil cihazlarda düzgün görünmesi için duyarlı tasarım prensiplerini uygulayacağız. Media query'ler kullanarak farklı ekran boyutlarına göre stil ayarlamaları yapabiliriz. Flexbox veya CSS Grid gibi modern düzen teknikleri, bileşenlerin esnek bir şekilde yerleşmesini sağlayarak duyarlılığı kolaylaştırır.

/* Kartvizit.css (devamı) */
@media (max-width: 600px) {
  .kartvizit-kutusu {
    margin: 10px;
    padding: 15px;
  }
  .profil-fotografi {
    width: 80px;
    height: 80px;
  }
}

Uygulama 2: Etkileşimli Bir Portföy Sayfası

İkinci uygulamamızda, ilk kartvizit projemizi genişleterek daha etkileşimli bir portföy sayfasına dönüştüreceğiz. Bu sayede React'ın state yönetimi ve olay işleme yeteneklerini daha yakından tanıyacağız. Kullanıcıların sayfayla etkileşime girmesini sağlayacak özellikler ekleyeceğiz.

State Yönetimi (useState Hook'u) ile Dinamik İçerik

Portföy sayfamızda, kullanıcının farklı bölümler arasında geçiş yapmasını sağlayan bir navigasyon menüsü veya bir "Hakkımda" bölümünü genişletip daraltan bir buton olabilir. Bu tür dinamik etkileşimleri yönetmek için useState hook'unu kullanacağız. Örneğin, bir iletişim formunun görünürlüğünü state ile kontrol edebiliriz.

import React, { useState } from 'react';

function Portfoy() {
  const [formAcik, setFormAcik] = useState(false);

  return (
    
      Benim Portföyüm
      
      {formAcik && (
        
          İletişim Formu
          
        
      )}
    
  );
}

export default Portfoy;

Olay Yönetimi (Event Handling) ve Kullanıcı Etkileşimleri

Buton tıklamaları, form gönderimleri, fare hareketleri gibi olayları React'ta kolayca yönetebiliriz. Önceki örnekte onClick olayını kullanarak bir butonun tıklanmasını yakaladık. Form elemanları için onChange ve onSubmit gibi olayları kullanarak kullanıcı girdilerini işleyebiliriz. Bu, uygulamanızın kullanıcıya tepki vermesini sağlar.

Koşullu Render Etme ile Dinamik UI Akışı

Portföy sayfasında, kullanıcının seçimine göre farklı projeleri veya beceri setlerini göstermek isteyebiliriz. if ifadeleri, üçlü operatörler (ternary operator) veya mantıksal && operatörü kullanarak belirli koşullara bağlı olarak farklı bileşenleri veya HTML parçacıklarını render edebiliriz. Bu, UI'nızın daha esnek ve duruma duyarlı olmasını sağlar.

Uygulama 3: Basit Bir Yapılacaklar Listesi Yöneticisi

Üçüncü uygulamamız, React'ın state yönetimi ve liste render etme yeteneklerini daha derinlemesine keşfedeceğimiz klasik bir "Yapılacaklar Listesi" olacak. Bu uygulama, kullanıcıdan girdi almayı, bu girdileri bir listeye eklemeyi, listeden öğe silmeyi ve mevcut öğeleri güncellemeyi öğretecek.

Liste Render Etme ve Anahtarlar (Keys)

Bir yapılacaklar listesi, genellikle bir dizi görevden oluşur. React'ta dizileri render etmek için Array.prototype.map() fonksiyonunu kullanırız. Her liste öğesine benzersiz bir key prop'u vermek çok önemlidir. Bu, React'ın listelerdeki değişiklikleri (ekleme, silme, sıralama) verimli bir şekilde izlemesine yardımcı olur.

import React, { useState } from 'react';

function YapilacaklarListesi() {
  const [gorevler, setGorevler] = useState([]);
  const [yeniGorev, setYeniGorev] = useState('');

  const gorevEkle = () => {
    if (yeniGorev.trim() !== '') {
      setGorevler([...gorevler, { id: Date.now(), metin: yeniGorev, tamamlandi: false }]);
      setYeniGorev('');
    }
  };

  const gorevSil = (id) => {
    setGorevler(gorevler.filter(gorev => gorev.id !== id));
  };

  return (
    
       setYeniGorev(e.target.value)}
        placeholder="Yeni görev ekle..."
      />
      
      
        {gorevler.map(gorev => (
          
            {gorev.metin}
            
          
        ))}
      
    
  );
}

export default YapilacaklarListesi;

Yeni Öğe Ekleme ve Silme İşlemleri

gorevEkle ve gorevSil fonksiyonları, state'i doğru bir şekilde güncellemeyi gösterir. React'ta state'i doğrudan değiştirmek yerine, her zaman yeni bir state nesnesi veya dizisi oluşturup setGorevler gibi setter fonksiyonlarını kullanmalıyız. Bu, React'ın değişiklikleri algılamasını ve UI'ı yeniden render etmesini sağlar.

Form Yönetimi ve Giriş Kontrolü

Kullanıcıdan girdi almak için elemanını kullanırız. Bu input'un değerini bir state değişkeniyle (yeniGorev) bağlayarak "kontrollü bileşen" oluştururuz. onChange olayı ile input değeri değiştikçe state'i güncelleriz. Bu yaklaşım, form verilerini kolayca yönetmemizi ve doğrulamamızı sağlar.

Uygulama 4: Noel Dilek Listesi Uygulaması

Dördüncü ve en kapsamlı uygulamamız, bir "Noel Dilek Listesi" olacak. Bu proje, önceki uygulamalardan öğrendiklerimizi bir araya getirerek daha gelişmiş özellikler eklememizi sağlayacak. Özellikle verilerin kalıcılığını sağlamak için yerel depolama kullanımına odaklanacağız.

Gelişmiş State Yönetimi ve Veri Yapıları

Dilek listesi uygulamasında, her dilek öğesi sadece bir metin değil, aynı zamanda bir ID, açıklama, öncelik veya resim URL'si gibi daha fazla bilgi içerebilir. Bu, state'in daha karmaşık nesneler ve dizilerle yönetilmesini gerektirir. State'i daha modüler hale getirmek için birden fazla useState çağrısı kullanabilir veya daha büyük state objeleriyle çalışabiliriz.

Yerel Depolama (LocalStorage) Kullanımı

Uygulama kapatıldığında bile dileklerin kaybolmamasını sağlamak için tarayıcının localStorage özelliğini kullanacağız. useEffect hook'u, bileşen yüklendiğinde localStorage'dan verileri çekmek ve state değiştiğinde verileri localStorage'a kaydetmek için idealdir. Bu, uygulamanıza temel bir kalıcılık katmanı ekler.

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

function DilekListesi() {
  const [dilekler, setDilekler] = useState(() => {
    const kaydedilmisDilekler = localStorage.getItem('noelDilekleri');
    return kaydedilmisDilekler ? JSON.parse(kaydedilmisDilekler) : [];
  });
  // ... diğer state'ler

  useEffect(() => {
    localStorage.setItem('noelDilekleri', JSON.stringify(dilekler));
  }, [dilekler]);

  // ... dilek ekleme, silme, güncelleme fonksiyonları
  return (
    
      Noel Dilek Listem
      
      
        {dilekler.map(dilek => (
          {dilek.metin}
        ))}
      
    
  );
}

export default DilekListesi;

Bileşenler Arası İletişim ve Kullanıcı Deneyimi İyileştirmeleri

Dilek listesi uygulaması, birden fazla bileşenden oluşabilir (örneğin, bir DilekFormu bileşeni ve bir DilekListesiGoruntuleyici bileşeni). Bu bileşenler arasında veri aktarımı için prop drilling (prop'ları birden fazla katman aşağı geçirme) veya daha karmaşık senaryolarda React Context API kullanılabilir. Kullanıcı deneyimini artırmak için dilekleri filtreleme, sıralama veya hatta basit bir sürükle-bırak (drag-and-drop) özelliği eklenebilir.

Geliştirme Sürecinde En İyi Uygulamalar

React uygulamaları geliştirirken sadece kod yazmak değil, aynı zamanda sürdürülebilir, ölçeklenebilir ve okunabilir kod yazmak da önemlidir. İşte bazı en iyi uygulamalar:

Bileşenleri Yeniden Kullanılabilirlik ve Modülerlik

Bileşenlerinizi küçük, odaklanmış ve tek bir sorumluluğa sahip olacak şekilde tasarlayın. Bu, bileşenlerinizi farklı yerlerde yeniden kullanmanızı kolaylaştırır ve kod tekrarını azaltır. Örneğin, bir buton veya bir input alanı için genel bir bileşen oluşturabilirsiniz.

Kod Kalitesi ve Okunabilirlik

Temiz, düzenli ve iyi yorumlanmış kod yazmaya özen gösterin. Anlamlı değişken ve fonksiyon isimleri kullanın. ESLint ve Prettier gibi araçlar, kodunuzu tutarlı bir şekilde biçimlendirmenize ve potansiyel hataları yakalamanıza yardımcı olabilir.

Hata Ayıklama (Debugging) Teknikleri

Tarayıcınızın geliştirici araçları (özellikle "Elements" ve "Console" sekmeleri) ve React Developer Tools eklentisi, React uygulamalarınızdaki hataları ayıklamak için vazgeçilmezdir. State ve prop'ları inceleyebilir, bileşen ağacını görebilir ve performans sorunlarını tespit edebilirsiniz.

Versiyon Kontrolü (Git) Kullanımı

Projelerinizi Git ile versiyon kontrol sisteminde yönetmek, değişiklikleri takip etmek, farklı özellikler üzerinde çalışmak ve ekip üyeleriyle işbirliği yapmak için hayati öneme sahiptir. Düzenli commit'ler yapın ve anlamlı commit mesajları yazın.

Sonuç ve İleri Adımlar

Bu makalede, dört farklı React uygulaması geliştirerek React'ın temelden ileri seviyeye kadar birçok özelliğini keşfettik. Duyarlı bir kartvizit ile bileşen ve prop temellerini attık, etkileşimli bir portföy ile state ve olay yönetimini öğrendik, yapılacaklar listesi ile liste render etme ve CRUD işlemlerini uyguladık ve son olarak Noel dilek listesi ile yerel depolama ve daha karmaşık state yönetimini deneyimledik. Bu projeler, React öğrenme yolculuğunuzda sağlam bir temel oluşturacaktır.

React ekosistemi oldukça geniştir. Öğrendiklerinizin üzerine inşa etmek için React Router ile navigasyon, Redux veya Zustand gibi daha gelişmiş state yönetim kütüphaneleri, Next.js veya Gatsby gibi çerçevelerle sunucu tarafı render etme (SSR) veya statik site oluşturma, ve birim/entegrasyon testleri gibi konuları araştırmaya devam edebilirsiniz. Kendi yaratıcı projelerinizi geliştirmekten çekinmeyin; pratik yapmak, en iyi öğrenme yöntemidir.

Sıkça Sorulan Sorular (SSS)

React'a yeni başlayanlar için hangi uygulama ile başlamalıyım?

React'a yeni başlıyorsanız, "Duyarlı Bir Dijital Kartvizit" veya "Etkileşimli Bir Portföy Sayfası" gibi daha basit uygulamalarla başlamanızı öneririz. Bu projeler, React'ın temel bileşen ve prop mantığını anlamanıza yardımcı olacaktır.

Bu uygulamaları geliştirirken hangi araçları kullanmalıyım?

Temel olarak bir kod düzenleyiciye (VS Code gibi), Node.js ve npm/yarn paket yöneticisine ihtiyacınız olacak. Projeleri başlatmak için create-react-app veya Vite gibi araçları kullanabilirsiniz. Tarayıcı geliştirici araçları ve React Developer Tools eklentisi hata ayıklama için çok faydalıdır.

Daha karmaşık uygulamalar için ne öğrenmeliyim?

Daha karmaşık uygulamalar için React Router ile client-side routing, Redux/Zustand/Context API ile global state yönetimi, API entegrasyonları (veri çekme), form kütüphaneleri (Formik, React Hook Form) ve test framework'leri (Jest, React Testing Library) gibi konuları öğrenmeniz faydalı olacaktır.

React bileşenlerini nasıl daha duyarlı hale getirebilirim?

Duyarlı tasarım için CSS media query'leri, Flexbox ve CSS Grid gibi modern CSS tekniklerini kullanmalısınız. Ayrıca, bazı UI kütüphaneleri (Material-UI, Ant Design, Chakra UI) veya utility-first CSS çerçeveleri (Tailwind CSS) duyarlı bileşenler oluşturmayı kolaylaştırır.

State yönetiminde `useState` dışında hangi seçenekler var?

useState hook'u basit state'ler için harikadır. Ancak daha karmaşık veya global state yönetimi için useReducer hook'u, React Context API veya Redux, Zustand, Recoil gibi üçüncü taraf state yönetim kütüphanelerini düşünebilirsiniz. Seçim, uygulamanızın büyüklüğüne ve karmaşıklığına bağlıdır.

React ile 4 Uygulama Geliştirme Rehberi: Kartvizitten Dilek Listesine