Design UI/UXعربى

Développement d'interface utilisateur React.js

Développement d'interfaces utilisateur

Maîtrisez la création d'interfaces utilisateur dynamiques avec React.js.

4.8(57)179 pages12 chapitres0 apprenants

Ce que vous apprendrez

  • Comprendre les composants React
  • Gérer l'état avec les hooks
  • Créer des applications réactives
  • Utiliser le routage avec React Router
  • Optimiser les performances des applications
  • Intégrer des API externes

À propos du livre

Ce livre est une ressource essentielle pour tous ceux qui souhaitent plonger dans le développement d'interfaces utilisateur modernes avec React.js. Grâce à des explications claires et des exemples pratiques, les lecteurs apprendront à construire des applications web interactives et réactives.

En explorant les concepts fondamentaux et les meilleures pratiques, ce livre vous permettra de comprendre comment React.js transforme le développement web et pourquoi il est devenu un outil incontournable pour les développeurs d'aujourd'hui.

À qui s'adresse ce livre

  • Développeurs débutants
  • Professionnels en reconversion
  • Étudiants en informatique
  • Passionnés de technologie
  • Entrepreneurs souhaitant créer des applications

Pourquoi lire ce livre

  • Approche pratique avec des exemples concrets
  • Explications claires et accessibles
  • Mise à jour avec les dernières tendances de React
  • Idéal pour les autodidactes

Avis des lecteurs

Ces avis proviennent de lecteurs qui possèdent le livre — par achat ou dans le cadre de leur abonnement.
4.8
★★★★★
57 avis
5★
47
4★
10
3★
0
2★
0
1★
0

    Table des matières

    1

    مقدمة الكتاب: الغوص في عالم React.js

    2

    الفصل الأول

    1. مقدمة في React.js
    2. تعريف React وأهميته
    3. تعريف React
    4. أهمية React
    5. البدايات
    6. الإصدار الأول
    7. انتشار وتطور
    8. React Native
    9. اليوم
    10. مقارنة بين React والأطر الأخرى مثل Angular و Vue
    11. المعمارية ونموذج البيانات
    12. التعلم والاستخدام
    13. الأداء
    14. الشعبية والمجتمع
    15. الاستدامة والتطوير المستقبلي
    3

    الفصل الثاني

    1. الإعداد والبيئة
    2. تنصيب Node.js وnpm
    3. تحميل Node.js
    4. تثبيت Node.js
    5. التحقق من التثبيت
    6. استخدام npm لتثبيت الحزم
    7. ملاحظات إضافية
    8. مشاكل شائعة وكيفية حلها
    9. إنشاء مشروع React باستخدام Create React App
    10. إنشاء مشروع React جديد
    11. تشغيل المشروع
    12. البدء بالتطوير
    13. فهم بنية مشروع React
    14. نقطة البداية (Entry Point)
    15. مكونات React Components)
    16. الحالة (State) والخصائص (Props)
    17. الطرق الدورية للمكون (Lifecycle Methods)
    18. التوجيه (Routing)
    19. إدارة الحالة العالمية (Global State Management)
    20. أنماط وموارد (Styles and Assets)
    21. أدوات البناء (Build Tools)
    22. الاختبارات (Testing)
    23. أدوات التطوير (Developer Tools)
    24. أمثلة على ملفات البنية
    25. نصائح للمحافظة على بنية نظيفة وقابلة للصيانة
    26. ملفات المشروع
    27. كود الملفات
    28. شرح البنية والكود
    4

    الفصل الثالث

    1. مكونات React
    2. فهم الجزء والمكونات (Components)
    3. ما هو المكون في React؟
    4. خصائص المكونات
    5. أنواع المكونات
    6. الخصائص (Props) والحالة (State)
    7. دورة حياة المكون
    8. استخدام الخطافات (Hooks)
    9. خلاصة
    10. الفرق بين المكونات الدالية والصنفية
    11. تعريف المكونات
    12. دورة حياة المكون والحالة
    13. البساطة وإعادة الاستخدام
    14. أداء
    15. توجهات المستقبل
    16. الخلاصة
    17. Props و State
    18. Props (الخصائص)
    19. State (الحالة)
    20. الفرق الرئيسي
    21. مثال توضيحي بسيط باستخدام React.js
    22. مثال عملي لبناء مكون بسيط
    23. خطوة 1: إعداد المشروع
    24. خطوة 2: إنشاء مكون Welcome Message
    25. خطوة 3: تشغيل التطبيق
    5

    الفصل الرابع

    1. دورة حياة المكونات
    2. تفصيل دورة حياة المكون
    3. المراحل الأساسية لدورة حياة المكون في React
    4. التغييرات مع React Hooks
    5. مثال على استخدام useEffect:
    6. خلاصة
    7. أساليب دورة الحياة وكيفية استخدامها
    8. مكونات قبل React 16.3
    9. الأساليب الأساسية في دورة الحياة:
    10. مع React 16.3 والإصدارات الأحدث
    11. خلاصة
    12. مثال عملي على دورة حياة المكون
    13. إعداد المكون (Setting Up)
    14. شرح دورة الحياة
    15. استخدام المكون
    16. نقاط مهمة حول دورة الحياة في React
    6

    الفصل الخامس

    1. التعامل مع الحالة State والخصائص Props
    2. التفريق بين الحالة والخصائص
    3. الحالة (State)
    4. الخصائص (Props)
    5. مثال توضيحي
    6. الفرق الأساسي
    7. نصائح لاستخدام الحالة والخصائص
    8. رفع الحالة (Lifting State Up)
    9. ما هو رفع الحالة؟
    10. متى يجب استخدام رفع الحالة؟
    11. كيفية تطبيق رفع الحالة
    12. الفوائد من استخدام رفع الحالة
    13. التحديات المحتملة
    14. المثال: تطبيق لإدارة درجة الحرارة
    15. استخدام الخطاف useState
    16. كيفية استخدام useState
    17. مبادئ استخدام useState
    18. الاعتبارات
    19. مثال عملي
    7

    الفصل السادس

    1. إدارة الأحداث
    2. التعامل مع الأحداث في React
    3. أساسيات التعامل مع الأحداث
    4. الفروق بين الأحداث في HTML وReact
    5. منع السلوك الافتراضي
    6. استخدام الأحداث مع المكونات الوظيفية
    7. التعامل مع الأحداث في مكونات الصف
    8. نصائح للتعامل مع الأحداث
    9. خلاصة
    10. مثال عملي
    11. إنشاء مكون React
    12. تمرير الأحداث إلى المعالج
    13. استخدام الأحداث في عناصر متعددة
    14. منع السلوك الافتراضي
    15. لنقم بإنشاء مثال عملي
    16. إنشاء مشروع React جديد
    8

    الفصل السابع

    1. React Router
    2. تثبيت react-router-dom
    3. إعداد المكونات الأساسية
    4. إعداد الموجه (Router)
    5. إطلاق التطبيق والتجربة
    6. مثال عملي
    7. المسارات الديناميكية في React Router
    8. تعريف المسار الديناميكي
    9. استخدام المعلمات في المكون
    10. مثال على التعامل مع المسارات الديناميكية
    11. خلاصة
    12. مثال عملي
    13. الخطوة 1: إعداد المشروع
    14. الخطوة 2: إضافة React Router
    15. الخطوة 3: إعداد المكونات
    16. الخطوة 4: إعداد التوجيه في App.js
    17. الخطوة 5: تشغيل التطبيق
    9

    الفصل الثامن

    1. استخدام Fetch API
    2. استخدام Axios
    3. تثبيت Axios
    4. مقارنة بين Fetch API و Axios
    5. مثال على استخدام Fetch API في React
    6. مثال على استخدام Axios في React
    7. إدارة البيانات المستردة والتعامل مع الأخطاء
    8. إدارة البيانات المستردة والتعامل مع الأخطاء باستخدام Fetch API
    9. مثال عملي على استدعاء API
    10. خطوات إعداد المشروع
    11. إضافة كود استدعاء API باستخدام Fetch API
    10

    الفصل التاسع

    1. Hooks في React
    2. مقدمة عن Hooks في React
    3. ما هي الـ Hooks؟
    4. لماذا تم تقديم الـ Hooks؟
    5. أنواع الـ Hooks الأساسية
    6. فوائد استخدام الـ Hooks
    7. مثال على استخدام useState و useEffect
    8. استخدام useState و useEffect في React
    9. استخدام useState
    10. مثال على useState:
    11. استخدام useEffect
    12. خلاصة
    13. مقدمة عن الـ Custom Hooks في React
    14. ما هي الـ Custom Hooks؟
    15. لماذا تستخدم Custom Hooks؟
    16. كيف تكتب Custom Hook؟
    17. الخلاصة
    18. قواعد Hooks في React
    19. استدعِ الـ Hooks فقط على المستوى الأعلى
    20. استدعِ الـ Hooks فقط من داخل المكونات الوظيفية في React أو من داخل Custom Hooks
    21. استخدم فقط Hooks من React أو من Custom Hooks
    22. لماذا هذه القواعد مهمة؟
    23. ما هي القواعد الأخرى المهمة لاستخدام Hooks في React؟
    11

    الفصل العاشر

    1. إدارة الحالة المتقدمة
    2. استخدام Context API
    3. كيفية استخدام Context API
    4. مثال بسيط
    5. الاعتبارات
    6. Redux: مقدمة وتكامل مع React
    7. مقدمة إلى Redux
    8. المفاهيم الأساسية في Redux
    9. تكامل Redux مع React
    10. مزايا استخدام Redux مع React
    11. التحديات عند استخدام Redux
    12. بدائل Redux
    13. أمثلة عملية على استخدام Redux وContext
    14. مثال على استخدام Redux
    15. مثال على استخدام Context API
    16. الاختلافات الرئيسية بين Redux وContext API
    12

    الفصل الحادي عشر

    1. أداء React
    2. تقنيات لتحسين أداء تطبيقات React
    3. استخدام المفاتيح الفريدة في القوائم (Keys in Lists)
    4. استخدام React.memo وReact.PureComponent
    5. تجنب إعادة التقديم غير الضرورية
    6. التحميل الكسول (Lazy Loading)
    7. استخدام useMemo وuseCallback
    8. أداء الرسوم البيانية والتفاعلات
    9. تجنب استخدام الدوال المضمنة والكائنات في JSX
    10. تقسيم التعليمات البرمجية (Code Splitting)
    11. استخدام Service Workers والتخزين المؤقت
    12. مراقبة وتحليل الأداء
    13. تحسين معالجة الصور والوسائط
    14. الاستفادة من SSR (Server-Side Rendering)
    15. استخدام React DevTools
    16. مقدمة عن React DevTools
    17. أهمية React DevTools
    18. تثبيت React DevTools
    19. استخدام React DevTools
    20. فتح الأداة:
    21. تفحص المكونات:
    22. تحرير الحالة والخصائص:
    23. تحليل أداء المكونات:
    24. نصائح عامة
    25. هل يمكن استخدام React DevTools لتحليل أداء تطبيقات React Native؟
    26. استخدام React DevTools مع React Native
    27. تحليل الأداء في React Native
    28. Lazy loading & React Memo
    29. Lazy Loading في React
    30. كيفية استخدام Lazy Loading في React
    31. React Memo
    32. الاستنتاج

    Livres associés