هل تريد جعل موقعك الإلكتروني المستند إلى React سريعًا وسهل الاستخدام قدر الإمكان؟ لقد وصلت إلى المكان المناسب.
React هي مكتبة مفتوحة المصدر تسهّل إنشاء واجهات المستخدم. سيتناول مسار التعلّم هذا واجهات برمجة التطبيقات والأدوات المختلفة ضمن المنظومة المتكاملة التي يجب أن تفكر في استخدامها لتحسين أداء تطبيقك وسهوله استخدامه.
سيوضّح لك هذا الدليل كيفية إعداد تطبيق React وتشغيله. سيتناول كل دليل آخر في هذا القسم مواضيع لتحسين سرعة تطبيق React أو سهولة استخدامه.
ما الفائدة من ذلك؟
يتوفّر الكثير من المحتوى الذي يشرح كيفية إنشاء التطبيقات السريعة والموثوقة، ولكن ليس هناك الكثير من المحتوى الذي يوضّح كيفية إنشاء تطبيقات React السريعة والموثوقة. تتناول هذه الأدلة كل هذه المواضيع من منظور تطبيق React الذي لا يُذكر فيه سوى المكتبات وواجهات برمجة التطبيقات والميزات الخاصة بالمنظومة المتكاملة لـ React.
ما الذي ستتعلمه؟
لا تركّز الأدلة التعليمية في مسار التعلّم هذا على ما يلي:
- كيفية استخدام React
- آلية عمل React
على الرغم من أنّه سيتم التطرق إلى هذين المفهومَين عند الحاجة، إلا أنّ جميع الأدلة ومختبرات رموز المصدر في هذا القسم ستركز بدلاً من ذلك على كيفية إنشاء مواقع React سريعة و سهلة الاستخدام. لهذا السبب، يجب أن تكون لديك معرفة أساسية بـ React.
Create React App
Create React App (CRA) هي أسهل طريقة للبدء في إنشاء تطبيقات React. يقدّم هذا الإطار إعدادًا default مزوّدًا بعدد من الميزات الأساسية المضمّنة، بما في ذلك نظام إنشاء يحتوي على أداة تجميع وحدات (webpack) وأداة تحويل (Babel).
في بيئة سطر الأوامر، ما عليك سوى تنفيذ ما يلي لإنشاء تطبيق جديد:
npx create-react-app app-name
بعد انتهاء تنفيذ الأمر، يمكنك الانتقال إلى التطبيق وتشغيله باستخدام الأوامر التالية:
cd new-app
npm start
يعرض الرمز المضمّن التالي بنية الدليل وصفحة الويب الفعلية لتطبيق CRA تم إعداده للتو.
هناك عدة ملفات إعداد ونصوص برمجية لإنشاء يستخدمها CRA لإعداد عملية إنشاء webpack وBabel التي تتضمّن إعداد Jest الأساسي للاختبار. لتسهيل الأمر على العميل، يتم إخفاء هذه الملفات ولا يمكن الوصول إليها إلا بعد إزالة الجهاز من جهاز CRA. من الأفضل دائمًا تجنُّب إخراج الجهاز متى أمكن، لأنّ ذلك يعني الاحتفاظ بكل ملفات الإعداد هذه كرمز المصدر الخاص بك، ما قد يصبح من الصعب إدارته.
لا يحتوي تنسيق دليل تطبيق CRA الجديد إلا على الملفات التي ستحتاج إلى تعديلها فعليًا من أجل العمل على تطبيقك. تشرح مستندات CRA هذا بالتفصيل.
ما هي الخطوات التالية؟
بعد أن تعرّفت على كيفية بدء إنشاء تطبيق باستخدام Create React App، تعرَّف على كيفية تحسين أداء تطبيقك وإمكانية وصوله إلى جميع الأدلة في مسار التعلّم هذا: