React

युज़र इंटरफ़ेसिज़ के निर्माण के लिए एक जावास्क्रिप्ट लाइब्रेरी

वर्णनात्मक

React में इंटरैक्टिव यूआई बनाना काफी आसान है। अपने ऐप में प्रत्येक व्यू के लिए सरल विचार डिजाइन करें, और React कुशलता से आपके डेटा में बदलाव होने पर सिर्फ सही कौम्पोनॅन्ट को अपडेट और रेंडर करेगा।

वर्णनात्मक व्यू आपके कोड को अधिक अनुमानित और डिबग करने में आसान बनाते हैं।

कौम्पोनॅन्ट पर आधारित

इनकैप्सुलेटेड कौम्पोनॅन्ट का निर्माण करें जो उनके अपने व्यू को संभालते हैं, फिर उनसे कठिन यूआई निर्मित करें।

चूँकि कौम्पोनॅन्ट तर्क टेम्पलेट के बजाय जावास्क्रिप्ट में लिखे गए हैं, आप आसानी से अपने ऐप के माध्यम से समृद्ध डेटा पास कर सकते हैं और DOM से बाहर रख सकते हैं।

एक बार जानें, कहीं भी लिखें

हम आपके अन्य तकनिकी स्टैक के बारे में धारणा नहीं बनाते हैं। तो आप मौजूदा कोड को फिर से लिखे बिना React में नई सुविधाएँ बना सकते हैं।

React सर्वर पर भी रेंडर कर सकता है और आप React Native का उपयोग करके पावर मोबाइल ऐप भी बना सकते हैं।


एक साधारण कौम्पोनॅन्ट

React कौम्पोनॅन्ट एक render() मेथड लागू करते हैं जो इनपुट डेटा लेता है और यह दिखाता है कि क्या प्रदर्शित करना है। यह उदाहरण XML- जैसे सिंटैक्स का उपयोग करता है जिसे JSX कहा जाता है। इनपुट डेटा जिसे कौम्पोनॅन्ट में पास किया जाता है, उसे this.props के माध्यम से render() द्वारा एक्सेस किया जा सकता है।

JSX इच्छाधीन है और React का उपयोग करने के लिए इसकी आवश्यकता नहीं है। JSX द्वारा निर्मित जावास्क्रिप्ट कोड को देखने के लिए Babel REPL का उपयोग करें।

Loading code example...

एक स्टेटफुल कौम्पोनॅन्ट

इनपुट डेटा (this.props के माध्यम से पहुँचा) लेने के अलावा, एक कौम्पोनॅन्ट आंतरिक स्थिति डेटा (this.state के माध्यम से पहुँचा हुआ) बनाए रख सकता है। जब किसी कौम्पोनॅन्ट की स्थिति डेटा बदलती है, तो रेंडर किए गए मार्कअप को render() द्वारा अपडेट किया जाएगा।

Loading code example...

एक ऐप्लिकेशन

props और state का उपयोग करके, हम एक छोटी सी टूडू ऐप्लिकेशन बना सक्ते हैं। यह उदाहरण आइटम की वर्तमान सूची के साथ-साथ उपयोगकर्ता द्वारा दर्ज किए गए टेक्स्ट को ट्रैक करने के लिए state का उपयोग करता है। हालाँकि, ईवेंट हैंडलर को इनलाइन प्रदान किया जाना चाहिए, लेकिन उन्हें इवेंट डेलिगेशन का उपयोग करके एकत्र किया गया है।

Loading code example...

बाहरी प्लगइन्स का उपयोग कर एक कौम्पोनॅन्ट

React आपको अन्य लाइब्रेरीज और फ़्रेमवर्क्स के साथ इंटरफेस करने की अनुमति देती है। यह उदाहरण वास्तविक समय में <textarea> के मूल्य को परिवर्तित करने के लिए, remarkable, एक बाहरी मार्कडाउन लाइब्रेरी का उपयोग करता है।

Loading code example...