عداد الحروف
جزء من قسم الأساسيات في رحلة 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: تبديل المتابعة