إنشاء وتشغيل مشروع React باستخدام ServBay

ما هو React؟

React هو مكتبة جافا سكريبت مفتوحة المصدر تُطوّر وتُدار من قبل Meta (المعروفة سابقاً بـ Facebook) ومجتمعها، ومخصصة لبناء واجهات المستخدم التفاعلية. يعتمد React على مبدأ تقسيم واجهة المستخدم إلى مكونات مستقلة قابلة لإعادة الاستخدام، مما يمكّن المطورين من إنشاء واجهات معقدة وقابلة للصيانة بسهولة، سواء كانت تطبيقات الويب ذات الصفحة الواحدة (SPA) أو تطبيقات ويب كبيرة.

من المميزات الأساسية لـ React: أسلوب البرمجة التصريحي، آلية التحديث الفعّالة للـDOM الافتراضي، ودعم المجتمع الهائل.

أهم ميزات وفوائد React

تطوير قائم على المكونات: تقسيم واجهة المستخدم إلى مكونات مستقلة؛ هذا يعزز إعادة استخدام الكود وسهولة الصيانة.
عرض تصريحي: فقط وصف حالة الواجهة، وReact يتولى تحديث الـDOM تلقائياً ليناسب الحالة، مما يبسط منطق تطوير الواجهة.
DOM افتراضي (Virtual DOM): الحفاظ على تمثيل افتراضي للـDOM في الذاكرة، وتقليل التغييرات المباشرة للـDOM الحقيقي لتحسين الأداء بشكل ملحوظ.
تدفق بيانات أحادي الاتجاه: تدفق البيانات من الأعلى للأسفل، ما يجعل تتبع وفهم تغيرات الحالة في التطبيق أكثر سهولة ووضوحاً.
JSX: امتداد للغة جافا سكريبت يُمكّن كتابة بنية شبيهة بـHTML داخل الشيفرة، مما يسهل قراءة الكود.
منظومة قوية: دعم مجتمعي هائل ومكتبات خارجية غنية (مثل React Router، Redux/Zustand/MobX، Material UI وغيرهم) لتغطية إدارة الحالة، التوجيه، ومكونات الواجهة.

باستخدام React، يمكن للمطورين بناء تطبيقات ويب حديثة وعالية الأداء بسرعة وكفاءة.

إعداد بيئة تطوير وإنتاج React باستخدام ServBay

ServBay هو بيئة تطوير ويب محلية قوية تقدم العديد من الحزم البرمجية لمستخدمي macOS وWindows، من ضمنها Node.js. في هذا الدليل، نشرح خطوة بخطوة كيفية استغلال بيئة Node.js في ServBay وميزة "المواقع الإلكترونية" (Websites) لإنشاء، إعداد وتشغيل مشروع React، بما يشمل إعداد البروكسي العكسي في وضع التطوير وخدمة الملفات الثابتة في وضع الإنتاج.

المتطلبات الأساسية

قبل البدء، تأكد من تنفيذ المتطلبات التالية:

تثبيت ServBay: يجب أن يكون ServBay مثبتاً ويعمل بنجاح على جهازك.
تثبيت حزمة Node.js: قم بتثبيت حزمة Node.js من خلال واجهة ServBay أو عبر سطر الأوامر. يمكنك الرجوع إلى دليل تثبيت Node.js عبر ServBay للحصول على خطوات مفصلة. ServBay يدير إصدار Node.js وبيئة التشغيل تلقائياً.

إنشاء مشروع React

سنستخدم أداة البناء الحديثة Vite لإنشاء مشروع React بسرعة وكفاءة. Vite يوفر سرعة تشغيل عالية وتحديث نمطي سريع (HMR)، ويُعتبر الخيار الرائد حالياً لإنشاء مشاريع React (بدلاً من أداة create-react-app التقليدية).

افتح الطرفية وانتقل إلى مجلد المواقع الإلكترونية
افتح تطبيق الطرفية. مجلد مواقع ServBay الافتراضي الموصى به هو:
macOS:
bash
```
cd /Applications/ServBay/www
```
1
Windows:
cmd
```
cd C:\ServBay\www
```
1
إنشاء مشروع React جديد باستخدام Vite
نفذ الأمر التالي لإنشاء مشروع جديد باسم servbay-react-demo واختَر قالب React:
bash
```
npx create-vite servbay-react-demo --template react
```
1
- npx مشغل حزم npm، يُتيح تنفيذ أدوات عبر سطر الأوامر مباشرة بدون تثبيتها عالمياً، ويضمن استخدام أحدث إصدار دائماً.
- create-vite هو أداة إنشاء المشاريع الرسمية الخاصة بـVite.
- servbay-react-demo اسم مجلد مشروعك.
- --template react تعني استخدام قالب React لإنشاء هيكل المشروع الأولي.
اتبع التعليمات الظاهرة لإكمال إنشاء المشروع.
ادخل إلى مجلد المشروع وثبت التبعيات
انتقل إلى مجلد المشروع الجديد وثبت جميع التبعيات المطلوبة باستخدام npm:
bash
```
cd servbay-react-demo
npm install
```
1
2
- يمكنك أيضاً استخدام yarn install أو pnpm install إذا كنت تفضل Yarn أو pnpm كمدير حزم.

تعديل محتوى مشروع React (اختياري)

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

افتح ملف src/App.jsx أو src/App.tsx
استخدم محرر الكود المفضل لديك وافتح الملف src/App.jsx (إذا اخترت قالب جافا سكريبت) أو الملف src/App.tsx (إذا اخترت قالب TypeScript).

تعديل المحتوى

عدّل الجزء المسؤول عن عرض المحتوى ليُظهر العبارة "Hello ServBay!":

javascript

// ... استيرادات أخرى ...
import './App.css';

function App() {
  // ... كود آخر ...
  return (
    <>
      {/* ... عناصر أخرى ... */}
      <h1>Hello ServBay!</h1>
      {/* ... عناصر أخرى ... */}
    </>
  );
}

export default App;

احفظ الملف.

بدء وضع التطوير

خلال مرحلة التطوير، غالباً ما يتم تشغيل خادم تطوير محلي يوفر ميزات مثل التحديث الفوري (HMR)، مما يجعل تجربة التطوير أفضل. يمكن لـServBay إعداد بروكسي عكسي لتحويل الطلبات الخارجية إلى هذا الخادم.

تشغيل خادم التطوير عبر الطرفية
من مجلد المشروع servbay-react-demo، نفذ الأمر التالي لتشغيل خادم Vite على منفذ خاص (مثلاً: 8585):
bash
```
npm run dev -- --port 8585
```
1
- npm run dev يشغّل سكريبت dev المٌعرف في package.json، وهو غالباً مخصص لتشغيل خادم Vite.
- -- --port 8585 يحدد المنفذ الذي سيعمل عليه الخادم.
بعد بدء الخادم، ستظهر في الطرفية عادةً عناوين محلية مثل http://localhost:8585. ابق نافذة الطرفية مفتوحة ولا تغلق الخادم.
إعداد بروكسي عكسي عبر ServBay
من واجهة ServBay، انتقل إلى قسم المواقع (Websites). اضغط زر الإضافة لإنشاء إعداد جديد:
- الاسم (Name): ServBay React Dev (اسم وصفي)
- النطاق (Domain): servbay-react-dev.servbay.demo (نطاق تجريبي مرتبط بعلامة ServBay)
- نوع الموقع (Site Type): اختر بروكسي عكسي (Reverse Proxy)
- IP البروكسي (Proxy IP): 127.0.0.1 (الخادم يعمل محلياً)
- منفذ البروكسي (Proxy Port): 8585 (نفس المنفذ المُحدد للخادم)
احفظ الإعدادات، وسيقوم ServBay تلقائياً بتكوين الخادم الداخلي (Caddy أو Nginx) لتحويل طلبات النطاق servbay-react-dev.servbay.demo إلى http://127.0.0.1:8585.
لمزيد من التفاصيل حول إضافة المواقع في ServBay، راجع دليل إدارة المواقع في ServBay.
زيارة موقع التطوير عبر المتصفح
افتح المتصفح وادخل النطاق الذي أنشأته: https://servbay-react-dev.servbay.demo.
- بفضل ServBay، تم إعداد شهادة SSL تلقائياً (موقعة من ServBay User CA أو ServBay Public CA)، لذا يمكنك زيارة الموقع محلياً عبر HTTPS بأمان. لمزيد من المعلومات حول SSL في ServBay، راجع استخدام SSL لتأمين موقعك.
- الآن، عند تعديل وحفظ ملفات المشروع في محرر الكود، يجب أن يتحدث الموقع تلقائياً في المتصفح، بفضل ميزة التحديث الفوري (HMR).

بناء نسخة الإنتاج

عندما يصبح مشروعك جاهزاً للنشر، تحتاج إلى إنتاج نسخة محسّنة يتم تقديمها كملفات ثابتة.

بناء مشروع الإنتاج عبر الطرفية
في مجلد المشروع servbay-react-demo، نفذ الأمر التالي لإجراء البناء:
bash
```
npm run build
```
1
هذا الأمر يشغّل سكريبت build في package.json. سيفوم Vite بتجميع وتحسين شيفرة المشروع وتحويلها إلى ملفات ثابتة (HTML، CSS، JavaScript، وموارد ساكنة) تذهب عادةً إلى مجلد dist في جذر المشروع. بعد اكتمال البناء، ستظهر رسالة نجاح في الطرفية.
إعداد خدمة الملفات الثابتة عبر ServBay
يحتوي مجلد dist على ملفات يمكن تقديمها مباشرة عبر الخادم. في ServBay، أنشئ إعداد موقع ثابت جديد:
انتقل إلى واجهة ServBay، إلى قسم المواقع (Websites). اضغط زر الإضافة لإنشاء إعداد جديد:
- الاسم (Name): ServBay React Prod (اسم وصفي)
- النطاق (Domain): servbay-react.servbay.demo (نطاق إنتاجي مميز)
- نوع الموقع (Site Type): اختر ثابت (Static)
- دليل الجذر للموقع (Website Root Directory): أشِر إلى مجلد dist الناتج بعد البناء:
  - macOS: /Applications/ServBay/www/servbay-react-demo/dist
  - Windows: C:\ServBay\www\servbay-react-demo\dist
احفظ الإعدادات، وسيقوم ServBay بتكوين الخادم لتقديم الملفات مباشرةً من مجلد dist.
زيارة موقع الإنتاج عبر المتصفح
افتح المتصفح وادخل النطاق الذي أنشأته: https://servbay-react.servbay.demo.
الآن تستعرض النسخة النهائية والمبنية من الموقع، مع توفير حماية SSL تلقائياً بفضل ServBay.

الخلاصة

عبر هذه الخطوات، أنشأت بنجاح مشروع React في بيئة ServBay المحلية، مع إعداد بروكسي عكسي لوضع التطوير وخدمة ملفات ثابتة لوضع الإنتاج. ServBay يبسط عملية بناء وإعداد بيئة التطوير المحلية، ويدعم macOS وWindows، خاصةً بفضل دعمه المدمج لـNode.js، إعدادات المواقع المرنة (بروكسي عكسي وملفات ثابتة)، وميزة SSL التلقائية التي تُسهّل حياة مطوري React بشكل كبير. يمكنك الآن مواصلة تطوير واختبار ونشر تطبيقات React الخاصة بك بسهولة وثقة.

إنشاء وتشغيل مشروع React باستخدام ServBay ​

ما هو React؟ ​

أهم ميزات وفوائد React ​

إعداد بيئة تطوير وإنتاج React باستخدام ServBay ​

المتطلبات الأساسية ​

إنشاء مشروع React ​

تعديل محتوى مشروع React (اختياري) ​

بدء وضع التطوير ​

بناء نسخة الإنتاج ​

الخلاصة ​