React

مكتبة JavaScript لبناء واجهات المستخدم

تصريحي

React يجعل انشاء واجهات المستخدم التفاعلية سهل للغاية، فقط يجب عليك تصميم واجهة بسيطة لكل حالة من حالات التطبيق و بعدها React يتكفل وبفاعلية بتحديث و اعادة رسم المكّون المعني بالتحديث فقط عند تغيُّر البيانات.

الواجهات المعرّفة (التصريحية)، تجعل الشيفرة الخاصة بالبرنامج سهلة التوقع عند تنفيذيها و سهلة التصحيح في حالة وجود أخطاء.

يستند على المكوّن

يعتمد React بشكل أساسي على مفهوم المكوّنات (Components). حيث يجب عليك بناء مكوّنات مُغلَّفة تُدير حالتها الخاصّة، ومن ثمّ تُركِّب هذه المكوّنات مع بعضها لإنشاء واجهات مستخدم مُعقّدة.

ولمّا كان منطق المكوّنات مكتوب باستخدام JavaScript بدلًا من صيغة القوالب، فبإمكانك تمرير الكثير من البيانات عبر تطبيقك بسهولة وإبقاء الحالة بعيدة عن DOM.

تعلّم مرّة، واكتب في أي مكان

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

يُمكِن تصيير React من جهة الخادم باستخدام Node.js، ويمكن إنشاء تطبيقات الهواتف الذكية عبر React Native


مكّون بسيط

كل مكوّن React مزوّد بالدّالة Render() التي تأخذ البيانات المدخلة و تُرجع ما يجب اظهاره. هذا المثال يستخدم تعابير تشبه XML أي (XML-Like) و التي تسمى JSX. البيانات المرسلة خلال المكّون يمكن الوصول اليها ضمن الدالة Render() بواسطة this.props.

استخدام JSX اختياري، وليس مطلوباً او شرطاً لاستخدام React. جرّب Babel REPL لترى شيفرة الـ JavaScript الخام الموّلدة من خلال خطوة التحويل البرمجي لـ JSX.

Loading code example...

مكوّن الحالة (Stateful)

بالإضافة الى أخذ بيانات الادخال (التي يمكن الوصول اليها من خلال this.props)، يستطيع المكوّن ان يحتفظ بحالة بياناته الداخلية (التي يمكن الوصول اليها من خلال this.state) . عندما تتغير حالة بيانات المكوّن، العلامات المرسومة أو المُظهرة سيتم تحديثها و إعادة رسمها من خلال إعادة تنفيذ الدّالة render().

Loading code example...

تطبيق

باستخدام props و state، نستطيع ان ننشأ برنامج صغير يعرض قائمة المهام التي يجب القيام بها (Todo list). هذا المثال يستخدم state لمتابعة العناصر الموجودة في القائمة الحالية بالإضافة الى متابعة النص المُدخل من قبل المستخدم. على الرغم من أن معالجات الأحداث تبدو وكأنها مُضمّنة ، إلا أنه سيتم جمعها وتنفيذها باستخدام تفويض الحدث.

Loading code example...

مكوّن يستخدم مكتبة خارجية

يسمح React باستخدام مكتبات (Libraries) خارجية بالإضافة الى Frameworks. هذا المثال يستخدم المكتبة remarkable كمكتبة خارجية لمعالجة تعابير من نوع Markdown، لتحويل قيمة <textarea> بشكل آني.

Loading code example...