البدء: تحسين تطبيق React

هل تريد أن تجعل موقع React الإلكتروني سريعًا وسهل الوصول إليه قدر الإمكان؟ لقد وصلت إلى المكان الصحيح!

حسين جردية

React هي مكتبة مفتوحة المصدر تسهِّل عملية إنشاء واجهات المستخدم. سيتناول هذا المسار التعليمي واجهات برمجة التطبيقات والأدوات المختلفة داخل المنظومة المتكاملة التي يجب أن تفكر في استخدامها لتحسين أداء تطبيقك وسهولة استخدامه.

يشرح لك هذا الدليل كيفية إعداد تطبيق React واستخدامه. سيتناول كل دليل آخر في هذا القسم مواضيع لتحسين سرعة تطبيق React وإمكانية الوصول إليه.

لماذا يُعدّ هذا الردّ مفيدًا؟

هناك الكثير من المحتوى الذي يشرح كيفية إنشاء تطبيقات سريعة وموثوقة، ولكنّه لا يعرض كيفية إنشاء تطبيقات React سريعة وموثوقة. تتناول هذه الأدلّة كل هذا من منظور أحد تطبيقات React حيث يتم ذكر المكتبات وواجهات برمجة التطبيقات والميزات الخاصة بالمنظومة المتكاملة React فقط.

ما الذي ستتعلمه؟

لا تركّز البرامج التعليمية الواردة في هذا المسار التعليمي على ما يلي:

  • كيفية استخدام React
  • التعرّف على تفاصيل التفاعل

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

إنشاء تطبيق React

إنّ إنشاء تطبيق React (CRA) هو أسهل طريقة للبدء في إنشاء تطبيقات React. كما أنه يوفر إعدادًا افتراضيًا مع عدد من الميزات الأساسية مسبقًا، بما في ذلك نظام تصميم يحتوي على أداة حزم الوحدات (حزمة الويب) وجهاز تحويل الصوت إلى نص (Babel).

في واجهة سطر الأوامر، تحتاج فقط إلى تشغيل ما يلي لإنشاء تطبيق جديد:

npx create-react-app app-name

بعد انتهاء تنفيذ الأمر، يمكنك الانتقال إلى التطبيق وتشغيله باستخدام الأوامر التالية:

cd new-app
npm start

يعرض التضمين التالي بنية الدليل وصفحة الويب الفعلية لتطبيق CRA الذي تم إنشاؤه حديثًا.

هناك ملفات إعداد متعدّدة وإنشاء نصوص برمجية يستخدمها CRA لإعداد حزمة ويب وعملية تصميم Babel التي تتضمّن إعداد Jest الأساسي للاختبار. لتسهيل الأمر على المستخدم، يتم إخفاء هذه الملفات ولا يمكن الوصول إليها حتى يتم إخراجها من CRA. ومن الأفضل دائمًا تجنُّب إخراج الملفات كلما أمكن ذلك، لأنّ ذلك يعني استخدام جميع ملفات الإعداد هذه كرمز مصدر خاص بك، ما قد يصعب إدارته.

تحتوي بنية الدليل لتطبيق CRA الجديد فقط على الملفات التي تحتاج إلى تعديلها فعليًا للعمل على تطبيقك. تشرح مستندات CRA هذا الأمر بالتفصيل.

ما هي الخطوات التالية؟

الآن وبعد أن تعرفت على كيفية البدء في إنشاء تطبيق Create React (إنشاء تطبيق React)، تعرَّف على كيفية تحسين أداء تطبيقك وتسهيل إمكانية الوصول إليه من خلال جميع الأدلة الواردة في هذا المسار التعليمي: