# Opal::React

## Disclamer

I'm not a rails developer™

You should check out [Clearwater](https://github.com/clearwater-rb/clearwater)
and [React.rb](http://ruby-hyperloop.io) 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](http://opalrb.org). That being said, this is still supposed to 
be a complete wrapper around [React](https://facebook.github.io/react/).

## Installation

Add this line to your application's Gemfile:

```ruby
gem 'opal-react'
```

And then execute:

    $ bundle install

Or install it yourself as:

    $ gem install opal-react

## Usage

```ruby
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