اذهب إلى المحتوى
  • 0

ربط مشروع react js مع laravel عن طريق api

Adham Mahfoud

السؤال

السلام عليكم 

كيف ممكن أربط مشروع React js مع Laravel عن طريق API وهل من الطبيعي أن يكون الريأكت له سيرفر خاص واللارفيل له سيرفر خاص أم يجب دمجهم في نفس السيرفر؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

ستحتاج أولا إنشاء ملف عرض يقوم بتضمين المكون الجذر لتطبيق رياكت، وليكن spa.blade.php: 

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        @vite('resources/sass/app.scss')
    </head>
    <body class="antialiased">
        <div id="app">..</div>
        
        @vite('resources/js/main.js')
    </body>
</html>

انتبه الى تضمين ملف جافاسكربت وملف التنسيقات الأساسين للتطبيق. 
الأن سنحتاج توجيه كل الطلبيات التي تختلف عن مسارات الـ API إلى عرض هذا الملف، وذلك لأنه يقوم بتصيير تطبيق رياكت ويترك له عملية التوجيه Routing. ضف المسار التالي في ملف web.php:

Route::get('{any}', function(){
    return view('spa');
})
->where('any' ,'^(?!api).*$');

قم بتضمين وبناء تطبيق رياكت لديك داخل تطبيق لارافيل، وعند الانتهاء قم بتشغيل npm run build لتحزيم ملفات التطبيق وتخريجها.

وطبعا لا تنسى بناء تطبيق رياكت لديك في الملف الذي يتم تضمينه في صفحة spa: 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

سيتم تصيير تطبيق رياكت في المكون الجذر app بطبيعة الحال. 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يوجد طريقتين لعمل ذلك , الأوى الربط بينهم و وضع كل واحدة على سيرفر مختلف و الأخرى أن تقوم بوضعهم على نفس اليرفر و لكل منهم المميزات و العيوب الخاصة به 
 ف مثلا اذا قمت بوضع كل منهم على نفس السيرفر فانك تستفيد في تلك الحالة :
1- server side rendering و الذي يكون مفيد جدا مع محركات البحث .
2- استعمال الroutes الخاصة بالسيرفر 
و اذا قمت بوضعهم على سييرفرات مختلفة فانك تستفيد انك تقوم ب :
1- تبسيط بيئة العمل 
2- استعمال خواص react كل SPA و التنقل بشكل أسلس 
____
ف لا يوجد حل صحيح  و حل خطأ و دائما الأجابة تكون على حسب الحالة و المشروع المراد تنفيذة

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...