Contents

require 'opal'
require 'opal-react'

class HelloMessage

  include React::Component                    # will create a new component named HelloMessage
  
  MSG = {great: 'Cool!', bad: 'Cheer up!'}

  optional_param :mood
  required_param :name
  define_state   :foo, "Default greeting"

  before_mount do
    foo! "#{name}: #{MSG[mood]}" if mood      # change the state of foo using foo!, read the state using foo
  end

  after_mount :log                            # notice the two forms of callback

  def log
    puts "mounted!"
  end
  
  def render                                  # render method MUST return just one component  
    div do                                    # basic dsl syntax component_name(options) { ...children... }                                    
      span { "#{foo} #{name}!" }              # all html5 components are defined with lower case text
    end
  end
  
end

class App
  include React::Component

  def render
    HelloMessage name: 'John', mood: :great   # new components are accessed via the class name
  end
end

# later we will talk about nicer ways to do this:  For now wait till doc is loaded
# then tell React to create an "App" and render it into the document body.

`window.onload = #{lambda {React.render(React.create_element(App), `document.body`)}}`

Version data entries

10 entries across 10 versions & 1 rubygems

Version	Path
reactive-ruby-0.7.13	example/examples/hello.js.rb
reactive-ruby-0.7.12	example/examples/hello.js.rb
reactive-ruby-0.7.11	example/examples/hello.js.rb
reactive-ruby-0.7.10	example/examples/hello.js.rb
reactive-ruby-0.7.8	example/examples/hello.js.rb
reactive-ruby-0.7.7	example/examples/hello.js.rb
reactive-ruby-0.7.6	example/examples/hello.js.rb
reactive-ruby-0.7.5	example/examples/hello.js.rb
reactive-ruby-0.7.4	example/examples/hello.js.rb
reactive-ruby-0.7.3	example/examples/hello.js.rb