Скачать или смотреть 14 - Search input ( Filtering ) [ريأكت بالعربي من الصفر للاحتراف | React js tutorial in Arabic]

14 - Search input ( Filtering ) [ريأكت بالعربي من الصفر للاحتراف | React js tutorial in Arabic]
=====================================================================
في الفيديو، نتكلم عن سلوك الـ React component عند استخدام Strict Mode، حيث يُستدعى componentDidMount وrender مرتين، مما يساعد في اكتشاف الأخطاء. ثم يشرح كيفية إنشاء مربع بحث (search box) لتصفية المستخدمين بناءً على مدخلات المستخدم.

الخطوات الرئيسية:

إعداد مربع البحث:🔻
تم إنشاء عنصر إدخال (input) بفئة search-box وأضيف له onChange
handler.

التقاط القيم المدخلة:🔻
يتم طباعة حدث onChange في الكونسول لرؤية قيمة المدخلات.

تصفية المستخدمين:🔻
يتم استخدام filter لتحديد المستخدمين الذين تتضمن أسماؤهم النص المدخل. تمت معالجة المشكلة المتعلقة بحساسية الحروف عبر استخدام toLowerCase().

تحديث الحالة:🔻
عند البحث، يتم تحديث الحالة بالمستخدمين المطابقين.

تحسين الكود:🔻
تم فصل وظيفة البحث إلى دالة منفصلة لتحسين الأداء.
تم استخدام الديسركتشن لتحسين وضوح الكود.

النتيجة:🔻
تظهر المستخدمون في المتصفح، وتعود القائمة إلى طبيعتها عند مسح مربع البحث.

تابعنا على فيسبوك:
  / monakandoz  
تابعنا على انستجرام:
  / monakandoz  
تابعنا على تويتر:
  / monakandoz  


كلمات مفتاحيه:
----------------------
React.JS,React,ReactJS,javascript,css,html,redux,react router,css in js,styled comoonent,react suga,graphQl,React hooks,firebase,PWA,testing,jest,web performance,web development,ريأكت,بالعربي,مكتبة الريأكت,جافاسكريبت,سي اس اس,ات تي ام ال,ريداكس,استرايب,كونتكست,strip,context API,استايليد كومبونت,ريأكت هوكس,فايربيز,جراف كيو ال,جيست,تصميم المواقع,من الصفر للاحتراف,كورس,course,تعلم,learn,مميزات,react js tutorial,JSX, react-scripts, setState,state