easyT
  • Subscribe
Sign In
easyT
  • Diplomas
  • Courses
  • E-books
  • Instructors
  • Subscribe
Sign In

Browse

  • All courses
  • Diplomas
  • Subscribe
  • Instructors

Account

  • My courses
  • Purchases
  • Wishlist
  • Settings

Join us

  • Become an instructor
  • Affiliate program
  • About us

Get the app

Apps in development
All rights reserved © 2003-2026 · easyT.onlineTerms & conditionsPrivacy policyRefund policyContact usVerify a certificate
Programming & Software Developmentعربى

React.js User Interface Development

Master the art of building dynamic web applications

Unlock the power of React.js to create stunning user interfaces.

4.8(57)179 pages12 chapters0 learners

What you'll learn

  • Fundamentals of React.js
  • Component-based architecture
  • State management techniques
  • Building reusable components
  • Integrating APIs with React
  • Optimizing performance in applications
React.js تطوير واجهات المستخدم
$1.99
Buy now

About this book

This book provides a comprehensive guide to React.js, a powerful JavaScript library for building user interfaces. Whether you're a beginner or an experienced developer, you'll find valuable insights and practical examples that will enhance your skills.

With a focus on real-world applications, this book covers essential concepts and advanced techniques, ensuring you have the tools you need to succeed in modern web development. Learn how to create responsive, efficient, and maintainable user interfaces that engage users and elevate your projects.

Who this book is for

  • Aspiring web developers
  • Front-end developers
  • Software engineers looking to upskill
  • Tech enthusiasts interested in modern frameworks

Why read this book

  • Step-by-step guidance for all skill levels
  • Real-world examples and projects
  • Best practices for clean and maintainable code
  • Insights into the latest React features

Table of contents

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. الاستنتاج

Related books

  • برمجة وتطوير الإنترنت بلغة جافا سكريبت

  • الدليل الشامل لتطوير وبرمجة المواقع

  • كيف تصبح مبرمج

  • MySQL الإعداد

  • إنشاء واجهة مستخدم باستخدام بايثون Tkinter

  • برمجة وتطوير الإنترنت بلغة PHP

  • البرمجة باستخدام C/C++

  • تطوير تطبيقات الويب باستخدام بايثون

تقييمات القراء

التقييمات هنا من القراء الذين يملكون الكتاب — عن طريق الشراء أو ضمن اشتراكهم.
4.8
★★★★★
57 تقييم
5★
47
4★
10
3★
0
2★
0
1★
0