React.js: الدليل الشامل لبناء واجهات المستخدم الحديثة وتطبيقات تفاعلية من الصفر في 2026

ما هو React.js؟

React.js هو مكتبة JavaScript مفتوحة المصدر طورتها Facebook عام 2013 لبناء واجهات المستخدم التفاعلية. يعتمد على مفهوم المكونات (Components) التي يمكن إعادة استخدامها.

إعداد بيئة التطوير

🛠️ الأدوات المطلوبة

🚀 إنشاء مشروع React

# الطريقة 1: Vite (الموصى بها - أسرع)
npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

# الطريقة 2: Create React App (كلاسيكية)
npx create-react-app my-react-app
cd my-react-app
npm start

# فتح المتصفح
http://localhost:5173

المفاهيم الأساسية في React

🧩 Components: المكونات

المكونات هي اللبنة الأساسية في React. كل جزء من الواجهة هو مكون مستقل.

// Functional Component (الأحدث والموصى به)
function Welcome({ name }) {
    return <h1>مرحباً، {name}!</h1>;
}

// Arrow Function Component
const Button = ({ text, onClick }) => {
    return (
        <button onClick={onClick} className="btn">
            {text}
        </button>
    );
};

// استخدام المكونات
function App() {
    return (
        <div>
            <Welcome name="أحمد" />
            <Button text="اضغط هنا" onClick={() => alert("تم!")} />
        </div>
    );
}

📝 JSX: JavaScript XML

JSX يسمح لك بكتابة HTML داخل JavaScript. هو امتداد لصيغة JavaScript.

// JSX Basics
function Card() {
    const title = "عنوان البطاقة";
    const isActive = true;
    
    return (
        <div className="card">
            {/* Expression */}
            <h2>{title}</h2>
            
            {/* Conditional Rendering */}
            {isActive && <p>نشط</p>}
            
            {/* Ternary Operator */}
            {isActive ? <span>نشط</span> : <span>غير نشط</span>}
            
            {/* List Rendering */}
            <ul>
                {["عنصر 1", "عنصر 2", "عنصر 3"].map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

📦 Props: الخصائص

Props هي بيانات تمررها من مكون أب إلى مكون ابن. هي للقراءة فقط (immutable).

// Parent Component
function App() {
    return (
        <div>
            <UserCard 
                name="أحمد" 
                age={25} 
                isStudent={true}
                hobbies={["القراءة", "البرمجة"]}
            />
        </div>
    );
}

// Child Component
function UserCard({ name, age, isStudent, hobbies }) {
    return (
        <div className="user-card">
            <h2>{name}</h2>
            <p>العمر: {age}</p>
            <p>{isStudent ? "طالب" : "ليس طالباً"}</p>
            <ul>
                {hobbies.map((hobby, i) => (
                    <li key={i}>{hobby}</li>
                ))}
            </ul>
        </div>
    );
}

// Default Props
UserCard.defaultProps = {
    age: 18,
    isStudent: false
};

// PropTypes (Type Checking)
import PropTypes from 'prop-types';

UserCard.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    isStudent: PropTypes.bool,
    hobbies: PropTypes.arrayOf(PropTypes.string)
};

Hooks: الحالة والتأثيرات

🔄 useState: إدارة الحالة

useState يسمح لك بإضافة حالة (state) للمكونات الوظيفية.

import { useState } from 'react';

function Counter() {
    // Basic useState
    const [count, setCount] = useState(0);
    
    // Object state
    const [user, setUser] = useState({
        name: "أحمد",
        age: 25
    });
    
    // Array state
    const [items, setItems] = useState([]);
    
    return (
        <div>
            <p>العداد: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                زيادة
            </button>
            <button onClick={() => setCount(count - 1)}>
                نقصان
            </button>
            <button onClick={() => setCount(0)}>
                إعادة تعيين
            </button>
            
            <hr />
            
            <p>الاسم: {user.name}</p>
            <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
                زيادة العمر
            </button>
        </div>
    );
}

function TodoList() {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState("");
    
    const addTodo = () => {
        if (input.trim()) {
            setTodos([...todos, { id: Date.now(), text: input, done: false }]);
            setInput("");
        }
    };
    
    const toggleTodo = (id) => {
        setTodos(todos.map(todo => 
            todo.id === id ? { ...todo, done: !todo.done } : todo
        ));
    };
    
    const deleteTodo = (id) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };
    
    return (
        <div>
            <input 
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="أضف مهمة جديدة"
            />
            <button onClick={addTodo}>إضافة</button>
            
            <ul>
                {todos.map(todo => (
                    <li key={todo.id} style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
                        {todo.text}
                        <button onClick={() => toggleTodo(todo.id)}>✓</button>
                        <button onClick={() => deleteTodo(todo.id)}>✗</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

⚡ useEffect: التأثيرات الجانبية

useEffect يسمح لك بتنفيذ كود بعد render المكون (API calls, subscriptions, DOM manipulation).

import { useState, useEffect } from 'react';

function DataFetcher() {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    
    // Fetch data on component mount
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.example.com/data');
                if (!response.ok) throw new Error('Failed to fetch');
                const result = await response.json();
                setData(result);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };
        
        fetchData();
    }, []); // Empty array = run once on mount
    
    if (loading) return <p>جاري التحميل...</p>;
    if (error) return <p>خطأ: {error}</p>;
    
    return (
        <ul>
            {data.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
}

// Effect with cleanup
function Timer() {
    const [seconds, setSeconds] = useState(0);
    
    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(s => s + 1);
        }, 1000);
        
        // Cleanup function
        return () => clearInterval(interval);
    }, []);
    
    return <p>الوقت: {seconds} ثانية</p>;
}

// Effect with dependency
function SearchComponent() {
    const [query, setQuery] = useState("");
    const [results, setResults] = useState([]);
    
    useEffect(() => {
        if (query.length > 2) {
            const timer = setTimeout(async () => {
                const res = await fetch(`/api/search?q=${query}`);
                const data = await res.json();
                setResults(data);
            }, 500); // Debounce
            
            return () => clearTimeout(timer);
        }
    }, [query]); // Run when query changes
    
    return (
        <div>
            <input 
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="ابحث..."
            />
            <ul>
                {results.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    );
}

🌐 useContext: السياق العام

useContext يسمح لك بمشاركة البيانات بين المكونات بدون تمرير props يدوياً.

import { createContext, useContext, useState } from 'react';

// Create Context
const ThemeContext = createContext();

// Provider Component
function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    
    const toggleTheme = () => {
        setTheme(theme === 'light' ? 'dark' : 'light');
    };
    
    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

// Consumer Component
function ThemedButton() {
    const { theme, toggleTheme } = useContext(ThemeContext);
    
    return (
        <button 
            onClick={toggleTheme}
            style={{
                background: theme === 'light' ? '#fff' : '#333',
                color: theme === 'light' ? '#333' : '#fff'
            }}
        >
            تبديل الثيم (الحالي: {theme})
        </button>
    );
}

// App Component
function App() {
    return (
        <ThemeProvider>
            <div>
                <h1>تطبيق مع ثيم</h1>
                <ThemedButton />
            </div>
        </ThemeProvider>
    );
}

React Router: التنقل بين الصفحات

🛣️ إعداد React Router

# تثبيت React Router
npm install react-router-dom

// App.jsx
import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';

// Home Page
function Home() {
    return <h1>الصفحة الرئيسية</h1>;
}

// About Page
function About() {
    return <h1>عن الموقع</h1>;
}

// Product Page with Dynamic Route
function Product() {
    const { id } = useParams();
    const navigate = useNavigate();
    
    return (
        <div>
            <h1>منتج رقم: {id}</h1>
            <button onClick={() => navigate('/')}>العودة للرئيسية</button>
        </div>
    );
}

// 404 Page
function NotFound() {
    return <h1>404 - الصفحة غير موجودة</h1>;
}

// Navigation Component
function Navigation() {
    return (
        <nav>
            <Link to="/">الرئيسية</Link>
            <Link to="/about">عن الموقع</Link>
            <Link to="/product/1">منتج 1</Link>
            <Link to="/product/2">منتج 2</Link>
        </nav>
    );
}

// App Component with Router
function App() {
    return (
        <BrowserRouter>
            <Navigation />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/product/:id" element={<Product />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

إدارة الحالة المتقدمة

📦 Redux Toolkit: إدارة حالة شاملة

# تثبيت Redux Toolkit
npm install @reduxjs/toolkit react-redux

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

// Create Slice
const counterSlice = createSlice({
    name: 'counter',
    initialState: { value: 0 },
    reducers: {
        increment: (state) => {
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        },
        incrementByAmount: (state, action) => {
            state.value += action.payload;
        }
    }
});

// Export Actions
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Configure Store
const store = configureStore({
    reducer: {
        counter: counterSlice.reducer
    }
});

export default store;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
    <Provider store={store}>
        <App />
    </Provider>
);

// Counter Component
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './store';

function Counter() {
    const count = useSelector((state) => state.counter.value);
    const dispatch = useDispatch();
    
    return (
        <div>
            <h1>العداد: {count}</h1>
            <button onClick={() => dispatch(increment())}>+</button>
            <button onClick={() => dispatch(decrement())}>-</button>
            <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
        </div>
    );
}

مشروع تطبيقي: تطبيق قائمة المهام

// TodoApp.jsx - تطبيق قائمة مهام كامل
import { useState, useEffect } from 'react';

function TodoApp() {
    const [todos, setTodos] = useState(() => {
        // Load from localStorage
        const saved = localStorage.getItem('todos');
        return saved ? JSON.parse(saved) : [];
    });
    const [input, setInput] = useState("");
    const [filter, setFilter] = useState('all');
    
    // Save to localStorage
    useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todos));
    }, [todos]);
    
    const addTodo = () => {
        if (input.trim()) {
            setTodos([...todos, {
                id: Date.now(),
                text: input,
                completed: false,
                createdAt: new Date().toISOString()
            }]);
            setInput("");
        }
    };
    
    const toggleTodo = (id) => {
        setTodos(todos.map(todo => 
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
        ));
    };
    
    const deleteTodo = (id) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };
    
    const clearCompleted = () => {
        setTodos(todos.filter(todo => !todo.completed));
    };
    
    // Filter todos
    const filteredTodos = todos.filter(todo => {
        if (filter === 'active') return !todo.completed;
        if (filter === 'completed') return todo.completed;
        return true;
    });
    
    const itemsLeft = todos.filter(todo => !todo.completed).length;
    
    return (
        <div style={{ maxWidth: '500px', margin: '50px auto', padding: '20px' }}>
            <h1>📝 قائمة المهام</h1>
            
            {/* Input */}
            <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
                <input 
                    type="text"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && addTodo()}
                    placeholder="أضف مهمة جديدة..."
                    style={{ flex: 1, padding: '10px', fontSize: '16px' }}
                />
                <button onClick={addTodo} style={{ padding: '10px 20px' }}>
                    إضافة
                </button>
            </div>
            
            {/* Filters */}
            <div style={{ marginBottom: '20px' }}>
                <button onClick={() => setFilter('all')}>الكل</button>
                <button onClick={() => setFilter('active')}>النشطة</button>
                <button onClick={() => setFilter('completed')}>المكتملة</button>
                <button onClick={clearCompleted}>مسح المكتملة</button>
            </div>
            
            {/* Todo List */}
            <ul style={{ listStyle: 'none', padding: 0 }}>
                {filteredTodos.map(todo => (
                    <li 
                        key={todo.id}
                        style={{
                            display: 'flex',
                            alignItems: 'center',
                            padding: '10px',
                            marginBottom: '10px',
                            background: '#f5f5f5',
                            borderRadius: '5px'
                        }}
                    >
                        <input 
                            type="checkbox"
                            checked={todo.completed}
                            onChange={() => toggleTodo(todo.id)}
                            style={{ marginRight: '10px' }}
                        />
                        <span style={{ 
                            flex: 1,
                            textDecoration: todo.completed ? 'line-through' : 'none',
                            color: todo.completed ? '#999' : '#333'
                        }}>
                            {todo.text}
                        </span>
                        <button 
                            onClick={() => deleteTodo(todo.id)}
                            style={{ background: '#ff4444', color: 'white', border: 'none', padding: '5px 10px', cursor: 'pointer' }}
                        >
                            حذف
                        </button>
                    </li>
                ))}
            </ul>
            
            {/* Footer */}
            <p style={{ textAlign: 'center', color: '#666' }}>
                {itemsLeft} {itemsLeft === 1 ? 'عنصر متبقي' : 'عناصر متبقية'}
            </p>
        </div>
    );
}

export default TodoApp;

أفضل الممارسات في React

✅ أفضل الممارسات

❌ أخطاء شائعة

• ❌ تعديل State مباشرة: استخدم setState أو dispatch
• ❌ استخدام index كـ key: استخدم معرفات فريدة
• ❌ Components كبيرة جداً: قسمها إلى مكونات صغيرة
• ❌ عدم استخدام Keys: يؤدي لأخطاء في القوائم
• ❌ تأثيرات جانبية في render: استخدم useEffect
• ❌ عدم تنظيف التأثيرات: أعد cleanup في useEffect
• ❌ Prop Drilling: استخدم Context بدلاً من تمرير props عميقاً
• ❌ عدم Memoization: يؤدي لإعادة render غير ضرورية

أدوات ومكتبات React

🛠️ المكتبات الأساسية

موارد التعلم

📚 أفضل مصادر تعلم React

الخلاصة

React.js هو المكتبة الأقوى لبناء واجهات المستخدم الحديثة. تعلمه يفتح لك أبواب سوق العمل ويمنحك مهارات قيّمة.

القاعدة الذهبية: ابدأ بالأساسيات (Components, Props, State)، ثم انتقل للمواضيع المتقدمة (Hooks, Router, State Management). التطبيق العملي هو المفتاح.

تذكر: React سهل التعلم لكن يحتاج ممارسة. ابنِ مشاريع حقيقية، اقرأ كود الآخرين، وشارك في المجتمع.

سواء كنت مبتدئاً أو محترفاً، React سيحدث فرقاً كبيراً في مسيرتك المهنية. ابدأ اليوم، وستحصد ثماراً استثنائية غداً.

الأسئلة الشائعة (FAQ)