دليل عملي: إنشاء تطبيق ويب تفاعلي باستخدام React خطوة بخطوة

قم بزيارة موقع Node.js الرسمي وتحميل أحدث إصدار LTS. بعد التثبيت، افتح سطر الأوامر وتحقق من التثبيت بكتابة npm --version و node --version للتأكد من أن كلا البرنامجين مثبتان بشكل صحيح.

استخدم أداة Create React App بكتابة الأمر: npx create-react-app my-app في سطر الأوامر. اترك الأداة تكمل عملية التثبيت والإعداد التلقائي، والذي قد يستغرق عدة دقائق. بعد الانتهاء، انتقل إلى مجلد المشروع بكتابة cd my-app.

استكشف مجلدات المشروع: مجلد src يحتوي على كود React الرئيسي، مجلد public يحتوي على ملف index.html. افتح ملف App.js وهو يحتوي على المكون الرئيسي. لاحظ أن كل مكون هو دالة تعيد JSX (تمزيج HTML مع JavaScript).

اكتب الأمر npm start في سطر الأوامر من مجلد المشروع. سيفتح المتصفح تلقائياً على http://localhost:3000 ويعرض تطبيقك. أي تغيير تجريه على الملفات سيظهر فوراً في المتصفح بدون الحاجة لإعادة تشغيل اليدوي.

أنشئ ملف جديد باسم Button.js في مجلد src. اكتب مكون بسيط يعرض زر: function Button() { return <button>اضغط هنا</button>; }. ثم استوردها في App.js واستخدمها بكتابة <Button />.

استورد useState من React: import { useState } from 'react';. أنشئ حالة لعداد بكتابة const [count, setCount] = useState(0);. أضف زراً يزيد العداد عند الضغط عليه، مثل: <button onClick={() => setCount(count + 1)}>العداد: {count}</button>.

أنشئ ملف App.css وأضف تنسيقات جميلة لمكوناتك. استورد الملف في App.js بكتابة import './App.css';. استخدم className بدلاً من class لإضافة فئات CSS إلى العناصر. جرب ألواناً وخطوطاً وتخطيطات مختلفة.

اكتب الأمر npm run build لإنشاء نسخة مُحسَّنة وجاهزة للنشر من تطبيقك. سيتم إنشاء مجلد build يحتوي على جميع الملفات المضغوطة والمُحسَّنة. هذه النسخة أصغر حجماً وأسرع من نسخة التطوير.

استخدم منصات مجانية مثل Vercel أو Netlify. قم بربط مستودع GitHub الخاص بك بالمنصة، وستقوم بنشر التطبيق تلقائياً. بدلاً من ذلك، يمكنك رفع مجلد build إلى أي استضافة ويب تدعم المواقع الثابتة.