Opal::React

Disclamer

I'm not a rails developer™

You should check out Clearwater and React.rb as well. They are built by rails people and they aim for a more ruby-like experience.

This was done as a proof of concept and for me to learn more about Opal. That being said, this is still supposed to be a complete wrapper around React.

Installation

Add this line to your application's Gemfile:

gem 'opal-react'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install opal-react

Usage

require 'react'

class TodoList < React::Component
  def render
    console.log('TodoList:render')
    ul(
      props[:items].map { |item|
        li({key: item[:id]}, [ item[:text] ])
      }
    )
  end
end

class TodoApp < React::Component

  def initial_state
    { items: [], text: '' }
  end

  def onChange(e)
    set_state({text: e.target.value})
  end

  def handleSubmit(e)
    e.preventDefault()
    now = Time.now
    nextItems = state[:items] + [{ text: state[:text], id: now.to_i * 1e6 + now.usec }]
    nextText = ''
    set_state({items: nextItems, text: nextText})
  end

  def render
    div([
      h3('TODO'),
      TodoList(items: state[:items]),
      form({onSubmit: method(:handleSubmit)}, [
        input(onChange: method(:onChange), value: state[:text]),
        button("Add ##{state[:items].count+1}")
      ])
    ])
  end

end

TodoApp.run()

Extras

React::Window provides a thin wrapper for common dom operations.

https://developer.mozilla.org/en-US/docs/Web/API/Window has a long list of available properties and methods.

This makes it possible to write fetch("https://...") and window.setTimeout(-> { ... }, timeout) anywhere in your components.

Contributing

1. Fork it ( https://github.com/[my-github-username]/opal-react/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request