React هي واحدة من أكثر مكتبات JavaScript الأمامية شيوعًا. تستخدم العديد من الشركات React لتطوير واجهات المستخدم الخاصة بها وقد اكتسبت شهرة واسعة بين المطورين.
من السهل إنشاء برنامج بسيط باستخدام React ، مثل تطبيق العداد الأساسي هذا. سيساعدك البدء ببرنامج تعليمي مباشر على فهم بعض مفاهيم React الأساسية والمهمة.
ميزات تطبيق العداد
في هذا المشروع ، ستقوم بتطوير تطبيق عداد بالميزات التالية:
- زر زيادة العد: سيؤدي هذا إلى زيادة العد بواحد.
- زر تقليل العد: سيؤدي هذا إلى تقليل العد بواحد.
- زر إعادة الضبط: سيؤدي هذا إلى ضبط العد على صفر.
المفاهيم الأساسية للتفاعل
قبل المضي قدمًا ، تحتاج إلى فهم بعض هذه المفاهيم الأساسية في React التي ستستخدمها في هذا المشروع:
- عناصر: المكونات هي اللبنات الأساسية لتطبيقات React. تحتوي على كود مستقل وقابل لإعادة الاستخدام. باستخدام المكونات ، يمكنك تقسيم واجهة المستخدم إلى أجزاء منفصلة. يمكنك بعد ذلك إعادة استخدام هذه الأجزاء والعمل معها بشكل مستقل.
- ولاية: في React ، يمكنك استخدام كائن لتخزين البيانات التي تمثل حالة المكون. هذا يسمح للمكونات بإدارة وتحديث البيانات الخاصة بهم. تحدد حالة المكون كيفية عرضه وتصرفه.
- المكونات الوظيفية: المكون الوظيفي لـ React هو ببساطة دالة JavaScript تقبل الخاصيات كوسيطة وتعيد عنصر React (JSX).
- الدعائم: يمكنك استخدام props - اختصارًا لـ "Properties" - لتمرير البيانات من مكون رئيسي إلى مكون فرعي. تعتبر الدعائم جزءًا لا يتجزأ من React ويمكنك القيام بذلك استخدم الدعائم لإجراء عدة عمليات في React.
- خطاف: خطافات React هي وظائف مدمجة تتيح لك إدارة الحالة وميزات React الأخرى مثل طرق دورة الحياة داخل المكونات الوظيفية. يمكنهم أيضًا مساعدتك في كتابة تعليمات برمجية موجزة وواضحة. سترى قريبًا كيف يمكنك إدارة الحالة باستخدام ملف useState () خطاف.
الكود المستخدم في هذا المشروع متاح في ملف مستودع جيثب وهو مجاني لك لاستخدامه بموجب ترخيص MIT.
الخطوة الأولى: إعداد المشروع
افتح Terminal وقم بتشغيل الأمر التالي للبدء:
npx يخلقرد فعل التطبيق رد فعل مكافحة التطبيقهذا سوف إنشاء تطبيق تفاعل جديد، جاهز لبدء بناء مشروعك معه. سيتم إنشاء بنية نظام ملفات مع العديد من الملفات والمجلدات.
قم بتشغيل الأمر التالي في المحطة لبدء خادم التطوير:
npm يبدأيجب أن يفتح هذا الأمر علامة تبويب جديدة في متصفحك ، مشيرًا إلى http://localhost: 3000. سيتم تحديث جميع التغييرات التي ستجريها على المشروع تلقائيًا هنا.
الخطوة 2: إنشاء الهيكل العظمي لتطبيق العداد
افتح ال src / App.js ملف وحذف جميع التعليمات البرمجية الافتراضية الموجودة هناك. الآن ، قم بإنشاء هيكل عظمي للتطبيق باستخدام الكود التالي:
يستورد رد فعل ، {useState} من"تتفاعل";وظيفةبرنامج() {
مقدار ثابت [count، setCount] = useState (0);
يترك incrementCount = () => {
// للإضافة لاحقًا
};
يترك decrementCount = () => {
// للإضافة لاحقًا
};
يترك resetCount = () => {
// للإضافة لاحقًا
}يعود (
<شعبةاسم الطبقة="برنامج">
<ص>العدد: {count}ص>
<شعبةاسم الطبقة="أزرار">
شعبة>
شعبة>
);
}
يصدّرتقصير برنامج؛
يستورد البيان الأول ملف useState ربط من تتفاعل وحدة. استخدمه لإنشاء ملف عدد الدولة وتهيئته إلى 0. يمكنك تغيير قيمة ملف عدد باستخدام setCount وظيفة.
ستستخدم ملف incrementCount, تناقص العد، و resetCount يعمل لاحقًا لزيادة قيمة العداد وتقليلها وإعادة تعيينها.
قد تلاحظ استخدام الأقواس المتعرجة {} حول متغير العد في الترميز. يتيح هذا بشكل أساسي للمحلل اللغوي لـ JSX معرفة أنه يجب أن يتعامل مع المحتوى الموجود داخل هذه الأقواس على أنه JavaScript.
الخطوة 3: إضافة الوظيفة إلى تطبيق العداد
تحتاج إلى إنشاء ثلاثة أزرار لتنفيذ وظيفة تطبيق العداد: زر تقليل العد وزر زيادة العد وزر إعادة الضبط. أضف الكود التالي داخل ملف أزرار div:
<زرعنوان={"إنقاص"} فعل={decrementCount} />
<زرعنوان={"زيادة راتب"} فعل={incrementCount} />
<زرعنوان={"إعادة ضبط"} فعل={resetCount} />عند النقر فوق هذه الأزرار ، فإن ملف تناقص العد, incrementCount، و resetCount سيتم تشغيل الوظائف. لاحظ أنك تقوم بتمرير ملف عنوان و فعل الدعائم من الوالد برنامج مكون للطفل زر عنصر.
قم بتحديث هذه الوظائف في ملف App.js ملف مع الكود التالي:
يترك incrementCount = () => {
setCount (العد + 1) ؛
};يترك decrementCount = () => {
setCount (العد - 1) ؛
};
يترك resetCount = () => {
setCount (0) ؛
}
ال setCount ستعمل الوظيفة على تحديث حالة عدد.
لاحظ أنك لم تقم بإنشاء مكون Button حتى الآن. إنشاء ملف عناصر مجلد في src الدليل ثم قم بإنشاء ملف جديد باسم Button.js. من الممارسات الجيدة الاحتفاظ بجميع المكونات في نفس المجلد.
أضف التعليمات البرمجية التالية في ملف المكونات / Button.js ملف:
يستورد تتفاعل من"تتفاعل";وظيفةزر(الدعائم) {
يترك {action، title} = props؛
يعود<زرعند النقر={فعل}>{عنوان}زر>;
}
يصدّرتقصير زر؛
ال زر يتلقى المكون البيانات عبر الدعائم. تقوم الوظيفة بعد ذلك بإعادة هيكلة هذه العناصر في متغيرات منفصلة ، واستخدامها لملء الترميز الذي تعيده.
يعيد الرمز استخدام هذا المكون ثلاث مرات لإنشاء أزرار الزيادة والإنقاص وإعادة التعيين.
أخيرًا ، قم باستيراد مكون Button في الجزء العلوي من ملف App.js الصفحة باستخدام الكود التالي:
يستورد زر من"./components/Botton";هذه هي الطريقة التي ستبدو عليها الشفرة النهائية في ملف App.js ملف:
يستورد رد فعل ، {useState} من"تتفاعل";
يستورد زر من"./components/Button";وظيفةبرنامج() {
مقدار ثابت [count، setCount] = useState (0);يترك incrementCount = () => {
setCount (العد + 1) ؛
};يترك decrementCount = () => {
setCount (العد - 1) ؛
};يترك resetCount = () => {
setCount (0) ؛
}يعود (
<شعبةاسم الطبقة="برنامج">
<ص>العدد: {count}ص>
<شعبةاسم الطبقة="أزرار">
<زرعنوان={"إنقاص"} فعل={decrementCount} />
<زرعنوان={"زيادة راتب"} فعل={incrementCount} />
<زرعنوان={"إعادة ضبط"} فعل={resetCount} />
شعبة>
شعبة>
);
}
يصدّرتقصير برنامج؛
اتبع أفضل ممارسات التفاعل
يمكنك كتابة تعليمات برمجية React بطرق مختلفة ، ولكن من المهم تنظيمها بأكبر قدر ممكن من النقاء. سيضمن ذلك إمكانية صيانته بسهولة ويمكن أن يساعد في تحسين الأداء العام لتطبيقك.
يمكنك اتباع العديد من ممارسات React التي أوصى بها مجتمع React مثل تجنب التعليمات البرمجية المتكررة ، اختبارات كتابة لكل مكون من مكونات React ، باستخدام إتلاف العناصر للدعامات ، ثم التسمية التالية الاتفاقيات.