👩🏻‍🎨 🚛 👨🏼‍⚕️ संक्षेप में ReactJS। भाग 1 👆🏽 🏴󠁧󠁢󠁳󠁣󠁴󠁿 👩🏾‍🤝‍👩🏽

शुभ दोपहर, प्रिय पाठकों।

हाल ही में, इस तरह के एक अद्भुत ढांचे के रूप में React.js का Habré पर तेजी से उल्लेख किया गया है। मैं अब उसके साथ 4 महीने से काम कर रहा हूं, इसलिए मैंने इसका उपयोग करने के अपने अनुभव को साझा करने का फैसला किया। लेखों की एक छोटी श्रृंखला बनाने का निर्णय लिया गया, जो कि रूपरेखा का सबसे संक्षिप्त पूर्ण मार्गदर्शक बनना चाहिए। यह हैबे पर मेरा पहला प्रकाशन है, इसलिए कृपया बहुत कठोरता से न्याय न करें। मेरा मुख्य कार्य दृष्टिकोणों और प्रथाओं के बारे में बताना है, द्वितीयक उन लोगों से पता लगाना है जो प्रतिक्रिया का उपयोग करते हैं कि वे इसके साथ कैसे काम करते हैं और कैसे उन्होंने कुछ मामलों को हल किया जो उनके काम में उत्पन्न हुए। और हां, रूपरेखा समुदाय का विस्तार करें। मैंने शुरुआत छोटे सार-पालना के रूप में की थी। और उसके बाद ही अभ्यास करें।

* संक्षेप में, ओ'रिली पब्लिशिंग हाउस की किताबों की एक प्रसिद्ध श्रृंखला, बहुत ही अभिव्यक्ति का अर्थ है: आगे की व्याख्या के बिना बोलें (लेखक का)

पहले लेख में मैं दिखाऊंगा कि सबसे सरल पृष्ठ कैसे बनाया जाए जिसमें बहुत न्यूनतम गतिशीलता होगी। बुनियादी दृष्टिकोण, चाल और कुछ छोटी चाल। यदि संभव हो, तो पूरे कोड को सबसे छोटा विवरण माना जाएगा। एक छोटी रिपॉजिटरी मेरी इसमें मदद करेगी: https://github.com/Aetet/react-article

प्रत्येक परिवर्तन का एक संगत टैग होता है। उनमें से प्रत्येक के लिए विवरण रास्ते में घोषित किए जाएंगे।

सारांश

यह क्या है और यह क्या खाता है?

रिएक्ट माना जाता है कि फेसबुक से सिर्फ एक व्यू फ्रेमवर्क है। हां, डेवलपर्स थोड़ा आत्मा-पकड़ने वाले हैं, जो आपने मार्केटिंग के लिए नहीं किया है। रिएक्ट वास्तव में एक दृश्य-उन्मुख एमवीसी रूपरेखा है, हालांकि यह पहली नज़र में ऐसा नहीं लगता है। लेख के अंत तक, मैं तीनों तत्वों की उपस्थिति का प्रदर्शन करूँगा। सुविधा के लिए, रिएक्ट एक्सएमएल-जैसे सिंटैक्स का उपयोग करता है। चूंकि डिफ़ॉल्ट निर्माण समान हैं:

<div>Hello {this.props.name}</div>

स्पष्ट रूप से जेएस के लिए अमान्य होगा, जेएसएक्स प्रारूप का आविष्कार किया गया था। दृश्यता डिजाइनर के लिए दृश्यता और त्वरित शुरुआत, दृष्टिकोण का मुख्य लाभ। इसे रिएक्ट-टूल्स का उपयोग करके संसाधित किया जाता है और फॉर्म के नियमित जेएस-निर्माण में बदल जाता है:

 React.DOM.div(null, "Hello ", this.props.name);

प्रतिक्रिया के बारे में पहले ही कहा जा चुका है:

andreypopp.com/moscowjs-react/#0 इस प्रस्तुति में, @andreypopp रूसी में प्रतिक्रिया की शर्तों और बुनियादी अवधारणाओं को पूरी तरह से समझाता है।
habrahabr.ru/post/189230 बहुत छोटा परिचय।
habrahabr.ru/post/217295 प्रतिक्रिया के आंतरिक तंत्र पर एक अद्भुत लेख का अनुवाद, जो मूल जादू करता है।

मुख्य शब्द:

हेल्पर कई अलग-अलग तरीकों से एक ऑब्जेक्ट है जो रूपांतरण ऑपरेशन करता है। उदाहरण के लिए, वे तिथि को प्रारूपित करते हैं, देखने के लिए कक्षाओं का पाठ प्रतिनिधित्व बनाते हैं, आदि।

प्रबंधक - एक ऑब्जेक्ट जिसमें एप्लिकेशन के सर्वर भाग के साथ बातचीत करने के तरीके हैं। सर्वर से डेटा प्राप्त करना, सहेजना हमेशा एक महत्वपूर्ण हिस्सा होता है, इसलिए इसका एक विशेष स्थान होता है।

प्रॉप्स - वह डेटा जो रेंडर करते समय विजेट को पास किया जाता है।

राज्य - विजेट की आंतरिक स्थिति को संग्रहीत करता है (उदाहरण के लिए, यह खुला, सक्रिय, छिपा हुआ है, आदि)

घटक - कार्यक्षमता का एक ब्लॉक जो इसके लिए विशिष्ट कार्य करता है।

ढांचे की मुख्य विशेषताएं:

घोषणात्मक दृष्टिकोण
स्टेटलेस घटक।
सामान्यीकरण करना
मूल डोम कार्यान्वयन
यूनिक्स-वे के बाद।
घटकों की संरचना को लागू करने और उन्हें पुन: उपयोग करने की क्षमता।

अभ्यास

खैर, विपणन और परिचयात्मक भाग के साथ, हम सार की ओर मुड़ते हैं: एक विजेट बनाना। HelloWorld को रिएक्ट पेज पर भी देखा जा सकता है। इसलिए, हम उदाहरण के लिए कुछ और अधिक जटिल - एक बुकिंग पृष्ठ लिखेंगे।

समस्या का बयान

हम उस पर क्या रखेंगे? व्यवसाय बुकिंग के लिए क्या आवश्यक है? आइए इसे शुरुआत के लिए करें:

उस व्यक्ति के नाम, उपनाम, लिंग का संकेत करने वाला एक रूप जिसके लिए हम एक स्थान आरक्षित करेंगे।
बटन सबमिट करें।

कार्य बहुत सरल है, लेकिन इस पर आप बुनियादी मामलों और अवधारणाओं को अच्छी तरह से तोड़ सकते हैं। टूल को उजागर करने और github https://github.com/Aetet/react-article के बारे में याद करने का समय

परियोजना को गल्प, वेबपैक, स्टाइलस, बूटस्ट्रैप पर एक मॉड्यूलर प्रणाली का उपयोग करके बनाया गया था। सब कुछ कॉन्फ़िगर किया गया है और उपयोग के लिए तैयार है। इसलिए, आपको न्यूनतम तैयारी करने की आवश्यकता है:

npm स्थापित के माध्यम से निर्भरता में कमी।
दौड़ना।

इस लेख में मैं गल्प, वेबपैक के विन्यास और उपयोग पर चर्चा नहीं करूंगा। मुझे यकीन है कि एक पूछताछ करने वाला हैबर पाठक खुद इस मुद्दे पर जानकारी प्राप्त करेगा।

संगठन संरचना।

अराजकता हमेशा आदेश जीतती है क्योंकि यह बेहतर संगठित है।

टेरी प्रचेत

प्रारंभिक स्थिति: टैग शुरू करें ।

अंतिम स्थिति: पहला-स्थैतिक टैग।

सबसे पहले, हम सामान्य स्थैतिक सामग्री को रेखांकित करते हैं, और फिर गहराई तक जाते हैं:

हम आधार से शुरू करते हैं:

 /** @jsx React.DOM */ var React = require('react'); var Index = React.createClass({ render: function () { return ( <div> <div>Booking</div> </div> ); } }); React.renderComponent( <Index /> , document.querySelector('.appl'));

एक नया विजेट बनाने में कई भाग होते हैं:

हम React.createClass का उपयोग करते हुए सूचकांक घटक के लिए एक वर्ग बनाते हैं।
एक रेंडर फ़ंक्शन बनाएँ जिसमें एक टेम्प्लेट हो।
हम इसे आवश्यक प्रारंभिक प्रॉप्स डेटा और एक चयनकर्ता पास करके कक्षा प्रदान करते हैं जहां तत्व प्रदान किया जाएगा।

इसलिए हमें अपना पहला इंडेक्स मिला।

हम अपने आवेदन को ऊपर से नीचे और नीचे से शुरू करते हैं। हमारे लिए मूल तत्व घटक बुकिंग होगा। इसके अलावा, हमारे पास पृष्ठ पर दो मुख्य ब्लॉक हैं:

यात्री सूचना।
बटन सबमिट करें

इसलिए, हम Components'y पैसेंजरइन्फो और सबमिट बनाते हैं। अंदर हम सिर्फ स्थैतिक HTML डालते हैं।

 /** * @jsx React.DOM */ var React = require('react'); var PassengerInfo = React.createClass({ render: function () { return ( <div> <span > <label></label> <input type="text" name="firstName" /> </span> <span > <label></label> <input type="text" name="lastName" /> </span> <div className="controls"> <span className="btn-group"> <span className="btn">M</span> <span className="btn">F</span> </span> </div> </div> ); } }); module.exports = PassengerInfo;

राज्य का निर्माण।

मैंने अक्सर देखा है कि भगवान, सस्ते साहित्यिक क्लिच का एक नशा दिखाते हुए, अक्सर हमें अपनी आंतरिक स्थिति को दर्शाते हुए मौसम भेजते हैं।

स्टीफन फ्राई

प्रारंभिक अवस्था: पहली-स्थैतिक

अंतिम स्थिति: initialState-propTypes

अब हमने मूल संरचना तैयार कर ली है, हम अपनी बुकिंग विजेट में राज्य जोड़ देंगे।

बुकिंग के लिए getInitialState विधि जोड़ें।

 getInitialState: function () { return { firstName: '', lastName: '', gender: '' }; }

बुकिंग विजेट के पहले रेंडरिंग में, यह फंक्शन लौटा हुआ ऑब्जेक्ट के साथ भरता है। हम स्टेट से कंपोनेंट पैसेंजरइन्फो में वैल्यू पास करते हैं।

 <PassengerInfo firstName={this.state.firstName} lastName={this.state.lastName} gender={this.state.gender} />

पहले नाम, अंतिम नाम, लिंग अब पैसेंजरइन्फो घटक के लिए सहारा है।

यह सुनिश्चित करने के लिए कि हमारे लिए सही प्रॉपर प्रकार पारित किए गए थे, सत्यापन जोड़ें:

 propTypes: { firstName: React.PropTypes.string, lastName: React.PropTypes.string, gender: React.PropTypes.string }

अब, यदि गुणों में से एक का प्रकार स्ट्रिंग नहीं है, तो कंसोल में हमें एक अद्भुत चेतावनी मिलेगी:

चेतावनी: अमान्य प्रस्ताव `firstName` प्रकार का 'ऑब्जेक्ट'` यात्रीइन्फो`, अपेक्षित `स्ट्रिंग` को आपूर्ति की।

The description of प्रलेखन में getInitialState यहाँ:

facebook.github.io/react/docs/component-specs.html#getinitialstate

propTypes:

facebook.github.io/react/docs/component-specs.html#proptypes

स्थिति बदलें।

अगर मेरी बेटी मुझे "बेवकूफ" शब्द के साथ एक बिल्ला देगी, तो मैं इसे लगाऊंगा।

ह्यूग लॉरी

प्रारंभिक स्थिति: initialState-propTypes टैग

अंतिम स्थिति: हैंडल टैग

शायद यह थोड़ा सीखने के लायक है कि आवेदन में क्या हो रहा है, इसे कैसे ट्रैक किया जाए और हैंडलर को ठीक से कैसे प्रबंधित किया जाए।

इनपुट परिवर्तनों की निगरानी के लिए, ऑनचेंज हैंडलर जोड़ें:

 var PassengerInfo = React.createClass({ handleChange: function (e) { var target = e.target, name = target.name, value = target.value; this.props.onChange(name, value); }, render: function () { return ( ... <input onChange={this.handleChange} type="text" name="firstName" value={this.props.firstName} /> ... ); } });

रिएक्ट में, यह नियमित रूप से ऑनचेंज के व्यवहार से थोड़ा अलग है। अधिक जानकारी

इस मामले में तर्क (e)

एक SynteticReactEvent है, न कि एक Dventvent, क्योंकि यह पहली नज़र में लग सकता है। ऑब्जेक्ट को विशेष रूप से क्रॉस-ब्राउज़र कार्य के लिए प्रयोगशाला स्थितियों में तैयार किया गया था और उगाया गया था। कुछ आरक्षण के साथ।

हम्म। जाहिरा तौर पर, माता-पिता विजेट में डेटा स्थानांतरित करने के लिए एक बहुत ही महत्वपूर्ण क्षण आ गया है। कुछ भी आसान नहीं है। हमें बस छत पर एक मोप के साथ पड़ोसी को शीर्ष पर दस्तक देने की आवश्यकता है। ऐसा करने के लिए, प्रॉपर पैसेंजरइन्फो में बुकिंग के लिए ऑनक्रॉस फ़ंक्शन जोड़ें।

 var Booking = React.createClass({ handleChange: function (name, value) { var state = {}; state[name] = value; this.setState(s tate); }, render: function () { return ( <div> <PassengerInfo firstName={this.state.firstName} lastName={this.state.lastName} gender={this.state.gender} onChange={this.handleChange}/> <Submit /> </div> ); } });

इस प्रकार, शीर्ष बुकिंग विजेट की स्थिति हमेशा अद्यतित होती है। और राज्य बाल विगेट्स की स्थिति को दर्शाता है।

आप ईवेंट हैंडलर के बारे में अधिक पढ़ सकते हैं जो तत्व यहां हैं:

facebook.github.io/react/docs/events.html

facebook.github.io/react/docs/dom-differences.html

पुराने ब्राउज़रों के समर्थन के बारे में:

facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills

पुन: प्रयोज्य विगेट्स।

हम नहीं जानते कि पिल्ला के अंदर क्या है और वह क्या महसूस करता है। शायद यह दिखावा भी है।

इसाक असिमोव

प्रारंभिक स्थिति: हैंडल टैग।

अंतिम स्थिति: लिंग-स्विचर टैग।

निजी तौर पर, मुझे अंदर बहुत ही सरल बातचीत के साथ छोटे विचार पसंद हैं। पैसेंजरइन्फो में, मेरे स्वाद के लिए, बहुत अधिक लेआउट है। इसलिए, मैं एक अलग GenderSwitcher में लिंग चयन विजेट का चयन करूँगा और इसे पुन: उपयोग करने योग्य बनाऊँगा। पुन: प्रयोज्य विगेट्स आमतौर पर आम / विजेट में संग्रहीत होते हैं।

एक विजेट के लिए वास्तव में पुन: प्रयोज्य होने के लिए, इसके लिए स्पष्ट इनपुट और आउटपुट डेटा होना चाहिए। जाहिर है, इस विजेट के लिए डिफ़ॉल्ट मंजिल इनपुट होगा, चयनित मंजिल आउटपुट होगा। खैर, सब कुछ सरल है। हम पिछले उदाहरण के साथ सादृश्य द्वारा कार्य करते हैं और प्राप्त करते हैं:

 var GenderSwitcher = React.createClass({ propTypes: { gender: React.PropTypes.string }, handleClick: function (e) { var target = e.target, type = target.dataset.type; this.props.handleGender(type); }, render: function () { return ( <span className="btn-group"> <span data-type="m" className="btn" onClick={this.handleClick} ></span> <span data-type="f" className="btn" onClick={this.handleClick} ></span> </span> ); } });

हम जिस विशेष तत्व पर क्लिक करते हैं, उसके बारे में जानकारी प्राप्त करने के लिए हम डेटा-विशेषता का उपयोग करते हैं। इन विशेषताओं तक पहुँचने के लिए, हम केवल तत्व के डेटासेट गुण को देखें। दुर्भाग्य से, मुझे आधिकारिक दस्तावेज में सटीक स्थान याद नहीं है जहां यह कहा गया है। इसलिए, मुझे इस बिंदु के लिंक के साथ लेख को पूरक करने में खुशी होगी।

ध्यान !!! यह दृष्टिकोण नए संस्करण के साथ अप्रचलित हो सकता है:

github.com/facebook/react/issues/1259

बेशक, आप एक ही हैंडलचेंज हैंडलर के माध्यम से सभी प्रसंस्करण कर सकते हैं, लेकिन मैं यूनिक्स-वे के साथ रहना पसंद करता हूं। एक कार्य - एक उद्देश्य। इसलिए, एक हैंडल हैंडलर जोड़ें।

 var PassengerInfo = React.createClass({ ... handleGender: function (type) { this.props.onChange('gender', type); }, ... });

अब, यह सुनिश्चित करने के लिए कि जब लिंग को बदल दिया जाता है, तो इसे राज्य में सहेजा जाता है, Booking.ssx के शीर्ष विजेट में कंसोल.लॉग लगाएं। हम पृष्ठ खोलते हैं, एम पर क्लिक करते हैं, और वास्तव में - कंसोल में लिंग बदल गया है।

समय नियंत्रित-घटक'व।

लोग अतिसंवेदनशील भी हैं। क्या किसी को आपको नियंत्रित करने का प्रयास करना चाहिए, और आप का पालन करना चाहिए। कभी-कभी मुझे लगता है कि आप इसे पसंद करते हैं।

डॉक्टर जो

प्रारंभिक स्थिति: जेंडरस्विच टैग

अंतिम स्थिति: नियंत्रित ।

इनपुट प्रदर्शन परिवर्तन करें और नियंत्रित करें।

ऐसा करने के लिए, इनपुट में मूल्य जोड़ें, जिसमें हम प्राप्त प्रॉप्स का मूल्य लिखेंगे।

 <input onChange={this.handleChange} type="text" name="firstName" value={this.props.firstName} />

ध्यान दें !!! अगर हम बस करते हैं

 <input type="text" name="firstName" value="Vasya" />

, तो इनपुट नहीं बदलेगा।

इस व्यवहार पर अधिक:

facebook.github.io/react/tips/controlled-input-null-value.html

मैं सभी इनपुट को यथासंभव नियंत्रित करने की सलाह देता हूं, ताकि प्रत्येक इनपुट पर आपका पूर्ण नियंत्रण हो। यह तत्व के व्यवहार को बदलने में मदद करेगा यदि नई आवश्यकताएं आती हैं।

उपयोगिता सुविधाएँ।

सिर्फ इसलिए कि वे आपकी सेवा करते हैं इसका मतलब यह नहीं है कि वे आपको पसंद करते हैं।

क्लर्कों

प्रारंभिक स्थिति: नियंत्रित टैग

अंतिम स्थिति: व्यूपर टैग

जेंडरस्विच के लिए तर्क काम करता है, लेकिन परिवर्तन का कोई दृश्य प्रदर्शन नहीं है। खैर, इसे जोड़ें।

अनिवार्य रूप से, एक GenderSwitcher परिवर्तन केवल इस .props.gender में एक परिवर्तन है

इसलिए, हम निम्न कार्य करेंगे: इस पर निर्भर करता है कि यह .props.gender आ गया है, हम सक्रिय तत्व वर्ग को जोड़ेंगे या हटाएंगे। चूंकि मैं अभी भी यूनिक्स-वे का पालन करता हूं, इसलिए मैं बाहरी सहायक फ़ंक्शन का उपयोग करके ऐसा करूंगा।

यह बहुत सरल होगा:

 var GenderViewHelper = { generateMaleClass: function (gender, defaultClasses) { var className = defaultClasses.join(' '), activeClass = (gender === 'm') ? ' btn-primary' : ''; return className + activeClass; } };

इसी तरह, हम महिला के लिए करते हैं।

हां, निश्चित रूप से, आप रिफैक्टरिंग कर सकते हैं, कक्षाओं के लिए वैश्विक सहायक समारोह को उजागर कर सकते हैं, लेकिन, मेरी राय में, यह समय से पहले का अनुकूलन है।

इसके अलावा एक और चाल है:

facebook.github.io/react/docs/class-name-manipulation.html

रेंडर फ़ंक्शन थोड़ा बदल जाता है:

 render: function () { var maleClass = GenderViewHelper.generateMaleClass(this.props.gender, ['btn']); var femaleClass = GenderViewHelper.generateFemaleClass(this.props.gender, ['btn']); return ( <span className="btn-group"> <span data-type="m" className={maleClass} onClick={this.handleClick} ></span> <span data-type="f" className={femaleClass} onClick={this.handleClick} ></span> </span> ); }

सर्वर डाटा स्पिरिट्स को कॉल करना

- मैं रसातल से आत्माओं को बुलवा सकता हूँ!

"और मैं कर सकता हूँ, और हर कोई कर सकता है।"

एकमात्र सवाल यह है कि क्या वे कॉल पर आएंगे।

शेक्सपियर। हेनरी IV।

प्रारंभिक स्थिति: viewHelper टैग

अंतिम स्थिति: सेव-सर्वर टैग

लेख फिनिश लाइन पर जाता है, इसलिए यह समेकित और सहेजने का समय है। हमारे डेटा को सर्वर पर भेजें।

ऐसा करने के लिए, बटन के लिए एक क्लिक हैंडलर जोड़ें:

 var Submit = React.createClass({ handleClick: function () { this.props.onSubmit(); }, render: function () { return ( <div className="form-actions"> <button className="btn btn-primary" onClick={this.handleClick}>Submit</button> </div> ); } });

और हम इस हैंडलर को रूट विजेट में पकड़ लेंगे।

 var Booking = React.createClass({ ... handleSubmit: function () { var dataForServer = clone(this.state); BookingManager.saveData(dataForServer) .then(function (successMsg) { alert(successMsg); }) .fail(function (err) { console.log('err when save', err); }); }, render: function () { return ( ... <Submit onSubmit={this.handleSubmit}/> ... ); } });

पहली नकल के बिना तरीकों के अंदर वस्तुओं को पारित करना मेरे स्वाद के लिए बुरा अभ्यास है। आप कभी नहीं जानते हैं कि फ़ंक्शन के अंदर ऑब्जेक्ट को कौन बदलेगा, कुछ हैक लगाएंगे, और फिर देखो, प्रार्थना करें, नखरे पर दस्तक दें। इसलिए, अपरिवर्तनीय डेटा संरचना के साथ काम करना अच्छा अभ्यास है। बेशक, क्लोनिंग का मेरा कार्यान्वयन अपूर्ण है, लेकिन सामान्य पुस्तकालय कार्यों को जोड़ने के लिए कोई भी परेशान नहीं करता है।

लेकिन प्रबंधक के बारे में क्या है, जो डेटा बचाता है?

 var Vow = require('vow'); var BookingManager = { saveData: function (data) { var dfd = Vow.defer(); setTimeout(function () { dfd.resolve('Hello, Habra!' + JSON.stringify(data)); }, 1000); return dfd.promise(); } }; module.exports = BookingManager;

जैसा कि आप देख सकते हैं, saveData सर्वर से प्रतिक्रिया का एक सरल अनुकरण है। डिफ़र की आवश्यकता मुख्य रूप से सुविधाजनक काम के लिए होती है, अगर आपको अचानक कई घटनाओं की प्रतीक्षा करने की आवश्यकता होती है, और एसिंक्रोनसी के लिए पूर्ण समर्थन के लिए।

हमारे पास एक स्पष्ट घटक जीवन चक्र है:

रेंडर दृश्य
दृश्य हैंडलर का जवाब देते हैं
हैंडलर्स रूट विजेट - नियंत्रक पर कॉलबैक का नियंत्रण पास करते हैं।
हम स्टेट स्टोरेज में डाटा सेव करते हैं।
राज्य एक परिवर्तन घटना उत्पन्न करता है।
दृश्य फिर से प्रस्तुत किए जाने लगते हैं।
और स्थिति एक नए घेरे में चली गई।

एक आफ्टरवर्ड के बजाय।

फिर भी, एमवीसी-आधारित रिएक्ट कुछ भी विदेशी नहीं है। एम - राज्य। हां, हम अपने डेटा को राज्य में सहेजते हैं, एक परिचित मॉडल क्या नहीं है? इसके अलावा, यह घटनाओं का उत्सर्जन करता है और घटक के जीवन चक्र में परिवर्तन का कारण बनता है। वी - संपूर्ण रेंडर फ़ंक्शन, यह एक बड़ा दृश्य है, जिसे टेम्पलेट के साथ पार किया गया था। सी रूट विजेट है, नियंत्रक की भूमिका के लिए एक आदर्श उम्मीदवार है, इसमें ~~व्यवसाय पैसे से मिलता है;~~ डेटा प्रॉप्स कंपोनेंट - वी - वी के माध्यम से अपनी यात्रा शुरू करता है और एम - राज्य में मांग पर स्थित है।

इस प्रकार, रिएक्ट के रचनाकारों ने बहुत सुरुचिपूर्ण ढंग से एक लंबे समय से ज्ञात पैटर्न के कार्यान्वयन के लिए संपर्क किया। MVC को अलग-अलग अक्षरों में विभाजित करने के बजाय, उन्होंने उनके बीच जीवनचक्र को विभाजित किया। और यह निकला, स्पष्ट रूप से, बहुत अच्छा। अब मैं विश्वास के साथ कह सकता हूं कि रिएक्ट मेरा पसंदीदा उपकरण है, जिससे मुझे काम करने में बहुत खुशी मिलती है। बेशक, उसकी खामियां हैं और उसके घाव हैं। हालांकि, उनमें से प्रत्येक के लिए आप एक समाधान या हैक पा सकते हैं। दरअसल, अब लोग इस पर काम कर रहे हैं, जिनके लिए हैकाथॉन कॉरपोरेट कल्चर का हिस्सा है।

अगर हेब्रोसोकीटी को लेख पसंद आया, तो मैं रिएक्ट के बारे में एक और लेख लिखूंगा।

इसमें, निम्नलिखित विषयों को शामिल करने की मेरी योजना है:

बड़े पैमाने पर रीफैक्टरिंग।
एक सरल रूप से जटिल रूप में जटिल गतिशील व्यवहार के साथ स्केलिंग।
प्रबंधक के दूसरे आने या आवश्यकताओं में फिर से बदलाव आया है।
नुकसान की प्रतिक्रिया।
कैसे चालाक jQuery से बचने के लिए।
UPD: स्टेटलेस घटक
रूटिंग और एप्लिकेशन का सामान्य संगठन
फ्लक्स

अपने काम में मैंने निम्नलिखित टूल्स का इस्तेमाल किया:

React.JS लाइब्रेरी ( https://github.com/facebook/react )
गुलप निर्माण प्रणाली ( https://github.com/gulpjs/gulp )
वेबपैक मॉड्यूलर प्रणाली ( https://github.com/webpack/webpack )
कनेक्ट फ्रेमवर्क ( https://github.com/senchalabs/connect )
वादे और प्रतिज्ञा के लिए पुस्तकालय ( https://github.com/dfilatov/vow )

पुनश्च

मैं यह लेख अपनी माँ, अपने पहले शिक्षक को समर्पित करता हूँ।

संक्षेप में ReactJS। भाग 1