Skip to content
This repository has been archived by the owner on Oct 19, 2018. It is now read-only.

Commit

Permalink
Update README [skip ci]
Browse files Browse the repository at this point in the history
  • Loading branch information
zetachang committed Oct 19, 2016
1 parent 0c59936 commit f8e3669
Showing 1 changed file with 51 additions and 39 deletions.
90 changes: 51 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Reactrb / Reactive-Ruby
# Reactrb

[![Join the chat at https://gitter.im/reactrb/chat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/reactrb/chat?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Build Status](https://travis-ci.org/reactrb/reactrb.svg?branch=master)](https://travis-ci.org/reactrb/reactrb)
Expand All @@ -11,37 +11,67 @@
It lets you write reactive UI components, with Ruby's elegance using the tried
and true React.js engine. :heart:

[**Visit ruby-hyperloop.io For The Full Story**](http://ruby-hyperloop.io)
Visit [** ruby-hyperloop.io**](http://ruby-hyperloop.io) for the full story.

### Important: `react.rb` and `reactive-ruby` gems are **deprecated.** Please [read this!](#upgrading-to-reactrb)

## Installation

Install the gem, or load the js library

+ add `gem 'reactrb'` to your gem file or
+ `gem install reactrb` or
+ install (or load via cdn) [reactrb-express.js](http://github.com/reactrb/reactrb-express)
1. Add `gem 'reactrb'` to your **Gemfile**
2. Or `gem install reactrb`
3. Or install (or load via cdn) from [reactrb-express.js](http://github.com/reactrb/reactrb-express)

For gem installation it is highly recommended to read the [getting started](http://ruby-hyperloop.io/get_started/) and [installation](http://ruby-hyperloop.io/installation/) guides at [ruby-hyperloop.io](http://ruby-hyperloop.io)
For gem installation it is highly recommended to read the [getting started](http://ruby-hyperloop.io/get_started/) and [installation](http://ruby-hyperloop.io/installation/) guides at [ruby-hyperloop.io.](http://ruby-hyperloop.io)

## Quick Overview

Reactrb components are ruby classes that inherit from `React::Component::Base` or include `React::Component`.
A component is a plain ruby class with a `#render` method defined.

`React::Component` provides a complete DSL to generate html and event handlers, and has full set of class macros to define states, parameters, and lifecycle callbacks.
```ruby
class HelloMessage
def render
React.create_element("div") { "Hello World!" }
end
end

Each react component class has a render method that generates the markup for that component.
puts React.render_to_static_markup(React.create_element(HelloMessage))

Each react component class defines a new tag-method in the DSL that works just like built-in html tags, so react components can render other react components.
# => '<div>Hello World!</div>'
```

As events occur, components update their state, which causes them to rerender, and perhaps pass new parameters to lower level components, thus causing them to rerender.
### React::Component

Under the hood the actual work is effeciently done by the [React.js](http://facebook.github.io/reactrb/) engine.
You can simply include `React::Component` to get the power of a complete DSL to generate html markup, event handlers and it also provides a full set of class macros to define states, parameters, and lifecycle callbacks.

As events occur, components update their state, which causes them to rerender, and perhaps pass new parameters to lower level components, thus causing them to rerender.

```ruby
class HelloWorld < React::Component::Base
param :time, type: Time
render do
p do
span { "Hello, " }
input(type: :text, placeholder: "Your Name Here")
span { "! It is #{params.time}"}
end
end
end

every(1) do
Element["#example"].render do
HelloWorld(time: Time.now)
end
end
```

Reactrb components are *isomorphic* (or *univeral*) meaning they can run on the server as well as the client.

Reactrb integrates well with Rails, Sinatra, and simple static sites, and can be added to existing web pages very easily.

Reactrb components are *isomorphic* meaning they can run on the server as well as the client. This means that the initial expansion of the component tree to markup is done server side, just like ERB, or HAML templates. Then the same code runs on the client and will respond to any events.
Under the hood the actual work is effeciently done by the [React.js](http://facebook.github.io/reactrb/) engine.

Reactrb integrates well with Rails, Sinatra, and simple static sites, and can be added to existing web pages very easily, or it can be used to deliver complete websites.

## Why ?

Expand All @@ -52,14 +82,14 @@ Reactrb integrates well with Rails, Sinatra, and simple static sites, and can be
+ *Enhanced Features:* Enhanced parameter and state management and other new features
+ *Plays well with Others:* Works with other frameworks, React.js components, Rails, Sinatra and static web pages

# Problems, Questions, Issues
## Problems, Questions, Issues

+ [Stack Overflow](http://stackoverflow.com/questions/tagged/react.rb) tag `react.rb` for specific problems.
+ [Gitter.im](https://gitter.im/reactrb/chat) for general questions, discussion, and interactive help.
+ [Github Issues](https://github.com/reactrb/reactrb/issues) for bugs, feature enhancements, etc.


# Upgrading to Reactrb
## Upgrading to Reactrb

The original gem `react.rb` was superceeded by `reactive-ruby`, which has had over 15,000 downloads. This name has now been superceeded by `reactrb` (see #144 for detailed discussion on why.)

Expand All @@ -77,7 +107,7 @@ Follow these steps to upgrade:
1. Replace `reactive-ruby` with `reactrb` both in **Gemfile** and any `require`s in your code.
2. To include the React.js source, the suggested way is to add `require 'react/react-source'` before `require 'reactrb'`. This will use the copy of React.js source from `react-rails` gem.

# Roadmap
## Roadmap

Upcoming will be an 0.9.x release which will deprecate a number of features and DSL elements. [click for detailed feature list](https://github.com/reactrb/reactrb/milestones/0.9.x)

Expand All @@ -89,33 +119,15 @@ Please let us know either at [Gitter.im](https://gitter.im/reactrb/chat) or [via

`git clone` the project.

To play with some live examples cd to the project directory then

2. `cd example/examples`
2. `bundle install`
3. `bundle exec rackup`
4. Open `http://localhost:9292`

or

1. `cd example/rails-tutorial`
2. `bundle install`
3. `bundle exec rails s`
4. Open `http://localhost:3000`

or

1. `cd example/sinatra-tutorial`
2. `bundle install`
3. `bundle exec rackup`
4. Open `http://localhost:9292`
To play with some live examples, refer to https://github.com/reactrb/reactrb-examples.

Note that these are very simple examples, for the purpose of showing how to configure the gem in various server environments. For more examples and information see [reactrb.org.](http://reactrb.org)
Note that these are very simple examples, for the purpose of showing how to configure the gem in various server environments. For more examples and information see [ruby-hyperloop.io.](http://ruby-hyperloop.io)

## Testing

1. Run `bundle exec rake test_app` to generate a dummy test app.
2. `bundle exec rake`
2. `bundle exec appraisal install` to generate separate gemfiles for different environments.
2. `bundle exec appraisal opal-0.9-react-15 rake` to run test for opal-0.9 & react-v0.15.

## Contributions

Expand Down

0 comments on commit f8e3669

Please sign in to comment.