words-example.md

TODO: not sure where this should go?

Random Words example

This is the example app used by the quick start guides, and if you want to dive deeper this is the place to be.

If you have not already done so, follow any one of the quick start guides to set up the basic system. Make sure to follow the steps in the last section and add a Word model, a App component, and a controller and route.

The initial component:

Your initial component should look like this:

# app/views/components/app.rb
class App < Hyperloop::Component

  def add_new_word
    # for fun we will use setgetgo.com to get random words!
    HTTP.get("http://randomword.setgetgo.com/get.php", dataType: :jsonp) do |response|
      Word.new(text: response.json[:Word]).save
    end
  end

  render(DIV) do
    SPAN { "Count of Words: #{Word.count}" }
    BUTTON { "add another" }.on(:click) { add_new_word }
    UL do
      Word.each { |word| LI { word.text } }
    end
  end
end

Before going further lets understand exactly what is going on here.

1. Our controller has a method named app, so by convention Reactrb will look for a component class named App, which it finds and mounts where ever the the layout yields to the view.

Take a second to look at your application.html.erb and find the <%= yield %>. That is the normal rails way of indicating where the view requested by the controller (in the case our component) should be rendered.

2. The component is rendered on the server like any other view. The render callback defines exactly what to render.

# app/views/components/app.rb
class App < React::Component::Base

  def add_new_word
    # for fun we will use setgetgo.com to get random words!
    word = Word.new(text: '')
    Word << word # force our local list to update before the save
    HTTP.get("http://randomword.setgetgo.com/get.php", dataType: :jsonp) do |response|
      word.text = response.json[:Word]
      word.save
    end
  end

  render(DIV) do
    SPAN { "Count of Words: #{Word.count}" }
    BUTTON { "add another" }.on(:click) { add_new_word }
    UL do
      Word.sort.each { |word| LI { word.text.empty? ? 'loading...' : word.text } }
    end
  end
end