Ana içeriğe geç

React Nedir?

React, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript kütüphanesidir. Kullanıcı arayüzleri oluşturmak için tasarlanmış, bileşen tabanlı ve bildirimsel bir yaklaşım sunar.

Neden React?

React'in "Bir kere öğren, her yerde yaz" felsefesi, web, mobil ve masaüstü uygulamaları geliştirmenize olanak tanır.

Temel Kavramlar​

JSX​

JSX, JavaScript için XML benzeri bir sözdizimi uzantısıdır:

const element = (
  <div className="greeting">
    <h1>Merhaba, {formatName(user)}!</h1>
  </div>
);

Bileşenler​

React uygulamaları, yeniden kullanılabilir bileşenlerden oluşur:

// Fonksiyonel Bileşen
function Welcome(props) {
  return <h1>Merhaba, {props.name}</h1>;
}

// Class Bileşeni
class Welcome extends React.Component {
  render() {
    return <h1>Merhaba, {this.props.name}</h1>;
  }
}
bilgi

Modern React uygulamalarında, Hooks ile birlikte fonksiyonel bileşenler tercih edilmektedir.

React Hooks​

State Yönetimi​

import { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `${count} kez tıklandı`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count} kez tıklandı
    </button>
  );
}

Yaygın Hooks​

  1. useState: Durum yönetimi
  2. useEffect: Yan etki yönetimi
  3. useContext: Bağlam erişimi
  4. useRef: DOM referansları
  5. useMemo: Hesaplama önbelleği
  6. useCallback: Fonksiyon önbelleği

Veri Akışı​

Props​

function Welcome(props) {
  return <h1>Merhaba, {props.name}</h1>;
}

// Kullanımı
<Welcome name="Ahmet" />

State vs Props​

function Counter() {
  // State: Bileşen içinde değiştirilebilir
  const [count, setCount] = useState(0);
  
  // Props: Sadece okunabilir
  return (
    <DisplayCount 
      count={count} 
      onIncrement={() => setCount(count + 1)} 
    />
  );
}

Performans Optimizasyonu​

React.memo​

const MemoizedComponent = React.memo(function MyComponent(props) {
  /* render */
});

useMemo ve useCallback​

function Example({ data }) {
  // Değer önbelleğe alma
  const memoizedValue = useMemo(() => {
    return heavyComputation(data);
  }, [data]);

  // Fonksiyon önbelleğe alma
  const memoizedCallback = useCallback(() => {
    doSomething(data);
  }, [data]);

  return <Child value={memoizedValue} onClick={memoizedCallback} />;
}

Yaşam Döngüsü​

Class Bileşenleri​

class Example extends React.Component {
  componentDidMount() {
    // Bileşen DOM'a eklendiğinde
  }

  componentDidUpdate(prevProps, prevState) {
    // Bileşen güncellendiğinde
  }

  componentWillUnmount() {
    // Bileşen DOM'dan kaldırılmadan önce
  }
}

Hooks ile Yaşam Döngüsü​

function Example() {
  useEffect(() => {
    // componentDidMount
    return () => {
      // componentWillUnmount
    };
  }, []); // Boş dependency array

  useEffect(() => {
    // componentDidUpdate
  }, [someProp]); // Prop değişimini izle
}

Router​

React Router ile sayfa yönlendirmesi:

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

State Yönetimi​

Context API​

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}
tehlike

Context API, küçük-orta ölçekli uygulamalar için uygundur. Büyük uygulamalar için Redux veya Zustand gibi state yönetim kütüphaneleri düşünülebilir.

En İyi Pratikler​

  1. Bileşenleri küçük ve odaklı tutun
  2. Props drilling'den kaçının
  3. Erken optimizasyondan kaçının
  4. İsimlendirme kurallarına uyun
  5. Tip kontrolü için PropTypes veya TypeScript kullanın

Örnek Kullanım Alanları​

  1. Tek sayfa uygulamaları (SPA)
  2. E-ticaret platformları
  3. Sosyal medya uygulamaları
  4. Dashboard ve admin panelleri
  5. İnteraktif web uygulamaları

Sonuç​

React, modern web uygulamaları geliştirmek için güçlü ve esnek bir kütüphanedir. Geniş ekosistemi, aktif topluluğu ve sürekli gelişen yapısı ile frontend geliştirme dünyasında lider konumdadır.

Başlarken

React öğrenmeye başlamak için resmi React dokümantasyonunu inceleyebilirsiniz.