هل تريد تسهيل الوصول إلى موقعك الإلكتروني في 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 لإعداد حزمة ويب وعملية تصميم Babel التي تتضمن إعداد Jest أساسي للاختبار. لتبسيط الأمور على المستخدم، يتم إخفاء هذه الملفات ولا يمكن الوصول إليها حتى تخرجها من CRA. ومن الأفضل دائمًا تجنب عمليات التنزيل كلما أمكن، لأن هذا يعني استخدام جميع ملفات الإعداد هذه كرمز مصدر خاص بك، الأمر الذي قد يصعب إدارته.
لا تحتوي بنية الدليل لتطبيق CRA الجديد إلا على الملفات التي ستحتاج فعلاً إلى تعديلها للعمل على التطبيق. تشرح مستندات CRA ذلك بالتفصيل.
ما هي الخطوات التالية؟
الآن بعد أن تعرفت على كيفية البدء بإنشاء تطبيق Create React، تعرَّف على كيفية تحسين أداء تطبيقك وتسهيل استخدامه من خلال الاطّلاع على جميع الأدلة المتوفرة في هذا المسار التعليمي:
- تقسيم الرمز باستخدام React.lazy وSuspense
- محاكاة القوائم الكبيرة باستخدام نافذة التفاعل
- الإعداد المسبق في Create React App باستخدام Workbox
- عرض المسارات مسبقًا باستخدام ميزة محاذاة التفاعلات
- إضافة بيان تطبيق ويب باستخدام Create React App
- تدقيق أدوات تسهيل الاستخدام باستخدام Interactive-axe وeslint-plugin-jsx-a11y