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