تابع تعلم رياكت React الجزء 2

تعلم رياكت

10- ماذا تفهم من "في React ، كل شيء مكون."

في React ، المكونات هي اللبنات الأساسية لتطبيقات React. تقسم هذه المكونات واجهة مستخدم تطبيق React بالكامل إلى أجزاء صغيرة ومستقلة وقابلة لإعادة الاستخدام. يعرض React كل من هذه المكونات بشكل مستقل دون التأثير على باقي واجهة مستخدم التطبيق. ومن ثم ، يمكننا القول إن كل شيء في React هو مكون.

11- شرح الغرض من render() في React.

من الضروري أن يكون لكل مكون من مكونات React وظيفة تصيير (). تُستخدم وظيفة التجسيد لإرجاع HTML الذي تريد عرضه في أحد المكونات. إذا كنت بحاجة إلى عرض أكثر من عنصر HTML واحد ، فأنت بحاجة إلى تجميعها معًا داخل علامة تضمين واحدة (علامة أصل) مثل <div> و <form> و <group> وما إلى ذلك. تُرجع هذه الوظيفة نفس النتيجة في كل مرة يتم استدعاؤها .

مثال : إذا كنت بحاجة إلى عرض عنوان ، فيمكنك القيام بذلك على النحو التالي.

الكود

import React from 'react'
class App extends React.Component {
render (){
return (
<h1>Hello World</h1>
)
}
}
export default App

النقاط التي يجب ملاحظتها:

تحتوي كل دالة render() على تعليمة إرجاع Return

يمكن أن تحتوي عبارة الإرجاع على علامة HTML أصل واحدة فقط.

12- كيف يمكنك تضمين مكونين أو أكثر في عنصر واحد؟

يمكنك تضمين مكونين أو أكثر بالطريقة التالية:

الكود

import React from 'react'
class App extends React.Component {
render (){
return (
<h1>Hello World</h1>
)
}
}
class Example extends React.Component {
render (){
return (
<h1>Hello </h1>
)
}
}
export default App

13- ما هي الدعائم Props؟

تشير الدعامات إلى "خصائص" في React. إنها مدخلات للقراءة فقط للمكونات. الدعائم هي كائن يخزن قيمة سمات العلامة ويعمل بشكل مشابه لسمات HTML. إنه يعطي طريقة لتمرير البيانات من الأصل إلى المكونات الفرعية في جميع أنحاء التطبيق.

إنه مشابه لوسائط الوظيفة ويتم تمريره إلى المكون بنفس طريقة تمرير الوسائط في دالة.

الدعائم غير قابلة للتغيير لذا لا يمكننا تعديل الدعائم من داخل المكون. داخل المكونات ، يمكننا إضافة سمات تسمى props. تتوفر هذه السمات في المكون باسم this.props ويمكن استخدامها لتقديم بيانات ديناميكية في طريقة العرض الخاصة بنا.

-14ما هي State في React؟

State هي بنية قابلة للتحديث تحتوي على البيانات والمعلومات حول المكون. قد يتم تغييره على مدار عمر المكون استجابةً لإجراء المستخدم أو حدث النظام. إنه قلب مكون التفاعل الذي يحدد سلوك المكون وكيف سيتم عرضه. يجب أن تبقى بسيطة قدر الإمكان.

لنقم بإنشاء مكون "مستخدم" مع "حالة الرسالة".

الكود

import React from 'react'
class User extends React.Component {
constructor(props) {
super(props)
this.state = {
message: 'Welcome to React'
}
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
)
}
}
export default User

-15 ما هي وظيفة arrow functionفي React؟ كيف يتم استخدامه؟

وظيفة السهم هي الميزة الجديدة لمعيار ES6. إذا كنت بحاجة إلى استخدام وظائف الأسهم ، فليس من الضروري ربط أي حدث بـ "هذا". هنا ، نطاق "هذا" عالمي ولا يقتصر على أي وظيفة استدعاء. لذلك إذا كنت تستخدم Arrow Function ، فلا داعي لربط "this" داخل المُنشئ. ويسمى أيضًا بوظائف "سهم الدهون" (=>).

الكود

//General way
render() {
return(
<MyInput onChange={this.handleChange.bind(this) } />
);
}
//With Arrow Function
render() {
return(
<MyInput onChange={ (e) => this.handleOnChange(e) } />
);
}