تعلم React من الصفر - البدء في بناء تطبيقات ويب تفاعلية

🚀 البدء في رحلة React: بناء أول تطبيق ويب تفاعلي

مرحباً بك في رحلة تعلم React! في هذا الدرس سنتعلم كيفية إعداد البيئة البرمجية اللازمة وإنشاء أول تطبيق React بسيط. React هي مكتبة JavaScript شهيرة لبناء واجهات المستخدم التفاعلية، تستخدمها شركات كبيرة مثل Facebook وNetflix وAirbnb.

📋 المتطلبات الأساسية

قبل البدء مع React، تحتاج إلى التأكد من توفر هذه الأدوات على جهازك:

• Node.js (الإصدار 14 أو أعلى)
• npm (يأتي مرفقاً مع Node.js)
• محرر نصوص مثل VS Code
• متصفح ويب حديث

💡 يمكنك التحقق من تثبيت Node.js بفتح Terminal/Command Prompt وكتابة:

node --version

⚡ إنشاء أول تطبيق React

أسهل طريقة لبدء مع React هي باستخدام Create React App، وهي أداة رسمية تنشئ بيئة تطوير جاهزة:

1. افتح Terminal/Command Prompt
2. نفذ الأمر التالي:

npx create-react-app my-first-app

3. انتظر حتى تنتهي عملية التثبيت (قد تستغرق بضع دقائق)

🎉 مبروك! لقد أنشأت أول تطبيق React بنجاح.

📁 فهم هيكل المشروع

بعد إنشاء التطبيق، سترى هيكلاً تنظيمياً كهذا:

my-first-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── ...

• src/: مجلد الكود المصدري
• public/: الملفات الثابتة مثل HTML
• node_modules/: المكتبات والتوابع المثبتة

🎯 تشغيل التطبيق لأول مرة

لتشغيل التطبيق المحلي:

1. انتقل لمجلد التطبيق:

cd my-first-app

2. ابدأ خادم التطوير:

npm start

3. افتح المتصفح على http://localhost:3000

سترى صفحة ترحيبية تدور فيها شعار React - هذا أول تطبيق يعمل! 🔥

📝 فهم الكود الأساسي

لنلقي نظرة على الملف src/App.js:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

export default App;

هذا هو مكون React الأساسي. لاحظ استخدام JSX الذي يسمح بكتابة HTML داخل JavaScript.

🔄 تعديل أول تطبيقك

جرب تعديل النص في App.js:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>أهلاً بك في React! 🎉</h1>
        <p>هذا أول تطبيق React لي</p>
      </header>
    </div>
  );
}

احفظ الملف وشاهد التغييرات تظهر تلقائياً في المتصفح دون الحاجة لإعادة التحميل! ⚡