GeezerVison

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

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

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

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

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