تابع تعلم رياكت React الجزء 5
28- لماذا من الضروري بدء أسماء المكونات بحرف كبير؟
في React ، من الضروري بدء أسماء المكونات بحرف كبير. إذا بدأنا اسم المكون بأحرف صغيرة ، فسيؤدي ذلك إلى ظهور خطأ كعلامة غير معروفة. ذلك لأنه ، في JSX ، تعتبر أسماء العلامات الصغيرة علامات HTML. تابع تعلم رياكت React الجزء 5
29- ما هي fragments ؟
تم تقديمه في الإصدار 16.2 من React. في React ، تُستخدم Fragments للمكونات لإرجاع عناصر متعددة. يسمح لك بتجميع قائمة بالعديد من العناصر الفرعية دون إضافة عقدة إضافية إلى DOM.
مثال
HTML
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
)
}
HTML
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
)
}
30- لماذا fragments أفضل من حاويات divs؟ا
تكون الأجزاء أسرع وتستهلك ذاكرة أقل لأنها لم تنشئ عقدة DOM إضافية.
بعض نماط CSS مثل CSS Grid و Flexbox لها علاقة خاصة بين الوالدين والطفل وتضيف علامات <div> في المنتصف ، مما يجعل من الصعب الحفاظ على التخطيط المطلوب.
مفتش DOM أقل تشوشًا.
31- كيف تطبق التحقق من الصحة validation على الدعائم props في React؟
التحقق من صحة الدعائم هو أداة تساعد المطورين على تجنب الأخطاء والمشاكل في المستقبل. يجعل الكود الخاص بك أكثر قابلية للقراءة. استخدمت مكونات React خاصية PropTypes الخاصة التي تساعدك على اكتشاف الأخطاء من خلال التحقق من صحة أنواع البيانات من القيم التي يتم تمريرها من خلال الدعائم ، على الرغم من أنه ليس من الضروري تحديد المكونات باستخدام propTypes.
يمكننا تطبيق التحقق على الخاصيات باستخدام App.propTypes في مكون React. عندما يتم تمرير بعض الخاصيات بنوع غير صالح ، ستحصل على التحذيرات على وحدة تحكم JavaScript. بعد تحديد أنماط التحقق ، تحتاج إلى تعيين App.defaultProps.
HTML
class App extends React.Component {
render() {}
}
Component.propTypes = { /*Definition */};
32- ما هو تطبيق create-react-app؟
إنشاء تطبيق React هو أداة قدمها Facebook لبناء تطبيقات React. يوفر لك إنشاء تطبيقات React من صفحة واحدة. تم تكوين تطبيق create-react-app مُكوَّن مسبقًا ، مما يوفر عليك وقتًا طويلاً من الإعداد والتكوين مثل Webpack أو Babel. تحتاج إلى تشغيل أمر واحد لبدء مشروع React ، الموضح أدناه.
1. $ npx create-reaction-app my-app
يتضمن هذا الأمر كل ما نحتاجه لبناء تطبيق React. وفيما يلي بعض منها:
يتضمن دعم React و JSX و ES6 و Flow.
يشتمل على CSS تم إصلاحه تلقائيًا ، لذلك لا تحتاج إلى -webkit- أو بادئات أخرى.
يتضمن عداء اختبار وحدة سريعًا وتفاعليًا مع دعم مدمج لتقارير التغطية.
يتضمن خادم تطوير مباشر يحذر من الأخطاء الشائعة.
يتضمن نصًا برمجيًا لتجميع JS و CSS والصور للإنتاج ، مع تجزئة وخرائط المصدر.
33- ما الذي تفهمه بالحكام refs في React؟
Refs هو الاختصار المستخدم للمراجع في React. إنها سمة تساعد على تخزين مرجع لعقد DOM معينة أو عناصر React. يوفر طريقة للوصول إلى عقد React DOM أو عناصر React وكيفية التفاعل معها. يتم استخدامه عندما نريد تغيير قيمة المكون الفرعي ، دون استخدام الدعائم.
34- كيفية إنشاء المراجع refs ؟
يمكن إنشاء المراجع باستخدام React.createRef () وإرفاقها بعناصر React عبر السمة ref. يتم تخصيصه بشكل عام لخاصية مثيل عند تكوين مكون ، ومن ثم يمكن الرجوع إليه في جميع أنحاء المكون.
HTML
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.callRef = React.createRef();
}
render() {
return <div ref={this.callRef} />;
}
}