React

1. React’e Giriş

React Facebook tarafından geliştirilen ve geniş bir topluluk tarafından desteklenen açık kaynaklı bir JavaScript kütüphanesidir. Kullanıcı arayüzleri oluşturmak için bileşen tabanlı bir yaklaşım kullanır ve özellikle tek sayfa uygulamaları (SPA) geliştirmek için idealdir.

1.1 React’in Avantajları

• Bileşen Bazlı Mimari: Kodun yeniden kullanılabilir olmasını sağlar.

• Sanal DOM (Virtual DOM): Performans optimizasyonu sunar.

• Tek Yönlü Veri Akışı: State yönetimini daha öngörülebilir hale getirir.

• Geniş Ekosistem: Birçok kütüphane ve araç ile desteklenir.

• React Native Desteği: Mobil uygulama geliştirmeye olanak tanır.

1.2 React Nasıl Çalışır?

React, bileşenleri oluşturarak ve güncelleyerek kullanıcı arayüzünü yönetir. Ana prensip, verilerin değiştiğinde yalnızca ilgili bölümlerin güncellenmesidir.

2. React Bileşenleri

React’te her şey bir bileşendir. Bileşenler ikiye ayrılır :

• Fonksiyonel Bileşenler (Functional Components)

• Sınıf Bileşenleri (Class Components)

2.1 Fonksiyonel Bileşenler

function Merhaba() {
  return <h1>Merhaba, React!</h1>;
}

2.2 Props ve State

• Props: Bileşenlere dışarıdan veri iletmek için kullanılır.

• State: Bileşenin içsel durumunu yönetmek için kullanılır.

function Sayac() {
  const [sayi, setSayi] = React.useState(0);
  return (
    <div>
      <p>Sayac: {sayi}</p>
      <button onClick={() => setSayi(sayi + 1)}>Arttır</button>
    </div>
  );
}

3. Performans Optimizasyonu

React uygulamalarını hızlandırmak için çeşitli teknikler vardır.

3.1 Memoization

React.memo ve useMemo kullanarak gereksiz render’ları önleyebiliriz.

const PahaliHesaplama = React.memo(({ deger }) => {
  console.log("Hesaplama yapılıyor...");
  return <p>{deger * 2}</p>;
});

3.2 Lazy Loading

React.lazy kullanarak bileşenleri dinamik yükleyebiliriz.

const MyComponent = React.lazy(() => import("./MyComponent"));

4. UI Kütüphaneleri: Shadcn, Tailwind CSS ve Radix UI

Modern UI geliştirme için popüler kütüphaneler şunlardır :

4.1 Shadcn

Shadcn, Tailwind CSS ve Radix UI üzerine kurulmuş bir bileşen kütüphanesidir.

import { Button } from "@/components/ui/button";
export default function App() {
  return <Button>Buton</Button>;
}

4.2 Tailwind CSS

Tailwind, utility-first CSS yaklaşımı sunan bir kütüphanedir.

<button className="bg-blue-500 text-white px-4 py-2 rounded">Buton</button>

5. React + TypeScript

TypeScript, statik tür denetimi sağlayarak kodun daha güvenli olmasını sağlar.

type Props = {
  mesaj: string;
};

function Selam({ mesaj }: Props) {
  return <h1>{mesaj}</h1>;
}

6. Gerçek Dünya Projeleri

React ile bir e-ticaret sitesi veya admin paneli geliştirebiliriz. Örnek bir proje yapısı :

📂 proje-adi
 ┣ 📂 frontend (React + TypeScript)
 ┗ 📂 backend (Node.js + Express)

7. Upwork ve Freelance Perspektifi

React ile freelance çalışmak isteyenler için ipuçları :

• Portfolyo oluşturun.

• Upwork gibi platformlarda profilinizi optimize edin.

• Müşterilere açık ve net teklifler sunun.

• SEO, performans ve UI/UX konularına hakim olun.

Kaynaklar

• React Resmi Dokümantasyonu

• MDN Web Docs — React

• React Patterns

• TypeScript ve React

• Shadcn UI Dokümantasyonu

• Tailwind CSS Resmi Sitesi

• Radix UI Dokümantasyonu