Ruby on Rails
Integrazione di React.js con Rails mediante Hyperloop

introduzione

Osservazioni

Aggiunta di un componente semplice (scritto in rubino) alla tua app Rails

1. Aggiungi il gioiello hyperloop ai tuoi binari (4.0 - 5.1) Gemfile
2. bundle install
3. Aggiungi il manifest hyperloop al file application.js:

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

4. Crea i tuoi componenti di reazione e inseriscili nella directory 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. I componenti funzionano come le visualizzazioni. Sono "montati" usando il metodo render_component in un controller:

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

Dichiarazione dei parametri dei componenti (oggetti di scena)

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'

Tag HTML

# 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

Gestori di eventi

# 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

stati

# 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

Si noti che gli stati possono essere condivisi tra i componenti utilizzando Hyperloop :: Stores

callback

# 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