Ruby on Rails
प्रतिक्रिया-रत्नों के उपयोग से रेल के साथ प्रतिक्रिया करें
खोज…
Rails_react मणि का उपयोग करके रेल के लिए रिएक्ट इंस्टॉलेशन
अपने Gemfile में प्रतिक्रिया-रेल जोड़ें:
gem 'react-rails'
और स्थापित करें:
bundle install
अगला, स्थापना स्क्रिप्ट चलाएँ:
rails g react:install
यह करेगा:
एक कंपोनेंट बनाएँ। जेएस मेनिफ़ेस्ट फ़ाइल और एक ऐप / एसेट्स / javascripts / कंपोनेंट्स / डायरेक्टरी, जहाँ आप अपने कंपोनेंट्स को अपने एप्लिकेशन में डालेंगे। js:
//= require react
//= require react_ujs
//= require components
आपके एप्लिकेशन के भीतर react_rails का उपयोग करना
React.js बनाता है
आप प्रत्येक परिवेश में एक विन्यास जोड़कर सेवा करने के लिए जो React.js का निर्माण (विकास, उत्पादन, बिना या बिना ऐड-ऑन) कर सकते हैं। यहाँ चूक हैं:
# config/environments/development.rb
MyApp::Application.configure do
config.react.variant = :development
end
# config/environments/production.rb
MyApp::Application.configure do
config.react.variant = :production
end
ऐड-ऑन शामिल करने के लिए, इस कॉन्फ़िगरेशन का उपयोग करें:
MyApp::Application.configure do
config.react.addons = true # defaults to false
end
अपने रेल सर्वर को पुनः आरंभ करने के बाद, // = प्रतिक्रिया की आवश्यकता होती है, जो रिएक्शंस द्वारा निर्दिष्ट React.js के निर्माण को प्रदान करेगा।
React-rails, React.js के संस्करणों और बिल्ड के लिए कुछ अन्य विकल्प प्रदान करता है। प्रतिक्रिया-स्रोत मणि का उपयोग करने या React.js की अपनी प्रतियों में छोड़ने के बारे में अधिक जानकारी के लिए VERSIONS.md देखें।
JSX
प्रतिक्रिया-रेल स्थापित करने के बाद, अपने सर्वर को पुनरारंभ करें। अब, .js.jsx फाइलें एसेट पाइप लाइन में तब्दील हो जाएंगी।
बैबलट्रांसफॉर्मर विकल्प
आप बाबेल के ट्रांसफॉर्मर और कस्टम प्लगइन्स का उपयोग कर सकते हैं और निम्नलिखित विन्यासों को जोड़ते हुए बैबेल ट्रांसपिलर के विकल्प पास कर सकते हैं:
config.react.jsx_transform_options = {
blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options
optional: ["transformerName"], # pass extra babel options
whitelist: ["useStrict"] # even more options[enter link description here][1]
}
हुड के तहत, प्रतिक्रिया-रेल परिवर्तन के लिए रूबी-बाबेल-ट्रांसपिलर का उपयोग करता है।
बढ़ते और बढ़ते
react-rails में एक दृश्य सहायक (react_component) और एक विनीत जावास्क्रिप्ट चालक (प्रतिक्रिया_ज) शामिल हैं जो पृष्ठ पर प्रतिक्रिया घटकों को डालने के लिए एक साथ काम करते हैं। आपको प्रतिक्रिया के बाद (और टर्बोलिंक्स का उपयोग करने के बाद टर्बोलिंक्स का उपयोग करने पर) यूजेएस चालक की आवश्यकता होगी।
दृश्य सहायक अनुरोधित घटक वर्ग और रंगमंच की सामग्री के साथ पृष्ठ पर एक div डालता है। उदाहरण के लिए:
<%= react_component('HelloMessage', name: 'John') %>
<!-- becomes: -->
<div data-react-class="HelloMessage" data-react-props="{"name":"John"}"></div>
पृष्ठ लोड होने पर, react_ujs ड्राइवर डेटा-प्रतिक्रिया-वर्ग और डेटा-प्रतिक्रिया-प्रॉप का उपयोग करके पृष्ठ को स्कैन करेगा और घटकों को माउंट करेगा।
यदि टर्बोलिंक्स मौजूद है तो घटक पृष्ठ पर चढ़े हुए हैं: घटना बदलें, और पृष्ठ पर अनमाउंट करें: पहले-अनलोड करें। टर्बोलिंक> = 2.4.0 अनुशंसित है क्योंकि यह बेहतर घटनाओं को उजागर करता है।
अजाक्स कॉल के मामले में, जावास्क्रिप्ट से कॉल करके मैन्युअल रूप से यूजेएस बढ़ते को चालू किया जा सकता है:
ReactRailsUJS.mountCompords () सहायक के हस्ताक्षर देखें:
react_component(component_class_name, props={}, html_options={})
component_class_name एक स्ट्रिंग है जो विश्व स्तर पर सुलभ घटक वर्ग का नाम देता है। इसमें डॉट्स (जैसे, "MyApp.Header.MenuItem") हो सकते हैं।
`props` is either an object that responds to `#to_json` or an already-stringified JSON object (eg, made with Jbuilder, see note below).
html_options शामिल हो सकते हैं: tag: डेटा-रिएक्शन-क्लास और डेटा-रिएक्शन-प्रॉप्स को एम्बेड करने के लिए डिव के अलावा किसी अन्य तत्व का उपयोग करना। prerender: true सर्वर पर घटक रेंडर करने के लिए prerender: true है। **other किसी भी अन्य तर्क (जैसे वर्ग :, आईडी :) को content_tag के माध्यम से पारित किया जाता है।