As we march towards the next official release of react.rb, we wanted to make some syntactic improvements to the component macros and methods. The overall intent is to make react.rb more ruby like, and reduce syntactic noise, while maintaining ties to react.js.

While we are very close to being ready to make an official react.rb release we are still maintaining these changes as the master branch of react.rb, and distributing the changes via the reactive-ruby gem.

Here is a summary of the changes in v0.7.32

  • Inheriting from React::Component::Base

    You can now define components by inheriting from React::Component::Base.

    For example:

    class Widget < React::Component::Base  
      # etc

    Note you can still use include React::Component to define components as well.

    As part of this change you can also subclass any component. Any lifecycle macros in child classes will execute before the parent class.

  • state and params component methods

    To access state variables and params you must now prefix with the stateand param methods.

    While adding some typing it solves two problems: First it avoids shadowing dsl methods such as label, and secondly it makes the code more readable.

    state.items  # items without the state prefix is deprecated
    state.items! # likewise for updating state
    params.user  # user without the params prefix is deprecated
  • Simplified Param Declarations

    Instead of optional_param, and required_param, both macros have been replaced by param.

    param :foo             # instead of required_param :foo
    param bar: 12          # instead of optional_param :foo, default: 12
    param :bar default: 12 # slightly longer but more explicit
    param :foo, type: Hash # type spec works the same

    Both optional_param and required_param (and the plural aliases) are deprecated.

  • Implicit State Variable Creation

    When you reference a state variable (via the state method described above) the state will be automatically created.

    The rationale is to make state variables more like instance variables. And like instance variables, good style would ask that all state variables be initialized in the before_mount callback. At this time it has not been determined if define_state will be deprecated, but you are strongly encouraged not to use it, or provide feedback.

  • Simplified Component Mounting with JQuery

    The jQuery wrapper class Element now has a render method.

    Element['#container'].render { div { "hello" } }

    The render method takes a block, and mounts the react element generated by the block into the first dom element in the jQuery result.

    React does not depend on opal-jquery and so opal-jquery must be required before the reactive-ruby gem, for the render method to be added to the Element class.