The Complete React Guide 2026 - Arabic | عربي

React.js هي مكتبة JavaScript الأكثر شيوعًا التي يمكنك استخدامها وتعلمها هذه الأيام لبناء واجهات مستخدم حديثة وتفاعلية للويب.

خلال هذه الدورة التدريبية سوف تتعلم المفاهيم الأساسية والمتقدمة خطوة بخطوة مع التطبيق والأمثلة - (سوف تقوم ببناء عدة مشاريع وتتعلم من خلالها بشكل أسرع).

سوف أحرص على شرح المصطلحات المهمة باللغة الانجليزية وتوضيح المفهوم باللغة العربية لتسهيل الفهم وثبات المعلومة .

الدورة مرتكزة على مفهوم Functional components first بدلا عن Class Components وهذا ما سوف تلاحظه خلال الدورة.

ستعلمك هذه الدورة التدريبية React.js بطريقة موجهة نحو التطبيقات والتدريبات الكثيرة ، سوف تتعلم جميع الأساسيات الرئيسية بالإضافة إلى المفاهيم  المتقدمة والموضوعات ذات الصلة لجعلك  مطور  React js.

سوف تتعلم العديد من Hooks سواءً الأساسية أو المتقدمة وأيضاً custom hooks الموجودة في المكتبات المختلفة التي سوف نستخدمها خلال التطبيقات.

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

لقد قمت بتجهيز محتويات هذه الدورة بناء على الدليل المقترح لتعلم ال React لعام 2026.

محتويات الدورة التدريبية :

• Fundamental Topics (المواضيع الأساسية):

  • Create React App (CRA) Tool

  • JSX

  • Functional components

  • Props

  • States

  • Conditional Rendering

  • Lists & Keys

  • Component Life Cycle

  • Event Handling

  • Basic Hooks:

    • useState Hook

    • useEffect Hook
      
      

• Advanced Topics (المواضيع المتقدمة):

  • Hooks:

    • useRef Hook

    • useCallback Hook

    • useMemo Hook

    • useContext Hook

    • Custom Hooks

  • Portals

  • Vite Tool
    
    

• Ecosystem:

  • Styling:

    • Styled Components

    • MUI (Material UI)

    • Tailwind CSS

    • React Bootstrap

    • Chakra UI

    • Animations:

      • Framer Motion

  • Router:

    • React Router v6:

      • useLocation Hook

      • useNavigate Hook

      • useParams Hook

  • Forms:

    • React Hook Form:

      • useForm Hook

      • useFeildArray Hook

  • REST API Calls:

    • Axios

  • State Management:

    • Context:

      • useContext Hook

    • Redux Toolkit:

      • useDispatch Hook

      • useSelector Hook

    • TanStack Query (React Query):

      • useQuery Hook

    • Redux Toolkit Query

  • Firebase

  • Tables

    • Material React Table

  • Charts

    • React Chartjs 2

• Browser Extensions installation:

  • React Developer Tools

  • React Context DevTool

  • Redux DevTools

• Apps & Projects ( التطبيقات والمشاريع):

  • Practice Apps:

    • Simple Movies App

    • Sculptures Gallery App

    • Meals Chef App (CRUD)

    • Photos & Quotes App

    • Books Finder App

    • Blog App With Firebase

  • Capstone Project:

    • E-Commerce System
      

سوف تتعلم جميع المفاهيم المذكورة من البداية وليس بالضرورة أن يكون لديك خبره مسبقة في React JS. فضلاً قم بمراجعة منهج الدورة لتفاصيل أكثر.