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

السؤال

نشر

كل الاستخدامات التي رأيتها حول react داءما ما تبين أن  واجهات المواقع المبنية ب react تطور وحدها وليست ملازمة ل خادم في مجلد واحد وكل دروس الاستظافات المتوفرة في الانترنت توضح فقط كيف يتم استظافة موقع react لوحده وسؤالي هو هل يمكن تطوير موقع بواجهة react  وخادم جنب الى جنب واستظافتهم في مكان واحد مع بعضهم ؟

Recommended Posts

  • 0
نشر

إن معظم الاستخدامات تبيّن فقط البرمجة من طرف React لأنه البرمجة الخلفية أو من (جهة الخادم) مختلفة تماماً عن React حتى ولو كانت بنفس لغة البرمجة مثل الجافاسكريبت في Node JS. ولكن بالإجابة على سؤالك بالطبع يمكنك وضع مجلّدين ضمن مشروعك الأول يحوي تطبيق React والثاني يحوي الملفات اللازمة لعمل الخادم بشكل منفصل واستضافتهم معاً وعندها سيقوم الخادم بتزويد الملفات الثابتة التابعة لتطبيق React وبعدها سيتم التنقل بين الصفحات عبر التطبيق React دون العودة إلى الخادم إلا عند الحاجة لجلب البيانات اللازمة أو المعالجة المطلوبة للطلبات، مثال:

// server/index.js
const path = require('path');
const express = require('express');

...

// سيقوم هنا الخادم بتزويدنا بالملفات الثابتة ضمن التطبيق والموجودة ضمن مجلد منفصل
app.use(express.static(path.resolve(__dirname, '../client/build')));

// وبنفس الوقت يتلفى الطلبات القادمة إليه لمعالجتها والتعامل مع قواعد البيانات
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// 404 وأيضاً هذه الإضافة مهمة لأنها ستعيد جميع الطلبات الغير موجودة ضمن الخادم ليقوم التطبيق بمعالجتها مثل صفحة
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

ولكن يجب عليك الانتباه لنوع الاستضافة أن تكون تدعم node js وكذلك عليك استخدام الطريقة المناسبة لتشغيل الملف الأساسي لعمل الخادم مثل pm2 وغيرها.

  • 0
نشر

يمكنك التطوير باستخدام React لتصميم الواجهة Frontend فقط ويمكن الحصول على المعلومات أو طلب بيانات من أي خادم Server عن طريق استخدام API بحيث تعمل طلب الى خادم معين للحصول على بيانات معينة وهذا الخادم يستجيب بالبيانات المطلوبة

اما من ناحية التطوير جنب الى جنب مع الخادم فانت تقوم بتطوير كل منهما بشكل منفصل ثم يمكنك وضعهما في مكان واحد واستضافتهما في مكان واحد لكن طريقة جمعهما في مكان واحد تختلف بإختلاف لغة الBackend

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...