دعائم تفاعل دليل المبتدئين [مع التركيب]

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

ما هي أدوات React؟

كلمة "Props" هي كلمة مفتاحية في مكتبة React وتعني الخصائص. يشار إليها أيضًا أحيانًا بالمتغير الشامل أو الكائن في مكونات React. تتشابه خصائص React مع الوسائط في HTML. بعض الأشياء الجديرة بالملاحظة حول خصائص React هي أنها تتدفق دائمًا في اتجاه أحادي ، والبيانات داخلها للقراءة فقط. هذا يجعلها غير قابلة للتغيير ، مما يعني أن البيانات المتدفقة من أحد المكونات لا يمكن تغييرها في الآخر. يمكننا أن نفهم هذا بمثال على وظيفة نقية وغير نقية.

هذه وظيفة نقية لأنها ستعطي دائمًا نفس الإخراج لنفس المدخلات:

الدالة prod (أ ، ب) {

العودة أ * ب ؛

}

هذه وظيفة نجسة لأنها تتلاعب بمدخلاتها الخاصة:

الوديعة الوظيفية (الحساب ، المبلغ) {

account.total + = المبلغ ؛

}

نظرًا لأن دعامات React غير قابلة للتغيير ، يجب أن تعمل المكونات كوظائف خالصة. هذه هي القاعدة الصارمة الوحيدة في مكتبة React المرنة.

بناء الجملة لتمرير والوصول إلى دعائم التفاعل

كما ذكرنا سابقًا ، تتشابه خصائص React مع وسيطات HTML ، وبالتالي لتمرير أو إضافة أي خاصيات إلى أحد المكونات ، يمكننا القيام بذلك على نحو مشابه لتمرير سمات HTML.

بناء الجملة:

<اسم المكون props_name = “القيمة” />

في الصيغة أعلاه ، " اسم_المكوِّن " هو اسم المكون الذي نحتاج إلى تمرير الخاصيات إليه ، واسم الخاصية هو اسم الخاصيات ، والقيمة هي قيمة الخاصيات.

يمكننا الوصول إلى أي دعائم من داخل فئة المكون.

بناء الجملة:

this.props .props_name ؛

في الصيغة أعلاه ، يعد this.props كائنًا شاملاً يُستخدم للوصول إلى أي خاصيات من داخل صنف المكون ، و props_name هو اسم خصائص React التي نريد الوصول إليها.

قراءة: JavaScript مقابل JQuery: الفرق بين JavaScript و JQuery

كيفية استخدام React Props؟

هناك طريقتان مختلفتان لاستخدام بيانات خصائص React الثابتة في أي مكون. هاتان الطريقتان هما عن طريق إضافة الخاصيّات إلى وظيفة ReactDom.render () في الملف الرئيسي أو عن طريق إضافة البيانات كعناصر افتراضية في المكوّن نفسه. إليك كيفية استخدام خصائص React في كلا الطريقتين:

استخدام دعامات React من وظيفة response.Dom.render ()

نحتاج أولاً إلى إضافة الخاصيّات في ملف المكوّن.

استيراد رد من "رد فعل" ؛ // استيراد مكتبة React

class example extends React.component {/ * المثال هو اسم المكون الذي يوسع خصائص فئة مكون React * /

يقدم - يجعل() {

إرجاع (

<div>

<h2> {this.props. firstProp } في h2 </h2>

<h3> {this، props. secondProp } في h3 </h3>

</div>

) ؛

}

}

مثال افتراضي للتصدير ؛ // تصدير المكون

نحتاج الآن إلى إضافة قيمة إلى الخاصيّات عبر وظيفة ReactDom.render () في الملف الرئيسي والوصول إليها من هناك.

استيراد رد من "رد فعل" ؛

استيراد ReactDom من "رد فعل دوم" ؛

استيراد مثال من "./Example.jsx" ؛

ReactDom.render (< مثال firstProp = "هذا هو firstProp " secondProp = "هذا هو secondProp " /> ، document.getElementById ('example')) ؛

مثال افتراضي للتصدير ؛

نتائج:

هذه هي المرة الأولى في h2

هذه هي الصورة الثانية في h3

استخدام دعامات React مع الدعائم الافتراضية في منشئ المكون

أضف الخاصيّات وقيمها في ملف المكوّن.

استيراد رد من "رد فعل" ؛ // استيراد مكتبة React

class example extends React.component {/ * المثال هو اسم المكون الذي يوسع خصائص فئة مكون React * /

يقدم - يجعل() {

إرجاع (

<div>

<h2> {this.props. firstProp } </h2>

<h3> {this، props. secondProp } </h3>

</div>

) ؛

}

}

مثال .deafultProps = {

firstProp : "هذا هو أولروب " ،

secondProp : "This is the secondProp "

}

مثال افتراضي للتصدير ؛ // تصدير المكون

الوصول إلى خصائص React من الملف الرئيسي.

استيراد رد من "رد فعل" ؛

استيراد ReactDom من "رد فعل دوم" ؛

استيراد مثال من "./Example.jsx" ؛

ReactDom.render (< مثال />، document.getElementById ('example')) ؛

ستكون نواتج هذا مماثلة لاستخدام وظيفة ReactDom.render () ، باستثناء أنه يتم هذه المرة بمساعدة الدعائم الافتراضية.

راجع: Vue vs React: الفرق بين Vue و React

كيفية تمرير دعامات التفاعل من مكون إلى آخر

الاستخدام الرئيسي لخصائص React هو تمرير البيانات بين المكونات في React. سيساعدنا المثال التالي في فهم كيفية تمرير البيانات.

استيراد رد من "رد فعل" ؛

صنف الفاكهة يمتد إلى React.Component {

يقدم - يجعل() {

إرجاع <h4> أنا {this.props. name } في h4 </h4>

}

}

يمتد سؤال فئة React.Component {

يقدم - يجعل() {

إرجاع (

<div>

<h3> أي فاكهة أنت؟ في h3 </h3>

< اسم الفاكهة = "مانجو" / > // إنشاء الدعائم وتعيين قيمة

</div>

) ؛

}

}

ReactDom.render (<Question />، document.getElementById ('فاكهة')) ؛

سيعطي هذا الناتج التالي:

أي فاكهة أنت؟ في h3

أنا مانجو في h4

استخدام الحالة والدعائم معًا

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

استيراد رد من "رد فعل" ؛

صنف السيارة يمتد إلى React.Component {

المُنشئ (الدعائم) {

سوبر (الدعائم) ؛

this.state = {

FirstCar: "هذه مرسيدس بنز! في h2 ”، // إسناد القيمة إلى الحالة

secondCar: "هذه سيارة BMW! في h3 ”// إسناد القيمة إلى الحالة

}

}

يقدم - يجعل() {

إرجاع (

<div>

<FirstCar firstProp = {this.state.firstCar} /> // تعيين قيمة للدعامات

<SecondCar secondProp = {this.state.secondCar} /> // إسناد قيمة إلى الخاصيات

</div>

) ؛

}

}

تمدد فئة FirstCar React.Component {

يقدم - يجعل() {

إرجاع (

<div>

<h2> {this.props.firstProp} </h2>

</div>

) ؛

}

}

تمدد فئة SecondCar React.Component {

يقدم - يجعل() {

إرجاع (

<div>

<h3> {this.props.secondProp} </h3>

</div>

) ؛

}

}

تصدير السيارة الافتراضية ؛

الآن ، نحتاج إلى الوصول إلى البيانات من الملف الرئيسي.

استيراد رد من "رد فعل" ؛

استيراد ReactDOM من "رد فعل دوم" ؛

استيراد سيارة من "./Car.jsx" ؛

ReactDOM.render (<Car />، document.getElementById ('car')) ؛

النتائج:

هذه مرسيدس بنز! في h2

هذه سيارة BMW! في h3

اقرأ أيضًا: الفرق بين Node JS و React JS

تلخيصها

إن الجمع بين كل من خصائص React وحالة إدارة البيانات في React يجعلها واحدة من مكتبات JavaScript الأكثر فائدة. هناك الكثير من أفكار مشاريع React المتاحة ، ولا يمكن إلا للمطورين منحها الحياة. لذلك ، هناك طلب ممتاز على مطوري ReactJS وزيادة في رواتبهم .

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

إذا كنت مهتمًا بمعرفة المزيد حول التفاعل والتطوير الشامل ، فراجع دبلومة PG upGrad & IIIT-B في تطوير البرامج الكاملة التي تم تصميمها للمهنيين العاملين وتقدم أكثر من 500 ساعة من التدريب الصارم ، و 9+ مشاريع ، والمهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.