Ruby on Rails
हाइपरलूप का उपयोग करके रेल के साथ React.js को एकीकृत करना

परिचय

टिप्पणियों

अपने रेल एप्लिकेशन के लिए एक सरल प्रतिक्रिया घटक (रूबी में लिखा गया) जोड़ना

1. हाइपरलूप मणि को अपनी रेल (4.0 - 5.1) मणिफाइल में जोड़ें
2. bundle install
3. हाइपरलूप मेनिफ़ेस्ट को application.js फ़ाइल में जोड़ें:

   // app/assets/javascripts/application.js
   ...
   //= hyperloop-loader
   

4. अपने प्रतिक्रिया घटक बनाएं, और उन्हें hyperloop/components निर्देशिका में रखें

   # app/hyperloop/components/hello_world.rb
   class HelloWorld < Hyperloop::Component
     after_mount do
       every(1.second) { mutate.current_time(Time.now) }
     end
     render do
       "Hello World!  The time is now: #{state.current_time}"
     end
   end
   

5. घटक केवल विचारों की तरह काम करते हैं। वे एक नियंत्रक में render_component विधि का उपयोग करके "माउंटेड" हैं:

   # somewhere in a controller:
     ...
     def hello_world
       render_component # renders HelloWorld based on method name
     end
   

घटक मापदंडों की घोषणा (सहारा)

class Hello < Hyperloop::Component
  # params (= react props) are declared using the param macro
  param :guest
  render do
    "Hello there #{params.guest}"
  end
end

# to "mount" Hello with guest = "Matz" say 
  Hello(guest: 'Matz')

# params can be given a default value:
  param guest: 'friend' # or
  param :guest, default: 'friend'

एचटीएमएल टैग

# HTML tags are built in and are UPCASE
class HTMLExample < Hyperloop::Component
  render do
    DIV do
      SPAN { "Hello There" }
      SPAN { "Welcome to the Machine!" }
    end
  end
end

इवेंट हैंडलर

# Event handlers are attached using the 'on' method
class ClickMe < Hyperloop::Component
  render do
    DIV do
      SPAN { "Hello There" }
      A { "Click Me" }.on(:click) { alert('you did it!' }
    end
  end
end

राज्य अमेरिका

# States are read using the 'state' method, and updated using 'mutate'
# when states change they cause re-render of all dependent dom elements

class StateExample < Hyperloop::Component
  state count: 0  # by default states are initialized to nil
  render do
    DIV do
      SPAN { "Hello There" }
      A { "Click Me" }.on(:click) { mutate.count(state.count + 1) }
      DIV do 
        "You have clicked me #{state.count} #{'time'.pluralize(state.count)}"
      end unless state.count == 0
    end
  end
end

ध्यान दें कि राज्यों को हाइपरलूप :: स्टोर्स के घटकों के बीच साझा किया जा सकता है

कॉलबैक

# all react callbacks are supported using active-record-like syntax

class SomeCallBacks < Hyperloop::Component
  before_mount do
    # initialize stuff - replaces normal class initialize method
  end
  after_mount do
    # any access to actual generated dom node, or window behaviors goes here
  end
  before_unmount do
    # any cleanups (i.e. cancel intervals etc)
  end
  
  # you can also specify a method the usual way:
  before_mount :do_some_more_initialization
end