Şøķåŕą
06-15-2021, 10:00 AM
ما هي React js
يبدو من اسمها أنها مكتبة مبنية للبرمجة بلغة JavaScript تم بناؤها من قبل شركة فيسبوك، وهي مكتبة متخصصة بواجهات المستخدم، حيث تقدم طريقة سهلة وسلسلة وقوية في الوقت ذاته لبناء الواجهات وتخفف العبء عن المبرمجين أثناء بناء أي واجهة، وهي مبنية على أساس مفهوم الـ Component والذي يمكن إعادة استخدامه بسهولة فائقة دون الحاجة لبنائه مرة أخرى في كل مرة، ويشير الموقع الرسمي للمكتبة إلى قابلية استخدام المعلومات التي يتعلمها المبرمج عند تعلمه التعامل مع مكتبة React في كتابة كودات مختصة بالسيرفر عن طريق Node وبناء تطبيقات قوية للموبايل عن طريق React Native
أشهر ميزات React js
تشتهر React js بعدة ميزات تجعلها على رأس القائمة عند الحديث عن متطلبات سوق العمل ومنها:
التفاعل ضمن الواجهات
من السهل بناء واجهة تفاعلية مميزة باستخدام الرياكت، حيث تعتمد على الحالة في التنقل بين العناصر، يمكن بناء View لكل حالة تمر بها البيانات وستقوم الرياكت بالتنقل بمرونة بين الحالات عند حصول أي تغيير للبيانات، مما يجعلها توفر الكثير من العناء والجهد في بناء واجهات تفاعلية.
واجهات معتمدة على المكونات
تعتمد واجهات الرياكت على ترتيب مجموعة من المكونات المبنية بشكلٍ منفصل لتشكيل الواجهة، حيث يكون لكل مكون Component قواعده البرمجية الخاصة وحالاته وتفاعله مع البقية ويمكن بسهولة إعادة استخدامه في أي واجهة أخرى، وبما أن المكونات تبنى عن طريق لغة جافا سكريبت؛ فهذا يجعل من السهل تمرير ما يلزم من البيانات للمكونات وهذا بديل جيد لاستخدام القوالب الجاهزة.
تعدد الاستخدامات
يوضح الموقع الرسمي للرياكت إمكانية إعادة استخدامها في أماكن مختلفة، حيث يكفي أن تتعلم القواعد الأساسية لاستخدامها لتتمكن من بناء واجهات مرنة للمواقع الإلكترونية والانتقال لبناء برمجيات تتعلق بالسيرفر عن طريق استخدام Node، وأيضًا بناء تطبيقات موبايل قوية لمختلف المنصات عن طريق React Native.
ما هو Component
ذكرنا أن الرياكت تعتمد على المكونات وهنا أهم ما يجب معرفته حول المكونات Components بصفتها العنصر الأهم في الرياكت :
البساطة: تتميز المكونات ضمن الرياكت ببساطة تكوينها، حيث يمكننا كتابة اسم المكون أو حتى تعريف المكون بكامله ضمن العملية render والتي تأخذ البيانات اللازمة لتعيد لنا العناصر الواجب عرضها على الشاشة.
سهولة التحكم: تعتمد المكونات على الخصائص والحالات، أي أنه إذا كان العنصر زرًا مثلًا ونود استخدامه في مكان آخر؛ فعلينا فقط استدعاؤه بكتابة اسمه في المكان الواجب ظهوره فيه مع تمرير خاصية الاسم له دون الحاجة إلى أي كود إضافي، وبالنسبة للحالات فهي تتغير بتغير حالة التطبيق ففي مثالنا عند الاعتماد على الحالة ودون كتابة أي كود سيتغير اسم المكون.
بناء تطبيقات كاملة من المكونات: يمكن فقط بالاعتماد على المكونات وتغيير حالتها وخصائصها بناء تطبيقات كاملة ومرنة، حيث يمكن إضافة أي كود JavaScript إلى الواجهة بمرونة وبرمجة ما يلزم من المكونات وهذا كل شيء.
ما هو JSX
تدمج الرياكت بين التصميم والبرمجة الخاصة بالواجهات كما رأينا، ويكون ذلك عن طريق كتابة كود JSX وهو ليس كود جافا سكريبت وليس كود HTML، بل هو ناتج عن دمج هاتين اللغتين ظاهريًا لتنتج طريقة جديدة في الكتابة تسمى JSX، وهو اختياري أثناء استخدام الرياكت وهنا مثال عنها:
const element = <h1>Hello World!</h1>
وكما نرى فهذا الكود يحوي تعريف للعنصر element كما في الجافا سكريبت، ويحوي أيضًا عنصرًا يظهر كأنه HTML، حيت أن تاغات الـJSX تشبه تاغات الـHTML وتملك أسماء وخصائص وتاغات أبناء
التحكم بالحالة
تتم عمليات التحكم بالحالة ضمن الرياكت عن طريق آلية برمجية تبنى لكافة الحالات في التطبيق، حيث يتم استقبال البيانات من عدة مصادر إما داخل التطبيق أو من الإنترنت أو عن طريق المستخدم، يتلقى Dispatcher هذه البيانات ويخزنها في مخزن خاص بها، والتي تذهب بشكلٍ مباشر إلى العرض، وهذا يبين مدى بساطة عملية التحكم بالواجهات ولهذا السبب فإن التفاعل في الصفحات المبنية باستخدام الرياكت يكون سلس وسريع للغاية
يبدو من اسمها أنها مكتبة مبنية للبرمجة بلغة JavaScript تم بناؤها من قبل شركة فيسبوك، وهي مكتبة متخصصة بواجهات المستخدم، حيث تقدم طريقة سهلة وسلسلة وقوية في الوقت ذاته لبناء الواجهات وتخفف العبء عن المبرمجين أثناء بناء أي واجهة، وهي مبنية على أساس مفهوم الـ Component والذي يمكن إعادة استخدامه بسهولة فائقة دون الحاجة لبنائه مرة أخرى في كل مرة، ويشير الموقع الرسمي للمكتبة إلى قابلية استخدام المعلومات التي يتعلمها المبرمج عند تعلمه التعامل مع مكتبة React في كتابة كودات مختصة بالسيرفر عن طريق Node وبناء تطبيقات قوية للموبايل عن طريق React Native
أشهر ميزات React js
تشتهر React js بعدة ميزات تجعلها على رأس القائمة عند الحديث عن متطلبات سوق العمل ومنها:
التفاعل ضمن الواجهات
من السهل بناء واجهة تفاعلية مميزة باستخدام الرياكت، حيث تعتمد على الحالة في التنقل بين العناصر، يمكن بناء View لكل حالة تمر بها البيانات وستقوم الرياكت بالتنقل بمرونة بين الحالات عند حصول أي تغيير للبيانات، مما يجعلها توفر الكثير من العناء والجهد في بناء واجهات تفاعلية.
واجهات معتمدة على المكونات
تعتمد واجهات الرياكت على ترتيب مجموعة من المكونات المبنية بشكلٍ منفصل لتشكيل الواجهة، حيث يكون لكل مكون Component قواعده البرمجية الخاصة وحالاته وتفاعله مع البقية ويمكن بسهولة إعادة استخدامه في أي واجهة أخرى، وبما أن المكونات تبنى عن طريق لغة جافا سكريبت؛ فهذا يجعل من السهل تمرير ما يلزم من البيانات للمكونات وهذا بديل جيد لاستخدام القوالب الجاهزة.
تعدد الاستخدامات
يوضح الموقع الرسمي للرياكت إمكانية إعادة استخدامها في أماكن مختلفة، حيث يكفي أن تتعلم القواعد الأساسية لاستخدامها لتتمكن من بناء واجهات مرنة للمواقع الإلكترونية والانتقال لبناء برمجيات تتعلق بالسيرفر عن طريق استخدام Node، وأيضًا بناء تطبيقات موبايل قوية لمختلف المنصات عن طريق React Native.
ما هو Component
ذكرنا أن الرياكت تعتمد على المكونات وهنا أهم ما يجب معرفته حول المكونات Components بصفتها العنصر الأهم في الرياكت :
البساطة: تتميز المكونات ضمن الرياكت ببساطة تكوينها، حيث يمكننا كتابة اسم المكون أو حتى تعريف المكون بكامله ضمن العملية render والتي تأخذ البيانات اللازمة لتعيد لنا العناصر الواجب عرضها على الشاشة.
سهولة التحكم: تعتمد المكونات على الخصائص والحالات، أي أنه إذا كان العنصر زرًا مثلًا ونود استخدامه في مكان آخر؛ فعلينا فقط استدعاؤه بكتابة اسمه في المكان الواجب ظهوره فيه مع تمرير خاصية الاسم له دون الحاجة إلى أي كود إضافي، وبالنسبة للحالات فهي تتغير بتغير حالة التطبيق ففي مثالنا عند الاعتماد على الحالة ودون كتابة أي كود سيتغير اسم المكون.
بناء تطبيقات كاملة من المكونات: يمكن فقط بالاعتماد على المكونات وتغيير حالتها وخصائصها بناء تطبيقات كاملة ومرنة، حيث يمكن إضافة أي كود JavaScript إلى الواجهة بمرونة وبرمجة ما يلزم من المكونات وهذا كل شيء.
ما هو JSX
تدمج الرياكت بين التصميم والبرمجة الخاصة بالواجهات كما رأينا، ويكون ذلك عن طريق كتابة كود JSX وهو ليس كود جافا سكريبت وليس كود HTML، بل هو ناتج عن دمج هاتين اللغتين ظاهريًا لتنتج طريقة جديدة في الكتابة تسمى JSX، وهو اختياري أثناء استخدام الرياكت وهنا مثال عنها:
const element = <h1>Hello World!</h1>
وكما نرى فهذا الكود يحوي تعريف للعنصر element كما في الجافا سكريبت، ويحوي أيضًا عنصرًا يظهر كأنه HTML، حيت أن تاغات الـJSX تشبه تاغات الـHTML وتملك أسماء وخصائص وتاغات أبناء
التحكم بالحالة
تتم عمليات التحكم بالحالة ضمن الرياكت عن طريق آلية برمجية تبنى لكافة الحالات في التطبيق، حيث يتم استقبال البيانات من عدة مصادر إما داخل التطبيق أو من الإنترنت أو عن طريق المستخدم، يتلقى Dispatcher هذه البيانات ويخزنها في مخزن خاص بها، والتي تذهب بشكلٍ مباشر إلى العرض، وهذا يبين مدى بساطة عملية التحكم بالواجهات ولهذا السبب فإن التفاعل في الصفحات المبنية باستخدام الرياكت يكون سلس وسريع للغاية