تعلم React.js من الصفر - دليل شامل للمبتدئين

# تثبيت create-react-app عالمياً
npm install -g create-react-app

# إنشاء مشروع جديد
npx create-react-app my-first-app

# الدخول للمجلد
cd my-first-app

# تشغيل المشروع
npm start

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

my-first-app/
├── node_modules/     # المكتبات والحزم
├── public/           # ملفات ثابتة
│   ├── index.html   # صفحة HTML الرئيسية
│   └── favicon.ico
├── src/             # الكود المصدري
│   ├── App.js       # المكون الرئيسي
│   ├── index.js     # نقطة الدخول
│   ├── App.css      # تنسيقات
│   └── index.css
├── package.json     # معلومات المشروع
└── README.md

function Welcome() {
  return (
    <div>
      <h1>مرحباً بك في React!</h1>
      <p>هذا أول مكون لك</p>
    </div>
  );
}

export default Welcome;

function App() {
  const name = "أحمد";
  const age = 25;
  
  return (
    <div className="container">
      <h1>اسمي {name}</h1>
      <p>عمري {age} سنة</p>
      <p>بعد 5 سنوات سأكون {age + 5}</p>
    </div>
  );
}

// مكون الزر
function Button({ text, color }) {
  return (
    <button style={{ backgroundColor: color }}>
      {text}
    </button>
  );
}

// استخدام المكون
function App() {
  return (
    <div>
      <Button text="احفظ" color="blue" />
      <Button text="احذف" color="red" />
      <Button text="تعديل" color="green" />
    </div>
  );
}

import { useState } from 'react';

function Counter() {
  // تعريف state
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>العداد: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        زيادة
      </button>
      <button onClick={() => setCount(count - 1)}>
        نقصان
      </button>
      <button onClick={() => setCount(0)}>
        إعادة تعيين
      </button>
    </div>
  );
}

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  
  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, input]);
      setInput('');
    }
  };
  
  const deleteTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };
  
  return (
    <div>
      <h1>قائمة المهام</h1>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="أضف مهمة جديدة"
      />
      <button onClick={addTodo}>إضافة</button>
      
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => deleteTodo(index)}>
              حذف
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // يتم تنفيذه عند تحميل المكون
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []); // [] تعني تنفيذ مرة واحدة فقط
  
  if (loading) return <p>جاري التحميل...</p>;
  
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

import { createContext, useContext } from 'react';

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: "أحمد", role: "مطور" }}>
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);
  return <h1>مرحباً {user.name}</h1>;
}

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">الرئيسية</Link>
        <Link to="/about">من نحن</Link>
        <Link to="/contact">اتصل بنا</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

import { useState } from 'react';

function WeatherApp() {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);
  
  const API_KEY = 'your_api_key';
  
  const getWeather = async () => {
    setLoading(true);
    try {
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ar`
      );
      const data = await response.json();
      setWeather(data);
    } catch (error) {
      console.error('خطأ في جلب البيانات:', error);
    }
    setLoading(false);
  };
  
  return (
    <div className="weather-app">
      <h1>تطبيق الطقس</h1>
      
      <div className="search">
        <input
          type="text"
          value={city}
          onChange={(e) => setCity(e.target.value)}
          placeholder="أدخل اسم المدينة"
        />
        <button onClick={getWeather}>بحث</button>
      </div>
      
      {loading && <p>جاري التحميل...</p>}
      
      {weather && (
        <div className="weather-info">
          <h2>{weather.name}</h2>
          <p>درجة الحرارة: {weather.main.temp}°C</p>
          <p>الوصف: {weather.weather[0].description}</p>
          <p>الرطوبة: {weather.main.humidity}%</p>
        </div>
      )}
    </div>
  );
}