We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

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.

جاري تحميل مثال الشيفرة البرمجية...

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

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

جاري تحميل مثال الشيفرة البرمجية...

تطبيق

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

جاري تحميل مثال الشيفرة البرمجية...

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

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

جاري تحميل مثال الشيفرة البرمجية...