ربط react مع laravel

Mohamed Alzurfi · 18 سبتمبر 2021

هل يمكن ربط مشروع ريكت على الارفيل انا املك تصميم ريكت ولا اعلم كيف اضيفه الى منصة عمل لارفيل

سامح أشرف · 18 سبتمبر 2021

بالتأكيد يمكنك أن تستخدم أي إطار عمل لواجهة المستخدم frontend مثل react.js أو vue.js أو غيرها مع Laravel بدون مشكلة.

بشكل إفتراضي يأتي Laravel مجهز بإطار Vue.js (مع دعم لـ React.js) أيضًا، وستلاحظ ذلك من خلال الملف بصيغة .vue في مجلد resources/js/components، (إن لم يكن لديك هذا المجلد فلا توجد مشكلة) ويمكنك تغير هذا الأمر من خلال تنفيذ الأمر التالي:

composer require laravel/ui
php artisan ui react --auth

بمجرد تنفيذ الأمر السابق ستلاحظ أن الملفات الموجودة في المجلد resources/js/components تم إستبدالها بمكونات React بدلًا من مكونات vue.

أيضًا سوف تحتاج إلى تثبيت مكتبات وحزم عبر npm، على النحو التالي:

npm install

ستجد أن مجلد جديد ظهر باسم node_modules وهذا المجلد يحتوي على كل المكتبات والحزم الضرورية لعمل المشروع (Frontend فقط).

من أجل تقديم أي عنصر إلى Browser DOM ، نحتاج إلى حاوية أو عنصر DOM جذر. في هذه الحالة يجب تعديل الملف resources\views\welcome.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>

        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
      
        <!-- سيتم عرض تطبيق react.js هنا -->
        <div id="example"></div>
      
        <script src="js/app.js"></script>
    </body>
</html>

أخيرًا يجب توليد ملف js/app.js الذي تم تضمينه في الكود السابق وذلك عبر الأمر التالي:

npm run dev

ملاحظة: إن كانت هذه المرة الأولى التي تقوم بتنفيذ الأمر السابق، قد تحتاج إلى تنفيذه مرتين بدلًا من مرة واحدة.

الآن تستطيع تشغيل المشروع وستجد أن النتيجة كما في الصورة:

هنا تم عرض مكون React بنجاح.

إن كان لديك مشروع يعمل بالفعل، فكل ما عليك فعله هو إضافة ملف المشروع النهائي (ملف javascript) مكان الملف js/app.j،s ، ونفس الأمر بالنسبة إلى CSS، أو يمكنك دمج المشروع بالكامل من خلال إضافة المكونات إلى المجلد resources/js/components وإستخدام الملف resources\js\app.js كـ Entry point

Mohamed Alzurfi · 19 سبتمبر 2021

بتاريخ 22 ساعات قال سامح أشرف:
بالتأكيد يمكنك أن تستخدم أي إطار عمل لواجهة المستخدم frontend مثل react.js أو vue.js أو غيرها مع Laravel بدون مشكلة.

بشكل إفتراضي يأتي Laravel مجهز بإطار Vue.js (مع دعم لـ React.js) أيضًا، وستلاحظ ذلك من خلال الملف بصيغة .vue في مجلد resources/js/components، (إن لم يكن لديك هذا المجلد فلا توجد مشكلة) ويمكنك تغير هذا الأمر من خلال تنفيذ الأمر التالي:
composer require laravel/ui
php artisan ui react --auth
بمجرد تنفيذ الأمر السابق ستلاحظ أن الملفات الموجودة في المجلد resources/js/components تم إستبدالها بمكونات React بدلًا من مكونات vue.

أيضًا سوف تحتاج إلى تثبيت مكتبات وحزم عبر npm، على النحو التالي:
npm install
ستجد أن مجلد جديد ظهر باسم node_modules وهذا المجلد يحتوي على كل المكتبات والحزم الضرورية لعمل المشروع (Frontend فقط).

من أجل تقديم أي عنصر إلى Browser DOM ، نحتاج إلى حاوية أو عنصر DOM جذر. في هذه الحالة يجب تعديل الملف resources\views\welcome.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>

        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
      
        
        <div id="example"></div>
      
        <script src="js/app.js"></script>
    </body>
</html>
أخيرًا يجب توليد ملف js/app.js الذي تم تضمينه في الكود السابق وذلك عبر الأمر التالي:
npm run dev
ملاحظة: إن كانت هذه المرة الأولى التي تقوم بتنفيذ الأمر السابق، قد تحتاج إلى تنفيذه مرتين بدلًا من مرة واحدة.

الآن تستطيع تشغيل المشروع وستجد أن النتيجة كما في الصورة:

هنا تم عرض مكون React بنجاح.

إن كان لديك مشروع يعمل بالفعل، فكل ما عليك فعله هو إضافة ملف المشروع النهائي (ملف javascript) مكان الملف js/app.j،s ، ونفس الأمر بالنسبة إلى CSS، أو يمكنك دمج المشروع بالكامل من خلال إضافة المكونات إلى المجلد resources/js/components وإستخدام الملف resources\js\app.js كـ Entry point

شكرا استاذ سامح أشرف لقد قمت بالفعل والمشروع يعمل لكن المشكلة هي عن اضافة ملفات الفرونت ايند يظهر اخطاء ولا يعمل المشروع

تم التعديل في 19 سبتمبر 2021 بواسطة Mohamed Alzurfi

سامح أشرف · 19 سبتمبر 2021

بتاريخ 48 دقائق مضت قال Mohamed Alzurfi:

شكرا استاذ سامح أشرف لقد قمت بالفعل والمشروع يعمل لكن المشكلة هي عن اضافة ملفات الفرونت ايند يظهر اخطاء ولا يعمل المشروع

لاحظ أن الخطأ يظهر can't resolve react-router-dom أي أن هذه الحزمة غير موجودة، أعتقد أنك تستخدم بعض الحزم غير المثبتة في المشروع، يمكنك تثبيت كل من حزمة react-router-dom و react-icons من خلال الأمر التالي:

npm install react-router-dom react-icons --save

Mohamed Alzurfi · 19 سبتمبر 2021

بتاريخ 16 دقائق مضت قال سامح أشرف:
لاحظ أن الخطأ يظهر can't resolve react-router-dom أي أن هذه الحزمة غير موجودة، أعتقد أنك تستخدم بعض الحزم غير المثبتة في المشروع، يمكنك تثبيت كل من حزمة react-router-dom و react-icons من خلال الأمر التالي:
npm install react-router-dom react-icons --save

بعد استخدام هذا الامر قل عدد الاخطاء
كيف يمكن ان اعرف اي حزمة اخرى يجب تثبيتها

بتاريخ 11 دقائق مضت قال Mohamed Alzurfi:

بعد استخدام هذا الامر قل عدد الاخطاء
كيف يمكن ان اعرف اي حزمة اخرى يجب تثبيتها

شكرا لقد تم حل الاخطاء لكن الشاسة الان تظهر بيضاء عند فتح الموقع

سامح أشرف · 19 سبتمبر 2021

بتاريخ 8 دقائق مضت قال Mohamed Alzurfi:

بعد استخدام هذا الامر قل عدد الاخطاء
كيف يمكن ان اعرف اي حزمة اخرى يجب تثبيتها

في رسالة الخطأ يظهر اسم الحزمة أو الملف الذي لم يتم العصور عليه، كما في الصورة:

لاحظ أن الحزم styled-components و react-slick و slick-carousel كلها غير مثبته ويمكنك تثبيتها من خلال الأمر التالي:

npm install styled-components react-slick slick-carousel

أيضًا إن كان مشروع React يعمل بالفعل، وتريد ربطه بـ Laravel فيمكنك معرفة الحزم المستخدمة في مشروع React من خلال الملف package.json (الخاص بمشروع React نفسه وليس مشروع Laravel).

Mohamed Alzurfi · 19 سبتمبر 2021

بتاريخ 8 دقائق مضت قال سامح أشرف:
في رسالة الخطأ يظهر اسم الحزمة أو الملف الذي لم يتم العصور عليه، كما في الصورة:

لاحظ أن الحزم styled-components و react-slick و slick-carousel كلها غير مثبته ويمكنك تثبيتها من خلال الأمر التالي:
npm install styled-components react-slick slick-carousel
أيضًا إن كان مشروع React يعمل بالفعل، وتريد ربطه بـ Laravel فيمكنك معرفة الحزم المستخدمة في مشروع React من خلال الملف package.json (الخاص بمشروع React نفسه وليس مشروع Laravel).

شكرا جزيلا على المساعدة . اين المشكلة الان

سامح أشرف · 19 سبتمبر 2021

بتاريخ 3 دقائق مضت قال Mohamed Alzurfi:

شكرا جزيلا على المساعدة . اين المشكلة الان

لاحظ أن العنصر #root غير موجود في الملف welcome.blade.php ويوجد بدلًا منه العنصر #app، لذلك يجب تغير ال id من app إلى root في الملف welcome.blade.php

Mohamed Alzurfi · 19 سبتمبر 2021

بتاريخ 14 دقائق مضت قال سامح أشرف:

لاحظ أن العنصر #root غير موجود في الملف welcome.blade.php ويوجد بدلًا منه العنصر #app، لذلك يجب تغير ال id من app إلى root في الملف welcome.blade.php

<div id = "root"></div>

لقد قمت بتغير #الى روت ونفس المشكلة الشاشة بيضاء

سامح أشرف · 19 سبتمبر 2021

بتاريخ 58 دقائق مضت قال Mohamed Alzurfi:
<div id = "root"></div>
لقد قمت بتغير #الى روت ونفس المشكلة الشاشة بيضاء

هناك عدة أسباب لحدوث هذا الأمر:

هل يحتوي المكون Home على محتوى ليتم عرضه؟ أيضًا يجب التأكد من حفظ كل الملفات.

هل تظهر لك أخطاء في ال console في المتصفح؟

الأمر الأخير هو أنه يجب تنفيذ الأمر npm run dev بعد كل تغير في ملفات js و css.

Mohamed Alzurfi · 19 سبتمبر 2021

بتاريخ 31 دقائق مضت قال سامح أشرف:

هناك عدة أسباب لحدوث هذا الأمر:

هل يحتوي المكون Home على محتوى ليتم عرضه؟ أيضًا يجب التأكد من حفظ كل الملفات.

هل تظهر لك أخطاء في ال console في المتصفح؟

الأمر الأخير هو أنه يجب تنفيذ الأمر npm run dev بعد كل تغير في ملفات js و css.

نعم home تحتوي على ملفات يتم عرضها . اما بخصوص console توجد صورة ام بخصوص الامر npm run dev نعم انا اقوم بتنفيذه بعد كل امر

سامح أشرف · 19 سبتمبر 2021

بتاريخ 59 دقائق مضت قال Mohamed Alzurfi:

نعم home تحتوي على ملفات يتم عرضها . اما بخصوص console توجد صورة ام بخصوص الامر npm run dev نعم انا اقوم بتنفيذه بعد كل امر

هل بإمكانك أن ترفق ملف Home فقط، للتأكد من خلوه من الأخطاء؟

أيضًا فد يكون هناك مشكلة في متصفح الويب الخاص بك بسبب الملفات المؤقتة، لذلك أرجو منك أن تقوم بتجربة المشروع في متصفح آخر أو حذف اللمفات المؤقتة من المتصفح.

Mohamed Alzurfi · 23 سبتمبر 2021

بتاريخ On 9/19/2021 at 22:39 قال سامح أشرف:

هل بإمكانك أن ترفق ملف Home فقط، للتأكد من خلوه من الأخطاء؟

أيضًا فد يكون هناك مشكلة في متصفح الويب الخاص بك بسبب الملفات المؤقتة، لذلك أرجو منك أن تقوم بتجربة المشروع في متصفح آخر أو حذف اللمفات المؤقتة من المتصفح.

لقد قمت بتجربة متصفح اخر واضفت كل المكتبات المصطلوبة هذا هو ملف ريكت هل يمكن تجربته مصمم الفرونت اند يرسل لي انه يعمل عنده ولم اجد الحل لماذا لا يعمل ارجوا المساعدة

yourMaWebsite-new-components.zip

سامح أشرف · 24 سبتمبر 2021

بتاريخ 2 ساعات قال Mohamed Alzurfi:

لقد قمت بتجربة متصفح اخر واضفت كل المكتبات المصطلوبة هذا هو ملف ريكت هل يمكن تجربته مصمم الفرونت اند يرسل لي انه يعمل عنده ولم اجد الحل لماذا لا يعمل ارجوا المساعدة

يبدو أن المشروع يعمل بالفعل بشكل سليم، وهو مُجهز ليتم تشغيله من خلال Laravel ، يمكنك تشغيل المشروع من خلال Laravel عبر الخطوات التالية:

تشغيل الأمر التالي في مشروع React:
```
npm run build
```
بعد تنفيذ الأمر السابق والإنتهاء منه ستجد أن هناك مجلد جديد ظهر في المشروع باسم build، قم بنسخ كل محتوياته (ماعدا index.html) إلى المجلد public في مشروع Laravel (لا تنسخ المجلد build نفسه بل الملفات والمجلدات التي بداخله فقط)
الآن متبقي في المجلد build الملف index.html فقط، قم بنسخ كل محتوى هذا الملف إلى الملف resources\views\welcome.blade.php (يجب حذف محتويات الملف welcome.blade.php القديمة أولًا)
الآن تستطيع تشغيل المشروع من خلال الأمر التالي (نفذ الأمر في مشروع Laravel):
```
php artisan serve
```

ملاحظة: عند إجراء أي تعديل على مشروع React يجب إتباع نفس الخطوات مرة أخرى.

Mohamed Alzurfi · 24 سبتمبر 2021

بتاريخ 22 ساعات قال سامح أشرف:
يبدو أن المشروع يعمل بالفعل بشكل سليم، وهو مُجهز ليتم تشغيله من خلال Laravel ، يمكنك تشغيل المشروع من خلال Laravel عبر الخطوات التالية:
تشغيل الأمر التالي في مشروع React:
npm run build
بعد تنفيذ الأمر السابق والإنتهاء منه ستجد أن هناك مجلد جديد ظهر في المشروع باسم build، قم بنسخ كل محتوياته (ماعدا index.html) إلى المجلد public في مشروع Laravel (لا تنسخ المجلد build نفسه بل الملفات والمجلدات التي بداخله فقط)

الآن متبقي في المجلد build الملف index.html فقط، قم بنسخ كل محتوى هذا الملف إلى الملف resources\views\welcome.blade.php (يجب حذف محتويات الملف welcome.blade.php القديمة أولًا)
الآن تستطيع تشغيل المشروع من خلال الأمر التالي (نفذ الأمر في مشروع Laravel):
php artisan serve
ملاحظة: عند إجراء أي تعديل على مشروع React يجب إتباع نفس الخطوات مرة أخرى.

شكرا جزيلا لقد تم حل المشكلة بهذه الطريقة

ربط react مع laravel

السؤال

Mohamed Alzurfi

14 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

Mohamed Alzurfi

سامح أشرف

Mohamed Alzurfi

سامح أشرف

Mohamed Alzurfi

سامح أشرف

Mohamed Alzurfi

سامح أشرف

Mohamed Alzurfi

سامح أشرف

Mohamed Alzurfi

سامح أشرف

Mohamed Alzurfi

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية