إنشاء وتشغيل مشروع React

ما هو React؟

React هي مكتبة JavaScript مفتوحة المصدر تُستخدم لبناء واجهات المستخدم، ومن تطوير وصيانة Facebook. تركز React على بناء طبقة العرض وتتيح للمطورين بناء واجهات مستخدم معقدة بكفاءة بفضل نهجها القائم على المكونات. الفكرة الأساسية في React هي المكونات وتدفق البيانات أحادي الاتجاه، مما يجعل الكود أسهل في الفهم والصيانة.

الميزات والفوائد الرئيسية لـ React

• التكوين المكوني: بناء واجهة المستخدم عن طريق المكونات يجعل الكود أكثر تنظيمًا وقابلية لإعادة الاستخدام.
• DOM الافتراضي: يستخدم React DOM الافتراضي لتحسين الأداء، حيث يتم تحديث DOM الفعلي فقط عند الضرورة.
• تدفق البيانات أحادي الاتجاه: تتدفق البيانات بشكل أحادي بين المكونات، مما يجعل إدارة حالة التطبيق أكثر وضوحًا وتوقعًا.
• مجتمع وإيكوسيسيستم قوي: يمتلك React مجتمعًا ضخمًا ودعمًا غنيًا من المكتبات الخارجية، مما يجعل التطوير أكثر ملاءمة.

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

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

في هذه المقالة، سنستخدم بيئة Node.js المقدمة من ServBay لإنشاء وتشغيل مشروع React. سنستخدم ميزة 'المضيف' في ServBay لإعداد خادم الويب، والوصول إلى المشروع عبر الخدمة المتقدمة للوكيل العكسي وخدمة الملفات الثابتة.

إنشاء مشروع React

1. تهيئة المشروع

   أولاً، تأكد من أنك قد قمت بتثبيت بيئة Node.js المقدمة من ServBay. ثم، استخدم الأمر التالي لتهيئة مشروع React جديد:

   cd /Applications/ServBay/www
   npx create-react-app servbay-react-app

2. تثبيت التبعيات

   قم بالدخول إلى دليل المشروع وقم بتثبيت التبعيات:

   cd servbay-react-app
   npm install

تعديل محتوى مشروع React

1. تعديل ملف src/App.js

   افتح ملف src/App.js وقم بتعديل المحتوى لكي يعرض صفحة ويب تظهر رسالة "Hello ServBay!":

   import React from 'react';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <h1>Hello ServBay!</h1>
         </header>
       </div>
     );
   }
   
   export default App;

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

1. تشغيل خادم التطوير

   قم بتشغيل خادم التطوير وحدد منفذ (مثال: 8585):

   npm start -- --port 8585

   سيؤدي هذا إلى تشغيل خادم تطوير محلي وفتح المنفذ 8585.

2. تكوين الوكيل العكسي لمضيف ServBay

   باستخدام ميزة 'المضيف' في ServBay، يمكن الوصول إلى خادم التطوير عبر الوكيل العكسي. في إعدادات 'المضيف' لـ ServBay، أضف وكيل عكسي جديد:

   • الاسم: My first React dev site
   • اسم النطاق: servbay-react-test.dev
   • نوع المضيف: وكيل عكسي
   • IP: 127.0.0.1
   • المنفذ: 8585

   لمزيد من التعليمات المفصلة، راجع كيفية إضافة موقع تطوير باستخدام Nodejs.

3. الوصول إلى وضع التطوير

   افتح المتصفح وزر الموقع https://servbay-react-test.dev لمشاهدة المشروع في الوقت الحقيقي. نظرًا لأن ServBay يدعم أسماء النطاقات المخصصة وشهادات SSL المجانية، ستحصل على أمان أعلى.

إنشاء إصدار الإنتاج

1. بناء إصدار الإنتاج

   بعد الانتهاء من التطوير، استخدم الأمر التالي لبناء إصدار الإنتاج:

   npm run build

   بعد البناء، ستكون الملفات الثابتة في الدليل build.

2. إعداد خدمة الملفات الثابتة

   باستخدام ميزة 'المضيف' في ServBay، يمكن الوصول إلى إصدار الإنتاج عبر خدمة الملفات الثابتة. في إعدادات 'المضيف' لـ ServBay، أضف موقع ثابت جديد:

   • الاسم: My first React production site
   • اسم النطاق: servbay-react-test.prod
   • نوع المضيف: ثابت
   • دليل جذر الموقع: /Applications/ServBay/www/servbay-react-app/build

3. الوصول إلى وضع الإنتاج

   افتح المتصفح وزر الموقع https://servbay-react-test.prod لمشاهدة إصدار الإنتاج. من خلال أسماء النطاقات المخصصة وشهادات SSL المجانية في ServBay، سيكون موقع الويب لديك أكثر أمانًا وموثوقًا.

باتباع هذه الخطوات، ستتمكن من إنشاء وتشغيل مشروع React وإدارة والوصول إلى مشروعك باستخدام ميزات ServBay.