كيفية استخدام الحلقة بشكل صحيح داخل JSX في React؟

مرحباً بالجميع! لقد بدأت للتو في تعلم React وواجهت مشكلة: أحتاج إلى عرض قائمة من العناصر على الصفحة باستخدام JSX. لدي مصفوفة بيانات، على سبيل المثال، قائمة مهام: ```javascript const tasks = ['شراء حليب', 'ممارسة التمارين', 'كتابة كود']; ``` أريد عرض كل مهمة كعنصر `

` منفصل داخل `

`. حاولت الكتابة بهذا الشكل: ```javascript function TaskList() { return (
{for (let i = 0; i < tasks.length; i++) {
• {tasks[i]}
}}
); } ``` لكن React يعطي خطأ: "SyntaxError: Unexpected token". قرأت أن JSX هو مجرد سكر نحوي لـ `React.createElement`، لكنني لا أفهم لماذا لا تعمل الحلقة. في JavaScript العادي، كنت سأكتب حلقة وأنشئ العناصر داخلها، لكن هنا كل شيء ينهار. أرجو إرشادي، كيف يمكن تنظيم الحلقة بشكل صحيح داخل JSX؟ هل أحتاج إلى استخدام دوال خاصة؟ ولماذا لا يعمل الكود الخاص بي؟ شكراً مسبقاً على المساعدة.