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

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ığı
-
React tarafı → Kullanıcı giriş formu veya API çağrısı yapar.
-
Laravel API (Sanctum ile güvenli) → Kullanıcıyı doğrular, JWT/Token üretir.
-
MySQL → Kullanıcı bilgilerini, verileri saklar ve Laravel aracılığıyla döner.
-
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.
- Yazılım
- Web Yazılım
- Laravel
- React
Tepkini Göster
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
Yorumlar
Sende Yorumunu Ekle