كيف أبرمج تطبيق React أونلاين

بقلم فريق كيف؟

آخر تحديث: 24 أكتوبر 2026 · سياسة التحرير

مشروع React في المتصفح يغيّر جملة ظاهرة في المعاينة

مثال: عنوان ترحيب يتغير حين تضغط زرًا

تريد أن ترى نصًا عربيًا في المعاينة، وزرًا يبدله إلى جملة ثانية. هذا يكفي لفهم أن الواجهة تتبع حالة، من غير خادم ومن غير قاعدة.

1. اكتب الجملتين والاسم الذي سيظهر على الزر في مفكرة قبل فتح الموقع. التجربة التي تبدأ من نص أجنبي جاهز لا تثبت أنك فهمت المكان.
2. ادخل من زر الصفحة وتأكد من نطاق CodeSandbox. أنشئ مشروعًا من قالب React إن كان معروضًا بهذا الاسم، وانتظر حتى تظهر المعاينة بجانب الملفات.
3. ابحث في الملف الظاهر عن النص الإنجليزي الجاهز واستبدله بجملتك الأولى. احفظ وانتظر المعاينة. إن لم تتغير فأنت تعدّل ملفًا غير الذي تقرأه المعاينة.
4. أضف حالة بسيطة للزر كما تشرحها وثائق React التي تثق بها، لا بنسخ كتلة لا تعرف ماذا تخزن. الهدف جملة ثانية تظهر بعد الضغط.
5. انظر إلى المعاينة على عرض ضيق. إن خرج النص العربي عن الصندوق فقصّر الجملة أو اسمح للسطر بالالتفاف قبل أن تضيف مكتبات.
6. إن كان المشروع عامًا فلا تضع مفتاح واجهة أو عنوان بريد تجريبي حقيقي في الكود. استخدم نصًا وهميًا واضحًا أنه مثال.

حين يعمل الزر توقف عن إضافة صفحات. انسخ المشروع إلى مكان تعرفه إن أردت الاحتفاظ به، فالحساب السحابي ليس النسخة الوحيدة التي تعتمد عليها.

المعاينة ليست منتجًا منشورًا

لا تبنِ على سر داخل مثال

بيئة متصفح أخرى أو مرجع

• كيف أبني تطبيق سحابي بسرعة

  بطاقة StackBlitz لبيئة متصفح أخرى لمشروع ويب. جرّبها إن تعطل القالب عندك، وبالهدف نفسه: جملة وزر لا تطبيق كامل.

• كيف أكتب كود أونلاين

  بطاقة Replit حين تريد تشغيل لغة أو مشروعًا من غير قالب React تحديدًا. لا تنقل السر إلى هناك أيضًا.

• كيف أجرب كود HTML و CSS

  بطاقة CodePen لتجربة HTML وCSS قصيرة في المتصفح. أخف من مشروع React إن كان هدفك لونًا ونصًا لا حالة زر.

• تعلم البرمجة بمشروع صفحة واحدة
• قسم البرمجة