React
प्रयोगकर्ता इन्टरफेसहरू सिर्जना गर्ने जाभास्क्रिप्ट लाइब्रेरी
घोषणात्मक
React ले संवादमूलक दृश्यहरु अथार्थ वेब एप्प बनाउन एकदम सजिलो पारिदिन्छ। आफ्नो एप्पको अबस्था अनुसार को दृश्यहरु बनाउनुहोस र React ले त्यसलाई चहिएकोबेला ठिक कम्पोनेंटलाई मात्र नवीनीकरण र प्रस्तुत गर्नेछ जतिबेला हजुर को एप्पको कुनै डाटा परिबर्तन हुनछ।
घोषणात्मक दृश्यहरुले तपाइको कोड अजै बुझिने, संकेत्माक, पूर्वानुमान गर्न सकिने बनाउछ र साथ् साथै केहि समस्या आए पनि समाधान (Debug) गर्न तेती गारो हुदेन।
कम्पोनेंट मा आधारित
इनकैप्सुलेटेड कम्पोनेंट बनाउनुहोस जसले आफ्नो अवस्था (state) आफै बेबस्थित गर्छ र त्यसपछि त्यसलाइ मिलाएर जटिल दृश्यहरु बनाउनुहोस।
प्राय जसो हामीले कम्पोनेंटमा तार्किक सोचहरु जावास्क्रिप्टमा लेख्छौ ना कि टेम्प्लेटमा जसकारण हामीले आबस्यक डेटा पठाउन सक्छौ र कम्पोनेंटको अवस्थालाई DOM बाट टाडा राख्छौ।
एकचोटी पढ्ने, जहाँपनि लेखने
तपाइले कुन अरु प्रबिधि प्रयोग गर्नु भएको छ त्यसमा हाम्रो कुनै धारणा छैन जसकारण तपाइले तेही प्रबिधि माथि वा ंगसंगै React मा एप्प बनाउन सक्नुन्छ।
<<<<<<< HEAD React तपाइले सर्भरमा Node को सहायताले पनि प्रयोग गर्न सक्नुन्छ वा React Native को सहायताले मोबाइल एप्प पनि बनाउन सक्नुनछ। ======= React can also render on the server using Node and power mobile apps using React Native.
2ef0ee1e4fc4ce620dce1f3e0530471195dc64d1
साधारण कम्पोनेंट
React कम्पोनेंटहरुले render() मेथड प्रयोग गर्छन जसले डाटाहरु लिग्छ र दृश्य फिर्ता दिन्छ। दिएको उधाहरणमा तपाइले देख्न् सक्नुन्छ, तेय्हा XML जस्तो ेखिने भाषा प्रयोग भयेको छ जसलाई हामी JSX भन्छौ र बाहिर बाट आएको डाटा येदि render() मेथडमा आब्सयेक भएमा this.props भित्र हुनेछ जसलाइ हामि प्रोप्स भन्छौ।
React एप्प बनाउदा JSX जरुरि हुदैन। JSX मात्र हामीलाई लेख्न सजिलो होस् भनेर गराएको हो। JSX अन्त्यमा परिबर्तन भएर साधारण जावास्क्रिप्टनै हुनेछ। तपाइले Babel REPL मा गएर पनि हेर्न सक्नुन्छ।
Loading code example...
स्टेटफुल कम्पोनेंट
एउटा कम्पोनेंटले बाहिरबाट आउने डाटा (this.props) मात्र नभई आफैले पनि डाटा राख्न सक्छ जसलाई हामीले स्टेटफुल कम्पोनेंट पनि भन्छौ।
आफ्नो निजि डाटा राख्न this.state प्रयोग हुन्छ जसलाई हामीले स्टेट भन्छौ र जब कम्पोनेंट को आफ्नो निजि स्टेट परिबर्तन हुन्छ React ले आब्सयेक HTML मात्र परिबर्तन गरिदिन्छ।
Loading code example...
साधारण एप्प
props र state प्रयोग गरेर हामीले एउटा साधारण टुडु एप्प बनाउन सक्छौ। दिएको उदहारणमा एप्पले state प्रयोग गरेर सुचीमा बस्तुहरु थप्ने, घटाउने वा अपडेट गर्छ र युजरले लेखेको डाटालाइ पनि स्टेटमा राख्छ। हेर्दा events हरु छुट्टा छुट्टै प्रयोग भएको देखिन्छ तर React ले event हरुलाई जम्मा गर्छ र एकमुस्ट ह्यान्डल गर्छ जसलाई हामि event delegation पनि भन्छौ।
Loading code example...
बाहिरि पल्गिन प्रयोग गरिएको कम्पोनेंट
React कुनै पनि बाहिरि लाइब्रेरी वा फेरेम्वोर्क संग काम गर्न सक्छ। दिएको उदहारणमा हेर्नु भयो भने तेस्मा हामीले remarkable भन्ने बाहिरि लाइब्रेरी प्रयोग गरेकोछौ जसले <textarea> को डाटालाई रियल टाईममा परिबर्तन गरिदिन्छ।