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

React Hooks, Redux Toolkit, React Routing v6, Tanstack Query, Firebase, Styling (Chakra UI, MUI, Tailwind CSS) & More!

Ratings: 4.87 / 5.00




Description

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


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

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

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

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

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


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

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

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

  • 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. فضلاً قم بمراجعة منهج الدورة لتفاصيل أكثر.

What You Will Learn!

  • React JS تعلم بناء العديد من التطبيقات المبنية بواسطة
  • تعلم إنشاء متجر إلكتروني متكامل ( مع Admin Panel & Dashboard)
  • Redux Toolkit إتقان المفاهيم الأساسية
  • تعلم Redux Toolkit Query
  • إنشاء تطبيقات ويب قوية، سريعة، تفاعلية ، وسهلة الاستخدام
  • React JS باستخدام (SPA) إنشاء تطبيقات
  • React Bootstrap, MUI تعلم
  • React Router V6 تعلم
  • Chakra UI Library تعلم
  • Styled Components باستخدام CSS in Js تعلم
  • Tailwind CSS Framework تعلم
  • React Hook Form تعلم
  • تعلم TanStack Query V4
  • Firebase platform إنشاء تطبيقات متكاملة بمساعدة
  • تعلم Charts, Tables في تطبيقات ال React

Who Should Attend!

  • Students who want to learn how to build reactive and fast web apps
  • أي شخص لديه شغف في مجال الويب
  • مناسب للمبتدئين