عداد الحروف
جزء من قسم الأساسيات في رحلة React على Coddy. الدرس 30 من 42.
لأن النص عبارة عن حالة (state)، يمكنك حسابه مع كل إعادة تقديم (render). عدادات الطول بأسلوب التغريدات تتكون من سطر واحد:
<p>{message.length} characters</p>لا حاجة لحالة (state) إضافية: يتم اشتقاق message.length من حالة موجودة بالفعل، وأعادت حسابها تلقائيًا مع كل ضغطة مفتاح. قاعدة عامة: إذا كان بإمكانك حساب القيمة من حالة لديك بالفعل، فلا تخزنها في الحالة.
التحدي
سهلقم بإنشاء مربع سيرة ذاتية (bio) مع عداد طول مباشر.
- اجعل الـ input (
id="bio") محكومًا باستخدام حالةbio(ابدأ بقيمة فارغة). - تظهر الفقرة (
id="length") النصN charactersحيث N هو الطول الحالي للـ bio (محسوب، وليس مخزنًا).
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة