jQuery से React.js तक कैसे जाएं?

Question

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

जे एस:

function remove() { 
    this.remove(); 
} 

function timed_append_new_element() { 
    setTimeout(function() { 
     var added_content = $("<span />", { 
      class: "added_content", 
      text: "Click to close", 
      click: remove 
     }); 
     container.append(added_content); 
    }, 3000); 
} 

function append_new_element() { 
    var added_content = $("<span />", { 
     class: "timed_added_content", 
     text: "Click to close", 
     click: remove 
    }); 
    container.append(added_content); 
} 


var container = $("<div />", { 
    class: "container" 
}); 
var header = $("<span />", { 
    class: "header", 
    text: "jQuery to React.js Header" 
}); 
var add_button = $("<button />", { 
    class: "add_button", 
    text: "Add Element", 
    click: append_new_element 
}); 
var timed_add_button = $("<button />", { 
    class: "add_button", 
    text: "Add Element in 3 seconds", 
    click: timed_append_new_element 
}); 
container.append(header); 
container.append(add_button); 
container.append(timed_add_button); 
$("body").append(container); 

Answer 1

वहाँ ध्यान में रखने के कुछ बुनियादी सिद्धांतों आप एक अच्छी प्रतिक्रिया आवेदन निर्माण में मदद कर सकती हैं:

आपका यूआई डेटा के एक समारोह होना चाहिए

कई "jQuery सूप" शैली अनुप्रयोगों में, एप्लिकेशन के लिए व्यवसाय तर्क, ऐप का डेटा, और यूआई इंटरैक्शन कोड सभी एक दूसरे से जुड़े हुए हैं। इससे इन प्रकार के अनुप्रयोगों को डीबग करना मुश्किल हो जाता है, विशेष रूप से, बढ़ने में मुश्किल होती है। प्रतिक्रिया, कई आधुनिक क्लाइंट-साइड एप्लिकेशन फ्रेमवर्क की तरह, इस विचार को लागू करें कि यूआई सिर्फ आपके डेटा का प्रतिनिधित्व है। यदि आप अपना यूआई बदलना चाहते हैं, तो आपको डेटा का एक टुकड़ा बदलना चाहिए और आपके लिए यूआई को अपडेट करने के लिए फ्रेमवर्क का उपयोग करने वाली किसी भी बाध्यकारी प्रणाली को अनुमति देना चाहिए।

में प्रतिक्रिया, प्रत्येक घटक डेटा-गुण घटक उदाहरण के लिए पारित के दो टुकड़े के एक समारोह है, और राज्य कि घटक आंतरिक प्रबंधन करता है (आदर्श)। वही गुण (या "प्रोप") और राज्य को देखते हुए, घटक को उसी तरह प्रस्तुत करना चाहिए।

यह ठोस उदाहरणों के बिना एक अमूर्त विचार हो सकता है, इसलिए इसे ध्यान में रखें क्योंकि हम अभी आगे बढ़ते हैं।

डोम

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

बेशक, कभी-कभी आपको डोम तक पहुंचने की आवश्यकता होगी, या आप कुछ jQuery प्लगइन को रिएक्ट में पुनर्निर्माण किए बिना शामिल करना चाहेंगे। इस तरह के समय के लिए, प्रतिक्रिया आपको component lifecycle hooks देता है जिसका उपयोग आप यह सुनिश्चित करने के लिए कर सकते हैं कि प्रतिक्रिया का प्रदर्शन बहुत अधिक न हो (या, कुछ मामलों में, अपने घटक को सादे तोड़ने से रोकने के लिए)।

डीओएम में हेरफेर नहीं करना "यूआई के डेटा के रूप में यूआई" के साथ हाथ में है।

उलटें डेटा प्रवाह

एक बड़ी प्रतिक्रिया आवेदन में, यह ट्रैक जिनमें से उप-घटक अनुप्रयोग डेटा की एक निश्चित टुकड़ा प्रबंध कर रहा है रखने के लिए मुश्किल हो सकता है। इस कारण से, प्रतिक्रिया टीम केंद्रीय स्थान पर डेटा मैनिपुलेशन तर्क रखने की सिफारिश करती है। ऐसा करने का सबसे सरल तरीका बाल घटकों में कॉलबैक पास करना है; फ्लक्स नामक फेसबुक पर विकसित एक आर्किटेक्चर भी है जिसमें its own website है।

composable घटकों

कई बार बनाएँ, यह एक बड़ा घटक है कि यूआई तर्क के राज्य या कई टुकड़े के कई टुकड़े का प्रबंधन करता है लिखने के लिए आकर्षक हो सकता है। जहां संभव हो (और कारण के भीतर), आपको बड़े घटकों को छोटे-छोटे टुकड़ों में तोड़ने पर विचार करना चाहिए जो डेटा या यूआई तर्क के एक टुकड़े पर काम करते हैं। इससे आपके आवेदन के टुकड़ों को बढ़ाने और स्थानांतरित करना बहुत आसान हो जाता है।

परिवर्तनशील डेटा

के बाद से घटक राज्य केवल घटक के भीतर से this.setState के लिए कॉल के माध्यम से अद्यतन किया जाना चाहिए सावधान रहें, यह परिवर्तनशील डेटा से सावधान रहना करने के लिए उपयोगी है। यह दोगुना सच है जब एकाधिक फ़ंक्शंस (या घटक!) एक ही टिक में म्यूटेबल ऑब्जेक्ट को अपडेट कर सकते हैं; प्रतिक्रिया राज्य परिवर्तनों को बैच करने का प्रयास कर सकती है, और आप अपडेट खो सकते हैं! जैसा कि एलिसू मोनार की टिप्पणियों में बताया गया है, उन्हें म्यूट करने से पहले परिवर्तनीय वस्तुओं को क्लोन करने पर विचार करें। प्रतिक्रिया में immutability helpers है जो सहायता कर सकता है।

एक और विकल्प राज्य में सीधे परिवर्तनीय डेटा संरचनाओं को रखने के लिए है; ऊपर वर्णित फ्लक्स पैटर्न, इस विचार पर एक दिलचस्प कदम है।

---

साइट प्रतिक्रिया Thinking in React कहा जाता है पर एक बड़ा लेख जो कि कैसे आप एक विचार या एक mockup लेने के लिए और यह एक आवेदन प्रतिक्रिया में बदल सकता है, और मैं दृढ़ता से यह खत्म हो जा रहा प्रोत्साहित करते हैं के ऊपर जाता है नहीं है। एक ठोस उदाहरण के रूप में, आइए आपके द्वारा प्रदान किए गए कोड को देखें। आपके पास प्रबंधन के लिए आवश्यक रूप से डेटा का एक टुकड़ा है: container तत्व के अंदर मौजूद सामग्री की एक सूची। आपके यूआई में किए गए सभी बदलावों को उस डेटा में जोड़, निष्कासन और परिवर्तनों द्वारा दर्शाया जा सकता है।

/** @jsx React.DOM */ 

var Application = React.createClass({ 
    getInitialState: function() { 
    return { 
     content: [] 
    }; 
    }, 

    render: function() { 
    return (
     <div className="container"> 
     <span className="header">jQuery to React.js Header</span> 
     <button className="add_button" 
       onClick={this.addContent}>Add Element</button> 
     <button className="add_button" 
       onClick={this.timedAddContent}>Add Element in 3 Seconds</button> 
     {this.state.content.map(function(content) { 
      return <ContentItem content={content} removeItem={this.removeItem} />; 
     }.bind(this))} 
     </div> 
    ); 
    }, 

    addContent: function() { 
    var newItem = {className: "added_content", text: "Click to close"}, 
     content = this.state.content, 
     newContent = React.addons.update(content, {$push: [newItem]}); 
    this.setState({content: newContent}); 
    }, 

    timedAddContent: function() { 
    setTimeout(function() { 
     var newItem = {className: "timed_added_content", text: "Click to close"}, 
      content = this.state.content, 
      newContent = React.addons.update(content, {$push: [newItem]}); 
     this.setState({content: newContent}); 
    }.bind(this), 3000); 
    }, 

    removeItem: function(item) { 
    var content = this.state.content, 
     index = content.indexOf(item); 
    if (index > -1) { 
     var newContent = React.addons.update(content, {$splice: [[index, 1]]}); 
     this.setState({content: newContent}); 
    } 
    } 
}); 

var ContentItem = React.createClass({ 
    propTypes: { 
    content: React.PropTypes.object.isRequired, 
    removeItem: React.PropTypes.func.isRequired 
    }, 

    render: function() { 
    return <span className={this.props.content.className} 
       onClick={this.onRemove}>{this.props.content.text}</span>; 
    }, 

    onRemove: function() { 
    this.props.removeItem(this.props.content); 
    } 
}); 

React.renderComponent(<Application />, document.body); 

आप this JSFiddle में कार्रवाई में कोड देख सकते हैं:: http://jsfiddle.net/BinaryMuse/D59yP/

आवेदन दो घटकों से बना है:

ऊपर सिद्धांतों को लागू करके, अपने अंतिम आवेदन कुछ इस तरह लग सकता है एक Application नामक शीर्ष-स्तरीय घटक, जो content नामक एक सरणी का प्रबंधन करता है, और ContentItem नामक एक घटक, जो यूआई का प्रतिनिधित्व करता है और उस सरणी से एक आइटम का व्यवहार करता है। Application की render विधि सामग्री सरणी में प्रत्येक आइटम के लिए ContentItem तत्व देता है।

ध्यान देने योग्य एक बात यह है कि content सरणी के अंदर मानों के प्रबंधन के लिए सभी तर्क Application घटक में संभाले जाते हैं; ContentItem घटक संदर्भ से Application की removeItem विधि पारित किए गए हैं, जो ContentItem क्लिक किए जाने पर प्रतिनिधि हैं। यह शीर्ष-स्तर घटक के अंदर राज्य में हेरफेर करने के लिए सभी तर्क रखता है।