React + Laravel Sanctum + MySQL ile Modern Web Uygulamaları Geliştirme

React + Laravel Sanctum + MySQL ile Modern Web Uygulamaları Geliştirme

907 A- A+
React + Laravel Sanctum + MySQL ile Modern Web Uygulamaları Geliştirme - bimakale.com
08 Eylül 2025 Pazartesi - 00:22 (11 Ay önce) 4 dk okuma

Günümüzde web uygulamaları sadece basit sayfalar sunmakla kalmıyor; gerçek zamanlı veri işleme, kullanıcı oturumu yönetimi, güvenlik ve ölçeklenebilirlik gibi birçok ihtiyacı karşılıyor. Bu ihtiyaçlara en uygun çözümlerden biri de:

React + Laravel Sanctum + MySQL üçlüsü

Bu yazıda, bu teknolojilerin birlikte nasıl çalıştığını, hangi avantajları sunduğunu ve gerçek bir örnek üzerinden nasıl kullanılacağını detaylıca inceleyeceğiz.

Neden React + Laravel Sanctum + MySQL?

  • React (Frontend):
    Facebook tarafından geliştirilen React, kullanıcı arayüzleri oluşturmak için kullanılan en popüler JavaScript kütüphanesidir. Hızlı, bileşen tabanlı ve ölçeklenebilir yapısıyla modern frontend geliştirmede bir numaradır.

  • Laravel Sanctum (Backend Güvenliği):
    Laravel’in hafif authentication (kimlik doğrulama) sistemi olan Sanctum, SPA (Single Page Application) ve mobil uygulamalarda güvenli kullanıcı oturumları oluşturmak için tasarlanmıştır.

  • MySQL (Veritabanı):
    Dünyada en çok kullanılan ilişkisel veritabanlarından biri olan MySQL, veri güvenliği, hız ve performans açısından Laravel ile mükemmel bir uyum sağlar.

Genel Çalışma Mantığı

  1. React tarafı → Kullanıcı giriş formu veya API çağrısı yapar.

  2. Laravel API (Sanctum ile güvenli) → Kullanıcıyı doğrular, JWT/Token üretir.

  3. MySQL → Kullanıcı bilgilerini, verileri saklar ve Laravel aracılığıyla döner.

  4. React → Gelen yanıtı işler, state yönetimi ile ekrana yansıtır.

Kurulum Adımları

1. Laravel Kurulumu

composer create-project laravel/laravel backend
cd backend

2. Sanctum Kurulumu

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

app/Http/Kernel.php içine middleware ekle:

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

3. Kullanıcı Modeli

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
}

4. Authentication Controller

public function login(Request $request)
{
    $credentials = $request->only('email', 'password');

    if (!Auth::attempt($credentials)) {
        return response()->json(['message' => 'Unauthorized'], 401);
    }

    $user = Auth::user();
    $token = $user->createToken('auth_token')->plainTextToken;

    return response()->json([
        'access_token' => $token,
        'token_type' => 'Bearer',
        'user' => $user
    ]);
}

React Tarafı

1. React Projesi Kurulumu

npx create-react-app frontend
cd frontend
npm install axios

2. Axios ile Login İsteği

import React, { useState } from "react";
import axios from "axios";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = async () => {
    try {
      const response = await axios.post("http://localhost:8000/api/login", {
        email,
        password,
      });
      localStorage.setItem("token", response.data.access_token);
      alert("Giriş başarılı!");
    } catch (error) {
      alert("Hatalı giriş!");
    }
  };

  return (
    <div>
      <h2>Giriş Yap</h2>
      <input
        type="email"
        placeholder="E-mail"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Şifre"
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>Giriş Yap</button>
    </div>
  );
}

MySQL ile Veri Yönetimi

Örnek tablo: tasks

CREATE TABLE tasks (
  id INT AUTO_INCREMENT PRIMARY KEY,
  user_id INT,
  title VARCHAR(255),
  status TINYINT DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Laravel Model:

class Task extends Model {
    protected $fillable = ['title', 'status', 'user_id'];
}

React tarafında listeleme:

useEffect(() => {
  const fetchTasks = async () => {
    const token = localStorage.getItem("token");
    const response = await axios.get("http://localhost:8000/api/tasks", {
      headers: { Authorization: `Bearer ${token}` },
    });
    setTasks(response.data);
  };
  fetchTasks();
}, []);

Avantajlar

  • React: Kullanıcıya hızlı, dinamik, modern arayüz sunar.

  • Laravel Sanctum: SPA ve mobil uygulamalar için güvenli oturum yönetimi sağlar.

  • MySQL: Güçlü, ölçeklenebilir ve güvenilir veri altyapısı sağlar.

Bu üçlü ile e-ticaret siteleri, CRM yazılımları, SaaS ürünleri, blog platformları, anket sistemleri gibi pek çok uygulama güvenle geliştirilebilir.

Sonuç

React + Laravel Sanctum + MySQL üçlüsü, modern web projeleri için hız, güvenlik ve esneklik sunar.

  • React ile kullanıcı deneyimi ön planda tutulur.

  • Laravel + Sanctum ile backend tarafında güçlü bir API ve güvenlik sağlanır.

  • MySQL ise sağlam bir veritabanı altyapısı oluşturur.

Kısacası, bu kombinasyon hem freelance çalışan geliştiriciler hem de kurumsal projeler için mükemmel bir çözümdür.

 

Alakalı İçerikler

  • Yazılım
  • Web Yazılım
  • Laravel
  • React
Yorumlar
Sende Yorumunu Ekle
Kullanıcı
0 karakter
Moderatör
Moderatör
620 Makale
Yazarın Diğer Etiketleri Tümünü Göster
Popüler Etiketler Tümünü Göster
Yazarın Diğer İçerikleri