Laravel ve React ile Güçlü API Tabanlı Sistemler

Modern web geliştirmede API-first yaklaşımı, uygulamaların ölçeklenebilirliği ve bakımı için kritik önemdedir. Laravel'in güçlü backend yetenekleri ile React'in dinamik frontend özelliklerini birleştirerek, profesyonel düzeyde API tabanlı sistemler geliştirebilirsiniz.

API Tabanlı Mimari Nedir?

API tabanlı mimari, frontend ve backend uygulamalarının tamamen ayrıştırıldığı, aralarında RESTful API'ler üzerinden iletişim kurduğu bir yaklaşımdır.

Sistem Mimarisi

React Frontend

SPA, Component-Based UI

⟶

RESTful API

JSON, Authentication

⟶

Laravel Backend

Business Logic, Database

Avantajları

🔄

Ölçeklenebilirlik

Frontend ve backend bağımsız olarak ölçeklendirilebilir

🎯

Çok Platform Desteği

Aynı API ile web, mobil ve desktop uygulamaları

👥

Ekip İşbirliği

Frontend ve backend ekipleri paralel çalışabilir

⚡

Performans

SPA yapısı ile hızlı kullanıcı deneyimi

Laravel API Backend Kurulumu

İlk olarak Laravel backend projemizi oluşturalım:

Laravel Projesi Oluşturma

                        # Laravel projesi oluştur

                        composer create-project laravel/laravel api-backend

                        cd api-backend

                        # API için gerekli paketleri yükle

                        composer require laravel/sanctum

                        composer require spatie/laravel-cors

API Routes Yapılandırması

                        // routes/api.php

                        <?php

                        use Illuminate\Http\Request;

                        use Illuminate\Support\Facades\Route;

                        use App\Http\Controllers\AuthController;

                        use App\Http\Controllers\UserController;

                        // Public routes

                        Route::post('/auth/register', [AuthController::class, 'register']);

                        Route::post('/auth/login', [AuthController::class, 'login']);

                        // Protected routes

                        Route::middleware('auth:sanctum')->group(function () {

                            Route::get('/user', [UserController::class, 'profile']);

                            Route::post('/auth/logout', [AuthController::class, 'logout']);

                        });

Laravel Sanctum Yapılandırması

                        // config/sanctum.php

                        return [

                            'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost')),

                            // Token expiration

                            'expiration' => null,

                            'middleware' => [

                                'verify_csrf_token' => App\Http\Middleware\VerifyCsrfToken::class,

                                'encrypt_cookies' => App\Http\Middleware\EncryptCookies::class,

                            ],

                        ];

Authentication Controller

                        // app/Http/Controllers/AuthController.php

                        <?php

                        namespace App\Http\Controllers;

                        use Illuminate\Http\Request;

                        use Illuminate\Support\Facades\Auth;

                        use Illuminate\Support\Facades\Hash;

                        use App\Models\User;

                        class AuthController extends Controller

                        {

                            public function register(Request $request)

                            {

                                $validatedData = $request->validate([

                                    'name' => 'required|string|max:255',

                                    'email' => 'required|string|email|max:255|unique:users',

                                    'password' => 'required|string|min:8',

                                ]);

                                $user = User::create([

                                    'name' => $validatedData['name'],

                                    'email' => $validatedData['email'],

                                    'password' => Hash::make($validatedData['password']),

                                ]);

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

                                return response()->json([

                                    'access_token' => $token,

                                    'token_type' => 'Bearer',

                                    'user' => $user

                                ]);

                            }

                        }

React Frontend Kurulumu

Şimdi React frontend projemizi oluşturalım ve API ile entegre edelim:

React Projesi Oluşturma

                        # React projesi oluştur

                        npx create-react-app frontend-react

                        cd frontend-react

                        # API istekleri için gerekli paketleri yükle

                        npm install axios react-router-dom

                        npm install @reduxjs/toolkit react-redux

API Service Kurulumu

                        // src/services/apiService.js

                        import axios from 'axios';

                        const API_URL = 'http://localhost:8000/api';

                        const apiClient = axios.create({

                          baseURL: API_URL,

                          headers: {

                            'Content-Type': 'application/json',

                            'Accept': 'application/json'

                          }

                        });

                        // Request interceptor for auth token

                        apiClient.interceptors.request.use(

                          (config) => {

                            const token = localStorage.getItem('auth_token');

                            if (token) {

                              config.headers.Authorization = `Bearer ${token}`;

                            }

                            return config;

                          }

                        );

                        export default apiClient;

Auth Hook Implementasyonu

                        // src/hooks/useAuth.js

                        import { useState, useEffect } from 'react';

                        import apiClient from '../services/apiService';

                        export const useAuth = () => {

                          const [user, setUser] = useState(null);

                          const [loading, setLoading] = useState(true);

                          const login = async (email, password) => {

                            try {

                              const response = await apiClient.post('/auth/login', {

                                email,

                                password

                              });

                              const { access_token, user } = response.data;

                              localStorage.setItem('auth_token', access_token);

                              setUser(user);

                              return true;

                            } catch (error) {

                              console.error('Login failed:', error);

                              return false;

                            }

                          };

                          const logout = () => {

                            localStorage.removeItem('auth_token');

                            setUser(null);

                          };

                          return { user, login, logout, loading };

                        };

API Endpoints Referansı

Laravel API Endpoints

POST /api/auth/register

Kullanıcı kayıt

POST /api/auth/login

Kullanıcı girişi

POST /api/auth/logout

Kullanıcı çıkışı

GET /api/user

Kullanıcı profili

Güvenlik ve Best Practices

Güvenlik Önlemleri

Tüm API istekleri HTTPS üzerinden yapılmalıdır
Token expiration sürelerini makul seviyelerde tutun
CORS ayarlarını prodüksiyon için güvenli şekilde yapılandırın
Rate limiting uygulayarak API'nızı kötüye kullanıma karşı koruyun

Geliştirme Checklist'i

Laravel Sanctum kurulumu ve yapılandırması
API routes tanımlaması ve middleware ayarları
React projesi kurulumu ve Axios yapılandırması
Authentication flow implementasyonu
Error handling ve loading states
CORS yapılandırması
Prodüksiyon güvenlik ayarları
API dokumentasyonu oluşturma

Performans Optimizasyonu

API tabanlı sistemlerde performans kritik önemdedir:

Caching Stratejileri: Redis veya Memcached ile API response'larını cache'leyin
Database Optimizasyonu: Eager loading ve indexing kullanın
API Rate Limiting: Throttle middleware ile istekleri sınırlayın
Response Compression: Gzip compression aktifleştirin
Pagination: Büyük veri setleri için sayfalama kullanın

Dağıtım (Deployment)

Laravel backend ve React frontend'i ayrı sunucularda dağıtabilir veya konteynerize edebilirsiniz:

                    # Docker ile dağıtım örneği

                    docker-compose up -d

                    docker exec laravel-app php artisan migrate

                    docker exec laravel-app php artisan config:cache

Sonuç

Laravel ve React ile API tabanlı sistemler geliştirmek, modern web uygulamalarının temelini oluşturmaktadır. Bu rehberle güvenli, ölçeklenebilir ve bakımı kolay sistemler geliştirebilirsiniz.

WebKodlama.net olarak, Laravel ve React teknolojilerinde uzmanlaşmış ekibimizle profesyonel API tabanlı sistemler geliştiriyoruz. Projeniz için danışmanlık ve geliştirme hizmetlerimizden faydalanabilirsiniz.