Composing Components

Reactive Ruby composes components just like React.js...

Javascript:

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

Ruby

class CommentList
  include React::Component
  def render
    div.comment_list { "hello, world! I am CommentList" }   # comment_list will be translated to comment-list
  end
end

class CommentForm
  include React::Component
  def render
    div.comment_form { "Hello, world! I am a CommentForm" } # comment_form will be translated to comment-form
  end
end

class CommentBox
  include React::Component
  def render 
    div.comment_box do
      h1 { "Comments " }
      CommentList {}  # components rendered using their class names
      CommentForm {}  
    end
  end
end

Summary

Feature	React.js	Reactive-Ruby
HAML naming conventions		when using HAML style class attributes underscores get translated to dashes
invoking custom components	<ComponentName...>	ComponentName. Note that module scoping is allowed, i.e. Foo::Bar::MyComponent would create an instance of the MyComponent class from the Bar module in the Foo module. Normal ruby scope lookup rules apply