العودة للمقالات

بناء تطبيق كامل باستخدام React و SvelteKit و Laravel API

Majd Muhtaseb21‏/11‏/202512 دقيقة

مقدمة

تشرح هذه المقالة كيفية إنشاء تطبيق كامل بسيط باستخدام React للواجهة الأمامية، و SvelteKit للتعامل مع التوجيه والعرض من جانب الخادم، و Laravel لبناء واجهة برمجة تطبيقات خلفية قوية. توفر هذه المجموعة حلاً حديثًا وعالي الأداء لتطوير الويب.

إعداد Laravel API

أولاً، أنشئ مشروع Laravel جديد:

laravel new my-laravel-api
cd my-laravel-api

بعد ذلك، قم بإنشاء وحدة تحكم وموديل بسيطة للموارد:

php artisan make:model Item -mcr

قم بتحديث ملف الترحيل (database/migrations/*_create_items_table.php) بالهيكل المطلوب. على سبيل المثال:

public function up()
{
    Schema::create('items', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->text('description')->nullable();
        $table->timestamps();
    });
}

قم بتشغيل الترحيلات:

php artisan migrate

قم بتحديث ItemController.php بعمليات CRUD الأساسية:

<?php

namespace App\Http\Controllers;

use App\Models\Item;
use Illuminate\Http\Request;

class ItemController extends Controller
{
    public function index()
    {
        return Item::all();
    }

    public function store(Request $request)
    {
        return Item::create($request->all());
    }

    public function show(Item $item)
    {
        return $item;
    }

    public function update(Request $request, Item $item)
    {
        $item->update($request->all());
        return $item;
    }

    public function destroy(Item $item)
    {
        $item->delete();
        return response()->json(['message' => 'Item deleted']);
    }
}

حدد مسارات API في routes/api.php:

<?php

use App\Http\Controllers\ItemController;
use Illuminate\Support\Facades\Route;

Route::resource('items', ItemController::class);

إعداد الواجهة الأمامية SvelteKit

قم بإنشاء مشروع SvelteKit جديد:

npm create svelte@latest my-sveltekit-app
cd my-sveltekit-app
npm install

قم بتثبيت axios لعمل طلبات API:

npm install axios

قم بإنشاء ملف +page.svelte في الدليل src/routes لجلب وعرض العناصر من Laravel API:

<script>
    import axios from 'axios';

    let items = [];

    async function getItems() {
        const response = await axios.get('http://localhost:8000/api/items'); // قم بتعديل الرابط إذا لزم الأمر
        items = response.data;
    }

    getItems();
</script>

<h1>العناصر</h1>

{#each items as item}
    <div>
        <h2>{item.name}</h2>
        <p>{item.description}</p>
    </div>
{/each}

دمج مكونات React

داخل +page.svelte أو أي مكون Svelte آخر، يمكنك تضمين مكونات React باستخدام svelte-add. أولاً، أضف تكامل svelte-add:

npm install -D svelte-add
npx svelte-add@latest react

ثم، قم بإنشاء مكون React بسيط (على سبيل المثال، src/lib/MyReactComponent.jsx):

// src/lib/MyReactComponent.jsx
import React from 'react';

function MyReactComponent() {
  return (
    <div>
      <p>هذا مكون React مضمن في SvelteKit!</p>
    </div>
  );
}

export default MyReactComponent;

الآن، قم باستيراد واستخدام مكون React في مكون Svelte الخاص بك:

// src/routes/+page.svelte
<script>
  import MyReactComponent from '$lib/MyReactComponent.jsx';
  import { onMount } from 'svelte';

  let reactComponent;

  onMount(() => {
    reactComponent = MyReactComponent;
  });
</script>

{#if reactComponent}
  <svelte:component this={reactComponent} />
{/if}

خاتمة

قدمت هذه المقالة مخططًا أساسيًا لبناء تطبيق كامل باستخدام React و SvelteKit و Laravel. يمكنك التوسع في هذا الأساس لإنشاء تطبيقات أكثر تعقيدًا وغنية بالميزات. تذكر التعامل مع تكوينات CORS في Laravel API الخاص بك لطلبات عبر النطاقات.