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

ما هو React؟

React هو مكتبة JavaScript مفتوحة المصدر تم تطويرها وصيانتها بواسطة Meta (المعروفة سابقًا باسم Facebook) ومجتمعها، ومصممة خصيصًا لبناء واجهات المستخدم (UI). تعتمد React على فكرة بناء واجهة المستخدم بشكل مكوناتي، ما يمنح المطورين القدرة على إنشاء تطبيقات صفحة واحدة (SPA) أو طبقات الواجهة في تطبيقات ويب كبيرة ومعقدة بكفاءة وقابلية صيانة عالية. من أبرز مميزات React طريقة البرمجة التصريحية، وآلية التحديث الفعّالة بواسطة "DOM الافتراضي"، فضلاً عن منظومتها المجتمعية القوية والغنية بالمكتبات.

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

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

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

إعداد بيئة تطوير وتشغيل React باستخدام ServBay

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

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

قبل البدء، تأكد من:

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

إنشاء مشروع React

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

فتح الطرفية والتنقل إلى مجلد المواقع الجذرية
افتح تطبيق الطرفية. الدليل الافتراضي للمشاريع في ServBay هو /Applications/ServBay/www. انتقل إليه:
bash
```
cd /Applications/ServBay/www
```
1
إنشاء مشروع React جديد بواسطة Vite
نفذ الأمر التالي لإنشاء مشروع جديد باسم servbay-react-demo باستخدام قالب React:
bash
```
npx create-vite servbay-react-demo --template react
```
1
- npx هو أداة تنفيذ حزم npm تتيح لك تشغيل الأدوات مباشرة بدون تثبيت عالمي، ما يضمن استخدام آخر إصدار من create-vite.
- create-vite هو اسم أداة التأسيس الرسمية لمشاريع Vite.
- servbay-react-demo هو اسم مجلد المشروع.
- --template react يحدد استخدام قالب React لهيكلة المشروع.
أكمل خطوات الإنشاء حسب ما يظهر على الشاشة.
دخول مجلد المشروع وتثبيت الاعتماديات
انتقل إلى مجلد المشروع ثم ثبّت الاعتماديات:
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 (في حال اخترت قالب JavaScript) أو 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 لتمرير رقم المنفذ إلى Vite.
عند تشغيل الخادم، ستجد رابط الولوج (مثلاً http://localhost:8585) في مخرجات الطرفية. اترك نافذة الطرفية مفتوحة ولا توقف الخادم.
تهيئة وكيل عكسي عبر ServBay
من واجهة تطبيق ServBay، انتقل إلى قسم المواقع الإلكترونية. أنشئ موقعًا جديدًا بإعدادات:
- الاسم (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 تلقائيًا (موقعة بواسطة CA الخاص بـ ServBay)، ما يمكنك من التصفح بأمان عبر HTTPS. لمزيد عن SSL مع ServBay راجع دليل تأمين المواقع باستخدام SSL.
- الآن عند تعديلك وحفظك لأي ملف ضمن المشروع في محرر الكود، يجب مشاهدة التحديث التلقائي للصفحة في المتصفح (ميزة HMR).

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

عند انتهاء تطوير تطبيقك وتجهيزه للإطلاق، ستحتاج إلى توليد نسخة إنتاج مهيأة للأداء.

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

الخلاصة

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

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

ما هو React؟ ​

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

إعداد بيئة تطوير وتشغيل React باستخدام ServBay ​

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

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

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

الدخول في وضع التطوير ​

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

الخلاصة ​