Component Params (React Props) Basics

In React.js components may be passed "props" when the enclosing component is rendered. The same is true in Reactive-Record, but we use the term params (following Rails terminology.)

In React.js you access the props via the special variable props which returns a js object, likewise in Reactive Ruby you use the params method which returns a hash of the passed params.

Like React.js you can declare which params you expect, but in Reactive Ruby you get many additional benefits to doing this.

• Params can optionally be typed, and will be type checked.
• Params automatically get accessor and update methods declared.
• Reactive Ruby will perform automatic type conversion from json values back to the correct type.
• Reactive Ruby handles Proc type params specially making upwards, and two communication easy.

Lets compare some more JS to Ruby

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        this.props.comment
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt" comment="This is one comment"/>
        <Comment author="Jordan Walke" comment="This is *another* comment" />
      </div>
    );
  }
});

Ruby

class Comment 
  include React::Component
  required_param :author, type: String
  required_param :comment, type: String
  def render
    div.comment do
      h2.commentAuthor {author} # you could access author as params[:author]
      comment                   # you could access comment as params[:comment]
    end
  end
end

class CommentList
  include React::Component
  def render 
    div.commentList do
      Comment(author: "Pete Hunt", comment: "This is a comment")
      Comment(author: "Jordan Walke", comment: "This is *another* comment")
    end
  end
end

#####Optional Params

Params can be declared optional by using the optional_param macro instead of required_param. Default values are indicated by the :default keyword. If no default value is given nil is assumed. For example

default_param :foo, default: "hello"

#####Array Types

If you are passing an array of a specific type, you can enhance the type checking by using the [] notation in the type declaration. For example to declare a type as containing an array of strings:

required_param :names, type: [String]

#####Passing Procs

If you declare a param as type Proc the method created will be an alias for your proc and you can call it directly.

For example:

required_param :notify, type: Proc
# later during an event handler you might do
  notify e.target.value # call back to the notify proc passing the event target value

#####Summary

Feature	React.js	Reactive-Ruby
passing props	props appears as attributes in the JSX tag	params are passed with the other options to a component
declaring props	passed in the propType attribute	use the required_param or optional_param class methods