React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri (UI) oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Tek sayfalı uygulamalar (SPA) oluşturmak ve dinamik içerikleri yönetmek için idealdir. React, bileşen tabanlı mimarisi, sanal DOM kullanımı ve deklaratif programlama yaklaşımı sayesinde, geliştiricilere yüksek performanslı, ölçeklenebilir ve bakımı kolay web uygulamaları oluşturma imkanı sunar. Bu kapsamlı rehberde, React'in temellerinden ileri düzey konulara kadar her yönünü inceleyeceğiz. Web Yazılım Hizmetleri alarak projelerinizi daha da ileriye taşıyabilirsiniz.

1. React'in Temelleri

1.1. React Nedir ve Neden Kullanılır?

React, bir JavaScript kütüphanesidir ve özellikle kullanıcı arayüzleri oluşturmak için tasarlanmıştır. İşte React'i kullanmanın başlıca nedenleri:

Bileşen Tabanlı Mimari: React, uygulamaları küçük, yeniden kullanılabilir bileşenlere ayırmayı kolaylaştırır. Bu, kodun daha düzenli ve bakımı daha kolay olmasını sağlar.
Sanal DOM: React, sanal DOM kullanarak performansı artırır. Sanal DOM, gerçek DOM'un bir kopyasıdır ve yalnızca değişiklikler olduğunda gerçek DOM güncellenir.
Deklaratif Programlama: React, kullanıcı arayüzlerini tanımlamak için deklaratif bir yaklaşım kullanır. Bu, geliştiricilerin ne istediklerini belirtmelerini ve React'in nasıl yapılacağını belirlemesini sağlar.
Öğrenme Kolaylığı: React, diğer JavaScript framework'lerine göre öğrenmesi daha kolaydır.
Topluluk Desteği: React, geniş ve aktif bir topluluğa sahiptir. Bu, geliştiricilerin sorunlarını çözmelerine ve yeni beceriler öğrenmelerine yardımcı olur.

1.2. React'in Temel Kavramları

React'i anlamak için aşağıdaki temel kavramları bilmek önemlidir:

Bileşenler (Components): React uygulamalarının temel yapı taşlarıdır. Bir bileşen, kullanıcı arayüzünün bir bölümünü temsil eder ve kendi verisine ve davranışına sahiptir.
JSX: JavaScript XML'in kısaltmasıdır. React bileşenlerinde HTML benzeri bir sözdizimi kullanarak kullanıcı arayüzlerini tanımlamak için kullanılır.
Props: Bileşenlere veri aktarmak için kullanılır. Props, bileşenlerin özelliklerini tanımlar ve bileşenlerin nasıl davranacağını belirler.
State: Bir bileşenin iç verisidir. State, bileşenin zaman içindeki davranışını değiştirebilir.
Lifecycle Metotları: Bileşenlerin oluşturulması, güncellenmesi ve kaldırılması sırasında çalışan metotlardır.

1.3. Ortam Kurulumu ve İlk React Uygulaması

React geliştirmeye başlamak için öncelikle Node.js ve npm (Node Package Manager) veya yarn'ın bilgisayarınızda kurulu olduğundan emin olun. Ardından, aşağıdaki adımları izleyerek bir React uygulaması oluşturabilirsiniz:

Create React App ile Proje Oluşturma: Create React App, React uygulamaları oluşturmak için resmi olarak desteklenen bir araçtır. Terminalde aşağıdaki komutu çalıştırarak yeni bir proje oluşturabilirsiniz:

npx create-react-app my-app

Proje Klasörüne Gitme: Proje oluşturulduktan sonra, proje klasörüne gidin:

cd my-app

Uygulamayı Başlatma: Uygulamayı başlatmak için aşağıdaki komutu çalıştırın:

npm start

Bu komut, uygulamayı tarayıcınızda otomatik olarak açacaktır.

2. Bileşenler ve JSX

2.1. Bileşenlerin Tanımı ve Türleri

React'te iki tür bileşen vardır:

Fonksiyonel Bileşenler: JavaScript fonksiyonlarıdır ve props alarak JSX döndürürler.
Sınıf Bileşenleri: ES6 sınıflarıdır ve React.Component'ten türetilirler. State ve lifecycle metotlarını kullanabilirler.

Fonksiyonel Bileşen Örneği:


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

Sınıf Bileşen Örneği:


class Welcome extends React.Component {
  render() {
    return <h1>Merhaba, {this.props.name}!</h1>;
  }
}

2.2. JSX Sözdizimi ve Kuralları

JSX, JavaScript içinde HTML benzeri etiketler kullanmanıza olanak tanır. JSX'in bazı temel kuralları şunlardır:

Tek Bir Kök Eleman: Bir bileşen, tek bir kök eleman döndürmelidir. Birden fazla eleman döndürmek için bir kapsayıcı eleman (örneğin, <div>) kullanabilirsiniz.
JavaScript İfadeleri: JSX içinde JavaScript ifadelerini kullanmak için süslü parantezler ({}) kullanabilirsiniz.
HTML Özellikleri: HTML özelliklerini kullanırken, bazı farklılıklar vardır. Örneğin, "class" yerine "className" ve "for" yerine "htmlFor" kullanmanız gerekir.

JSX Örneği:


function App() {
  const name = 'React';
  return (
    <div className="container">
      <h1>Merhaba, {name}!</h1>
      <p>React ile web geliştirme.</p>
    </div>
  );
}

2.3. Props ve State Yönetimi

Props, bileşenlere veri aktarmak için kullanılırken, state bir bileşenin iç verisidir. Props, üst bileşenden alt bileşene veri aktarmak için kullanılır ve alt bileşen props'ları değiştiremez. State ise, bir bileşenin kendi iç verisidir ve bileşen state'i değiştirebilir.

Props Örneği:


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

function App() {
  return <Welcome name="React" />;
}

State Örneği:


import React, { useState } from 'react';

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

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>Arttır</button>
    </div>
  );
}

3. Lifecycle Metotları

3.1. Sınıf Bileşenlerinde Lifecycle Metotları

Sınıf bileşenlerinde, bileşenin yaşam döngüsünün farklı aşamalarında çalışan lifecycle metotları bulunur. Bu metotlar, bileşenin oluşturulması, güncellenmesi ve kaldırılması sırasında belirli işlemleri gerçekleştirmek için kullanılır.

constructor(): Bileşen oluşturulduğunda ilk çalışan metottur. State'i başlatmak ve olay bağlamalarını yapmak için kullanılır.
render(): Bileşenin kullanıcı arayüzünü döndüren metottur.
componentDidMount(): Bileşen DOM'a yerleştirildikten sonra çalışan metottur. Veri çekme veya abonelik işlemleri için kullanılır.
componentDidUpdate(): Bileşen güncellendikten sonra çalışan metottur. DOM güncellemeleri veya yan etkiler için kullanılır.
componentWillUnmount(): Bileşen DOM'dan kaldırılmadan önce çalışan metottur. Temizlik işlemleri (örneğin, abonelikleri iptal etme) için kullanılır.

3.2. Fonksiyonel Bileşenlerde useEffect Hook'u

Fonksiyonel bileşenlerde lifecycle metotlarına benzer işlevselliği sağlamak için useEffect hook'u kullanılır. useEffect, bileşenin oluşturulması, güncellenmesi ve kaldırılması sırasında belirli işlemleri gerçekleştirmek için kullanılır.

useEffect Örneği:


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

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

  useEffect(() => {
    // Bileşen mount olduğunda ve count değiştiğinde çalışır
    document.title = `Sayaç: ${count}`;

    // Temizlik fonksiyonu (bileşen unmount olduğunda çalışır)
    return () => {
      document.title = 'React Uygulaması';
    };
  }, [count]); // Bağımlılık dizisi (count değiştiğinde useEffect çalışır)

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>Arttır</button>
    </div>
  );
}

4. Olay Yönetimi ve Formlar

4.1. React'te Olay Yönetimi

React'te olay yönetimi, HTML'deki olay yönetimine benzerdir, ancak bazı farklılıklar vardır. React olayları, camelCase sözdizimi kullanır (örneğin, onClick yerine onClick). Ayrıca, React olay işleyicileri, bileşenlerin state'ini güncellemek ve kullanıcı arayüzünü değiştirmek için kullanılır.

Olay Yönetimi Örneği:


import React, { useState } from 'react';

function Button() {
  const [text, setText] = useState('Tıkla');

  const handleClick = () => {
    setText('Tıklandı!');
  };

  return (
    <button onClick={handleClick}>{text}</button>
  );
}

4.2. Kontrollü ve Kontrolsüz Form Bileşenleri

React'te form bileşenleri, kontrollü ve kontrolsüz olmak üzere ikiye ayrılır:

Kontrollü Bileşenler: Form elemanlarının değeri, React bileşeninin state'i tarafından yönetilir. Bu, form elemanlarının değerini kontrol etmeyi ve doğrulamayı kolaylaştırır.
Kontrolsüz Bileşenler: Form elemanlarının değeri, DOM tarafından yönetilir. Bu, form elemanlarının değerini almak için ref kullanmayı gerektirir.

Kontrollü Form Bileşeni Örneği:


import React, { useState } from 'react';

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

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Adınız: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Adınız:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Gönder</button>
    </form>
  );
}

Kontrolsüz Form Bileşeni Örneği:


import React, { useRef } from 'react';

function NameForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Adınız: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Adınız:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Gönder</button>
    </form>
  );
}

5. Stil Yönetimi

5.1. CSS ile Stil Verme

React bileşenlerine stil vermek için CSS kullanabilirsiniz. CSS dosyalarını doğrudan bileşenlerinize import edebilir veya inline stiller kullanabilirsiniz.

CSS Dosyası Import Etme:


import './MyComponent.css';

function MyComponent() {
  return <div className="my-component">Merhaba, React!</div>;
}

Inline Stiller:


function MyComponent() {
  const style = {
    color: 'blue',
    fontSize: '20px'
  };

  return <div style={style}>Merhaba, React!</div>;
}

5.2. CSS-in-JS Çözümleri

CSS-in-JS, JavaScript içinde CSS yazmanıza olanak tanıyan bir yaklaşımdır. Bu, bileşenlerin stilini doğrudan bileşen kodu içinde tanımlamanıza olanak tanır. Popüler CSS-in-JS çözümleri şunlardır:

Styled Components: React bileşenleri için stil tanımlamak için kullanılan bir kütüphanedir.
Emotion: CSS-in-JS için başka bir popüler seçenektir.
JSS: JavaScript ile CSS yazmanıza olanak tanıyan bir kütüphanedir.

Styled Components Örneği:


import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

function MyComponent() {
  return <StyledButton>Tıkla</StyledButton>;
}

6. Yönlendirme (Routing)

6.1. React Router Dom Kullanımı

React Router Dom, React uygulamalarında yönlendirme (routing) işlemlerini yönetmek için kullanılan bir kütüphanedir. Tek sayfalı uygulamalarda (SPA) farklı sayfalara geçiş yapmak için kullanılır.

Kurulum:

npm install react-router-dom

Kullanım Örneği:


import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';

function Home() {
  return <h2>Anasayfa</h2>;
}

function About() {
  return <h2>Hakkımızda</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Anasayfa</Link>
          </li>
          <li>
            <Link to="/about">Hakkımızda</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/about" element={<About/>} />
      </Routes>
    </Router>
  );
}

6.2. Dinamik Rotalar ve Parametreler

React Router Dom, dinamik rotalar ve parametreler kullanarak farklı sayfalara geçiş yapmanıza olanak tanır. Örneğin, bir ürün listesi uygulamasında her ürün için farklı bir sayfa oluşturabilirsiniz.

Dinamik Rota Örneği:


import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes, useParams } from 'react-router-dom';

function Product() {
  const { id } = useParams();
  return <h2>Ürün ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/product/1">Ürün 1</Link>
          </li>
          <li>
            <Link to="/product/2">Ürün 2</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/product/:id" element={<Product/>} />
      </Routes>
    </Router>
  );
}

7. Veri Yönetimi

7.1. Context API

Context API, React'te bileşenler arasında veri paylaşmak için kullanılan bir mekanizmadır. Özellikle, props drilling'i (props'ları alt bileşenlere aktarmak) önlemek için kullanılır.

Context Oluşturma:


import React from 'react';

const MyContext = React.createContext();

export default MyContext;

Context Sağlayıcı:


import React, { useState } from 'react';
import MyContext from './MyContext';

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <MyContext.Provider value={{ theme, setTheme }}>
      <MyComponent/>
    </MyContext.Provider>
  );
}

Context Tüketici:


import React, { useContext } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const { theme, setTheme } = useContext(MyContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      <p>Tema: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Temayı Değiştir</button>
    </div>
  );
}

7.2. Redux

Redux, JavaScript uygulamaları için öngörülebilir bir state konteyneridir. Özellikle büyük ve karmaşık uygulamalarda state yönetimini kolaylaştırmak için kullanılır.

Temel Kavramlar:

Store: Uygulamanın state'ini tutan nesnedir.
Actions: State'i değiştirmek için kullanılan nesnelerdir.
Reducers: Actions'ları işleyerek state'i güncelleyen fonksiyonlardır.
Dispatch: Actions'ları reducer'lara göndermek için kullanılan fonksiyondur.
Subscribe: Store'daki değişiklikleri dinlemek için kullanılan fonksiyondur.

Redux Örneği:

Redux Kurulumu:

npm install redux react-redux

Actions:


const INCREMENT = 'INCREMENT';

export const increment = () => ({
  type: INCREMENT
});

Reducer:


const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1
      };
    default:
      return state;
  }
};

export default reducer;

Store:


import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

Component:


import React from 'react';
import { connect } from 'react-redux';
import { increment } from './actions';

function Counter(props) {
  return (
    <div>
      <p>Sayaç: {props.count}</p>
      <button onClick={props.increment}>Arttır</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  count: state.count
});

const mapDispatchToProps = {
  increment
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Provider:


import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter/>
    </Provider>
  );
}

8. API Entegrasyonu

8.1. Fetch API Kullanımı

Fetch API, web tarayıcılarında HTTP istekleri yapmak için kullanılan bir arayüzdür. React uygulamalarında API'lerden veri çekmek ve göndermek için kullanılır.

Veri Çekme Örneği:


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

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

8.2. Axios Kütüphanesi

Axios, tarayıcılar ve Node.js için Promise tabanlı bir HTTP istemcisidir. Fetch API'ye göre daha fazla özellik ve kolaylık sağlar. Örneğin, otomatik JSON dönüşümü, istek iptali ve hata yönetimi gibi özellikler sunar.

Kurulum:

npm install axios

Veri Çekme Örneği:


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

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => setUsers(response.data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

9. Test

9.1. Birim Testleri (Unit Tests)

Birim testleri, bir uygulamanın en küçük parçalarını (örneğin, fonksiyonlar, bileşenler) ayrı ayrı test etmek için kullanılır. Birim testleri, kodun doğru çalıştığını ve beklenmedik yan etkileri olmadığını doğrulamak için önemlidir.

Popüler Test Kütüphaneleri:

Jest: Facebook tarafından geliştirilen bir test framework'üdür. React uygulamaları için özel olarak tasarlanmıştır.
Mocha: Esnek ve genişletilebilir bir test framework'üdür.
Chai: Assertion kütüphanesidir. Test sonuçlarını doğrulamak için kullanılır.

9.2. Entegrasyon Testleri (Integration Tests)

Entegrasyon testleri, uygulamanın farklı bölümlerinin (örneğin, bileşenler, modüller) birlikte doğru çalıştığını test etmek için kullanılır. Entegrasyon testleri, birim testlerinin ötesinde, farklı parçaların etkileşimini doğrulamak için önemlidir.

9.3. Uçtan Uca Testler (End-to-End Tests)

Uçtan uca testler, uygulamanın tümünün (kullanıcı arayüzü, arka uç, veritabanı) birlikte doğru çalıştığını test etmek için kullanılır. Uçtan uca testler, kullanıcı senaryolarını simüle ederek uygulamanın gerçek dünya koşullarında nasıl performans gösterdiğini doğrulamak için önemlidir.

10. Performans Optimizasyonu

10.1. Performans Analizi Araçları

React uygulamalarının performansını analiz etmek için çeşitli araçlar kullanılabilir. Bu araçlar, performans sorunlarını tespit etmeye ve optimizasyon fırsatlarını belirlemeye yardımcı olur.

React Profiler: React geliştirme araçlarının bir parçasıdır. Bileşenlerin render sürelerini ve performans darboğazlarını analiz etmek için kullanılır.
Chrome DevTools: Tarayıcının geliştirme araçlarıdır. Performans, bellek ve ağ trafiği gibi çeşitli metrikleri analiz etmek için kullanılır.
Lighthouse: Web sayfalarının performansını, erişilebilirliğini, SEO'sunu ve diğer metriklerini analiz etmek için kullanılan bir araçtır.

10.2. Bellek Yönetimi

Bellek yönetimi, React uygulamalarının performansını etkileyen önemli bir faktördür. Gereksiz bellek tüketimini önlemek ve bellek sızıntılarını engellemek için dikkatli olmak gerekir.

Gereksiz Render'ları Önleme: Bileşenlerin gereksiz yere render olmasını önlemek için React.memo, useMemo ve useCallback hook'ları kullanılabilir.
Büyük Veri Yapılarını Yönetme: Büyük veri yapılarını (örneğin, diziler, nesneler) verimli bir şekilde yönetmek için pagination, virtualization ve lazy loading teknikleri kullanılabilir.
Bellek Sızıntılarını Önleme: Bileşenlerin unmount olduğunda temizlik işlemlerini (örneğin, abonelikleri iptal etme, zamanlayıcıları durdurma) yapmak bellek sızıntılarını önlemeye yardımcı olur.

11. Gerçek Hayattan Örnekler ve Vaka Çalışmaları

11.1. E-ticaret Uygulaması

Bir e-ticaret uygulamasında React, ürün listeleme, sepet yönetimi, ödeme işlemleri ve kullanıcı arayüzü gibi çeşitli bileşenleri oluşturmak için kullanılabilir. React'in bileşen tabanlı mimarisi, uygulamanın modüler ve bakımı kolay olmasını sağlar.

11.2. Sosyal Medya Platformu

Bir sosyal medya platformunda React, kullanıcı profilleri, gönderi akışı, bildirimler ve mesajlaşma gibi çeşitli

Özel Sunucu Hizmetleri

Standart Sunucular

Bilgi Bankası