1. Proje Yapısı ve Kurulum
1.1 Laravel 11 Kurulumu:
- Laravel 11'i yeni bir proje olarak kurmak için aşağıdaki adımları izleyebiliriz:
- Terminali açıp, Laravel'i kurmak için aşağıdaki komutu çalıştırırız:
composer create-project laravel/laravel ecommerce
Bu komut, "ecommerce" adlı bir dizin oluşturacak ve Laravel 11'i bu dizine kuracaktır.
- Laravel projemizi açar ve gerekli bağımlılıkları yükleriz. Terminalde aşağıdaki komutu çalıştırırız:
composer install
Bu komut, projemiz için gerekli tüm bağımlılıkları indirir ve kurar.
1.2 Inertia Kurulumu ve Laravel Entegrasyonu:
- Inertia'yı kurmak ve Laravel ile entegre etmek için aşağıdaki adımları izleyebiliriz:
- Terminalde aşağıdaki komutu çalıştırarak Inertia'yı kurarız:
composer require inertiajs/inertia-laravel
Bu komut, Inertia'yı projemize ekler.
- Inertia'yı Laravel ile entegre etmek için, "app/Http/Middleware/HandleInertiaRequests.php" dosyasını açar ve gerekli değişiklikleri yaparız.
Bu dosya, Inertia ile gelen istekleri işlemek için kullanılır.
- Laravel'in "app/Http/Kernel.php" dosyasını açar ve "HandleInertiaRequests" middleware'ini "web" grubu içine ekleriz.
Bu sayede, Inertia ile gelen istekler middleware tarafından işlenecektir.
- Laravel'in "routes/web.php" dosyasını açar ve Inertia için gerekli rotaları ekleriz. Örneğin:
php
use Inertia\Inertia;
use Inertia\Response;
Route::get('/', function (): Response {
return Inertia::render('Welcome');
});
Bu rota, ana sayfayı Inertia ile render ederek "Welcome" bileşenini gösterir.
1.3 React Kurulumu ve Inertia Entegrasyonu:
- React projesini kurmak için aşağıdaki adımları izleyebiliriz:
- Terminalde aşağıdaki komutu çalıştırarak React projesini kurarız:
npx create-react-app frontend
Bu komut, "frontend" adlı bir dizin oluşturacak ve React projesini bu dizine kuracaktır.
- React projemizi açar ve gerekli bağımlılıkları yükleriz. Terminalde aşağıdaki komutu çalıştırırız:
npm install
Bu komut, projemiz için gerekli tüm React bağımlılıklarını indirir ve kurar.
- React projemizde, Inertia ile iletişim kurmak için gerekli ayarları yaparız. "src/index.js" dosyasını açar ve aşağıdaki kodu ekleriz:
import React from 'react';
import ReactDOM from 'react-dom';
import { createInertiaApp } from 'inertia-app';
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup: ({ el, App, props }) => {
ReactDOM.render(<App {...props} />, el);
},
});
Bu kod, Inertia'yı React projemize entegre eder ve Inertia bileşenlerini render edebilir.
Bu şekilde, ilk adım olan proje yapısı ve kurulumunu tamamlamış oluruz. Laravel, Inertia ve React projeleri kurulumu ve entegrasyonu sağlanmış olur. Sonraki adımlarda, e-ticaret uygulamamız için gerekli işlevsellikleri eklemeye başlayabiliriz.
