React.js से आरंभ करना

React.js एक है लचीला और घटक आधारित जावास्क्रिप्ट पुस्तकालय के लिए इंटरैक्टिव उपयोगकर्ता इंटरफेस का निर्माण. ये था फेसबुक द्वारा बनाया और खोला गया और ड्रॉपबॉक्स, AirBnB, पेपाल और नेटफ्लिक्स जैसी कई प्रमुख टेक कंपनियों द्वारा उपयोग किया जाता है। रिएक्ट डेवलपर्स को अनुमति देता है डेटा-हैवी ऐप्स बनाएं द्वारा दर्दरहित अद्यतन किया जा सकता है केवल आवश्यक घटकों को फिर से प्रस्तुत करना.

प्रतिक्रिया है से परत देखें MVC सॉफ्टवेयर डिजाइन पैटर्न, और यह मुख्य रूप से डोम हेरफेर पर केंद्रित है. जैसा कि इन दिनों हर कोई रिएक्ट के बारे में बात करता है, इस पोस्ट में हम एक नज़र डाल रहे हैं कि आप कैसे कर सकते हैं इसके साथ शुरुआत करें.

प्रतिक्रिया स्थापित करें

आप या तो रिएक्ट स्थापित कर सकते हैं एनपीएम पैकेज मैनेजर के साथ या द्वारा मैन्युअल रूप से आवश्यक पुस्तकालयों को जोड़ना अपने HTML पेज पर। यह अनुशंसित है बैबेल के साथ प्रतिक्रिया का उपयोग करना यह आपको अनुमति देता है ECMAScript6 सिंटैक्स और JSX का उपयोग करें आपके रिएक्ट कोड में.

यदि आप चाहते हैं मैन्युअल रूप से प्रतिक्रिया स्थापित करें, आधिकारिक डॉक्स के लिए सलाह देते हैं इस HTML फ़ाइल का उपयोग करें. आप पेज पर क्लिक करके डाउनलोड कर सकते हैं फ़ाइल> पेज को इस रूप में सहेजें ... आपके ब्राउज़र में मेनू। जिन लिपियों की आपको आवश्यकता होगी (रिएक्ट, रिएक्ट डीओएम, बैबेल) भी डाउनलोड हो जाएगी प्रतिक्रिया-example_files / फ़ोल्डर। उसके बाद, निम्न स्क्रिप्ट टैग जोड़ें आपके HTML दस्तावेज़ का अनुभाग:

उन्हें डाउनलोड करने के बजाय, आप प्रतिक्रिया स्क्रिप्ट जोड़ सकते हैं सीडीएन से भी.

आप भी उपयोग कर सकते हैं कीमा बनाया हुआ संस्करण उपरोक्त जावास्क्रिप्ट फ़ाइलों में से:

यदि आप बल्कि npm के साथ प्रतिक्रिया स्थापित करें, इसका उपयोग करने का सबसे अच्छा तरीका है रिएक्ट ऐप बनाएं फेसबुक इनक्यूबेटर द्वारा बनाया गया गितूब रेपो - यह भी समाधान है जिसे रिएक्ट डॉक्स सलाह देते हैं। रिएक्ट के अलावा, यह भी इसमें Webpack, Babel, Autoprefixer, ESLint, और अन्य डेवलपर टूल शामिल हैं. आरंभ करने के लिए, निम्नलिखित CLI कमांड का उपयोग करें:

 npm इंस्टॉल -g create-reaction-app create-react-app my-app cd my-app npm start 

जब आप तैयार हों, आप कर सकते हैं अपने नए रिएक्ट ऐप को एक्सेस करें पर स्थानीय होस्ट: 3000 यूआरएल:

अगर आप और पढ़ना चाहते हैं प्रतिक्रिया कैसे स्थापित करें, इसकी जाँच पड़ताल करो स्थापना दिशानिर्देश डॉक्स का.

प्रतिक्रिया और JSX

हालांकि यह अनिवार्य नहीं है, आप कर सकते हैं JSX सिंटैक्स का उपयोग करें अपने रिएक्ट ऐप्स में। JSX का मतलब है जावास्क्रिप्ट एक्सएमएल, और यह नियमित जावास्क्रिप्ट में ट्रांसपाइल्स. JSX का बड़ा फायदा यह है कि यह आपको अपनी जावास्क्रिप्ट फ़ाइलों में HTML शामिल करने देता है, इसलिए यह रिएक्ट तत्वों को परिभाषित करना आसान बनाता है.

यहाँ JSX के बारे में जानने के लिए सबसे महत्वपूर्ण बातें हैं:

1. टैग कि लोअरकेस के साथ शुरू करें (लोअर कैमल केस) का प्रतिपादन किया जाता है नियमित रूप से HTML तत्व.
2. टैग कि अपरकेस से शुरू करें (ऊपरी ऊंट मामले) प्रदान की जाती हैं प्रतिक्रिया घटकों के रूप में.
3. कोई भी कोड घुंघराले ब्रेस के भीतर लिखा है … व्याख्या की जाती है शाब्दिक जावास्क्रिप्ट के रूप में.

अगर आप इसके बारे में और जानना चाहते हैं प्रतिक्रिया के साथ JSX का उपयोग कैसे करें डॉक्स से और के लिए इस पृष्ठ को देखें डिफ़ॉल्ट JSX प्रलेखन आप JSX विकी पर एक नज़र डाल सकते हैं.

रिएक्ट तत्व बनाएं

प्रतिक्रिया एक है घटक आधारित वास्तुकला जिसमें डेवलपर्स बनाते हैं पुन: प्रयोज्य घटकों विभिन्न समस्याओं को हल करने के लिए। एक प्रतिक्रिया घटक कुछ या कई से मिलकर बनता है प्रतिक्रिया करने वाले तत्व वो हैं रिएक्ट ऐप्स की सबसे छोटी इकाइयाँ.

नीचे, आप देख सकते हैं एक प्रतिक्रियाशील तत्व का एक सरल उदाहरण जो HTML पेज पर क्लिक मी बटन जोड़ता है। HTML में, हम एक जोड़ते हैं

के साथ कंटेनर "MyDiv" आईडी जो होगी प्रतिक्रिया तत्व के साथ आबादी. हम एक के भीतर हमारे प्रतिक्रिया तत्व बनाते हैं

हम अपने रिएक्ट तत्व को रेंडर करते हैं ReactDOM.render () तरीका कौन कौन से दो आवश्यक पैरामीटर लेता है, प्रतिक्रिया तत्व (मुझे क्लिक करें) तथा इसका कंटेनर (document.getElementById ( 'myDiv'))। आप और अधिक पढ़ सकते हैं कैसे प्रतिक्रिया तत्वों काम करते हैं में “तत्वों का प्रतिपादन” डॉक्स का अनुभाग.

घटक बनाएँ

प्रतिक्रिया घटकों कर रहे हैं पुन: प्रयोज्य, स्वतंत्र यूआई इकाइयाँ जिसमें आप आसानी से डेटा अपडेट कर सकते हैं। एक घटक एक या कई रिएक्ट तत्वों से बना हो सकता है. रंगमंच की सामग्री कर रहे हैं मनमाना इनपुट्स आप किसी घटक को डेटा पास करने के लिए उपयोग कर सकते हैं। एक प्रतिक्रिया घटक जावास्क्रिप्ट कार्यों के समान काम करता है-हर बार जब यह लागू होता है, तो यह किसी प्रकार का आउटपुट उत्पन्न करता है.

आप या तो उपयोग कर सकते हैं क्लासिक फ़ंक्शन सिंटैक्स या नया ES6 वर्ग वाक्यविन्यास सेवा मेरे एक प्रतिक्रिया घटक को परिभाषित करें. इस लेख में, मैं बाद का उपयोग करूँगा, क्योंकि बैबेल हमें ECMAScript 6 का उपयोग करने की अनुमति देता है। यदि आप ईएस 6 के बिना एक घटक बनाने के बारे में रुचि रखते हैं, तो डॉक्स के घटक और सहारा पृष्ठ पर एक नज़र डालें.

नीचे, आप देख सकते हैं सरल प्रतिक्रिया घटक हम एक उदाहरण के रूप में बनाने जा रहे हैं। यह एक मूल सूचना है जिसे उपयोगकर्ता किसी साइट में लॉग इन करने के बाद देखता है। डेटा के तीन टुकड़े हैं मामले से मामले में परिवर्तन: उपयोगकर्ता का नाम, संदेशों की संख्या और सूचनाओं की संख्या, हम इन्हें पास करेंगे सहारा के रूप में.

प्रत्येक प्रतिक्रिया घटक एक जावास्क्रिप्ट वर्ग है जो फैली हुई है React.Component आधार वर्ग. हमारे घटक को बुलाया जाएगा आँकड़े क्योंकि यह उपयोगकर्ता को एक मूल आँकड़ा प्रदान करता है। पहले हम बनाएँ आँकड़े कक्षा उसके साथ वर्ग आँकड़े React.Component … का विस्तार करते हैं वाक्य रचना, फिर हम इसे स्क्रीन पर रेंडर करें फोन करके ReactDOM.render () विधि (हम पहले से ही पिछले अनुभाग में उपयोग कर चुके हैं).

 वर्ग आँकड़े React.Component रेंडर () रिटर्न ( 
 हाय this.props.name, आपके पास this.props.notifications नई सूचनाएं और this.props.messages नए संदेश. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 

का पहला तर्क ReactDOM.render () विधि के होते हैं हमारे रिएक्ट घटक का नाम (), तथा इसका सहारा है (नाम, सूचनाएं, तथा संदेशों) उनके मूल्यों के साथ। जब हम प्रॉप्स के मूल्यों की घोषणा करते हैं, तो स्ट्रिंग्स होना चाहिए उद्धरण चिह्नों में संलग्न (पसंद "जॉन डो") और संख्यात्मक मान घुंघराले कोष्ठक के भीतर (पसंद 3).

ध्यान दें कि जावास्क्रिप्ट के कारण, हम उपयोग किया गया कक्षा का नाम के बजाय कक्षा एक HTML टैग के लिए एक वर्ग विशेषता पारित करने के लिए (className = "सारांश").

मिलान HTML पृष्ठ निम्नलिखित है:

रिएक्ट डॉक्स में, कई अन्य अच्छे उदाहरण हैं रिएक्ट घटकों का निर्माण और प्रबंधन कैसे करें, तथा सहारा के बारे में और क्या जानना है.

आगे की पढाई

रिएक्ट के साथ, फेसबुक ने पेश किया एक नई तरह की रूपरेखा सामने के विकास में है कि एमवी * डिजाइन पैटर्न को चुनौती देता है. यदि आप बेहतर ढंग से समझना चाहते हैं कि यह कैसे काम करता है और आप इसके साथ क्या कर सकते हैं और क्या हासिल नहीं कर सकते हैं, तो यहां कुछ दिलचस्प लेख हैं जो मदद कर सकते हैं:

• फेसबुक का ब्लॉग पोस्ट पर उन्होंने रिएक्ट क्यों बनाया.
• एंड्रयू रे का शानदार ब्लॉग पोस्ट रिएक्ट के अच्छे और बुरे पर.
• पर कोड करने वाला कैसे प्रतिक्रिया और AngularJS तुलना करते हैं.
• FreeCodeCamp है कि क्या पर विचार टुकड़ा एमवीसी फ्रंट-एंड पर मृत है.
• हैकरनून के लेख पर रिएक्ट-संबंधित प्रदर्शन का अनुकूलन कैसे करें.