هل تريد تسهيل الوصول إلى موقعك الإلكتروني في React بقدر الإمكان؟ لقد وصلت إلى المكان المناسب.
React هي مكتبة مفتوحة المصدر تتيح إنشاء واجهات مستخدم للإنشاء كثيرًا. سيغطي هذا المسار التعليمي واجهات برمجة التطبيقات والأدوات المختلفة ضمن والتكامل الذي ينبغي أن تفكر في استخدامه لتحسين الأداء سهولة استخدام تطبيقك.
يشرح لك هذا الدليل كيفية بدء استخدام تطبيق React. سيغطي كل دليل آخر في هذا القسم موضوعات لتحسين السرعة أو إمكانية الوصول إلى تطبيق React.
لماذا يُعدّ ذلك مفيدًا؟
هناك الكثير من المحتوى الذي يشرح كيفية إنشاء محتوى سريع وموثوق به وليس الكثير منها الذي يعرض كيفية إنشاء نموذج React سريع وموثوق. التطبيقات. تتناول هذه الأدلّة كل هذا من منظور التفاعلات تطبيق لا يستخدم فيه سوى المكتبات وواجهات برمجة التطبيقات والميزات الخاصة يذكرون النظام الشامل React.
ماذا ستتعلم؟
لا تركِّز البرامج التعليمية في هذا المسار التعليمي على ما يلي:
- كيفية استخدام React
- الميزات المتقدّمة في React
وعلى الرغم من أنه سيتم التطرق إلى هذين المفهومين عند الحاجة، فإن جميع الأدلة وستركز دروس الترميز في هذا القسم بدلاً من ذلك على كيفية إنشاء نماذج مواقع React التي يمكن الوصول إليها. لهذا السبب، فإن الإلمام بأساسيات React هو مطلوبة.
إنشاء تطبيق React
إنّ إنشاء تطبيق React (CRA) هو أسهل طريقة للبدء في إنشاء تطبيقات React. إنه يوفر واجهة يتضمن العديد من الميزات الأساسية المدمجة، بما في ذلك نظام التصميم يحتوي على أداة تجميع وحدات (Webpack) وأداة ترجمة (Babel).
في واجهة سطر الأوامر، ما عليك سوى تشغيل ما يلي لإنشاء واجهة app:
npx create-react-app app-name
بعد انتهاء تنفيذ الأمر، يمكنك الانتقال إلى التطبيق وتشغيله باستخدام الأوامر التالية:
cd new-app
npm start
يوضح التضمين التالي بنية الدليل وصفحة الويب الفعلية لنطاق جديد برنامج Bootstrapped 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