# Opal::React

TODO: Write a gem description

## Installation

Add this line to your application's Gemfile:

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

And then execute:

    $ bundle

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()
```


## 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