Tutorial by Examples

Add the hyperloop gem to your rails (4.0 - 5.1) Gemfile bundle install Add the hyperloop manifest to the application.js file: // app/assets/javascripts/application.js ... //= hyperloop-loader Create your react components, and place them in the hyperloop/components directory # app/hyperl...

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 giv...

# 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 { "H...

# 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 ...