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

Commit f8e3669

Browse files
committed
Update README [skip ci]
1 parent 0c59936 commit f8e3669

File tree

1 file changed

+51
-39
lines changed

1 file changed

+51
-39
lines changed

README.md

Lines changed: 51 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Reactrb / Reactive-Ruby
1+
# Reactrb
22

33
[![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)
44
[![Build Status](https://travis-ci.org/reactrb/reactrb.svg?branch=master)](https://travis-ci.org/reactrb/reactrb)
@@ -11,37 +11,67 @@
1111
It lets you write reactive UI components, with Ruby's elegance using the tried
1212
and true React.js engine. :heart:
1313

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

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

1818
## Installation
1919

2020
Install the gem, or load the js library
2121

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

26-
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)
26+
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)
2727

2828
## Quick Overview
2929

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

32-
`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.
32+
```ruby
33+
class HelloMessage
34+
def render
35+
React.create_element("div") { "Hello World!" }
36+
end
37+
end
3338

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

36-
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.
41+
# => '<div>Hello World!</div>'
42+
```
3743

38-
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.
44+
### React::Component
3945

40-
Under the hood the actual work is effeciently done by the [React.js](http://facebook.github.io/reactrb/) engine.
46+
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.
47+
48+
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.
49+
50+
```ruby
51+
class HelloWorld < React::Component::Base
52+
param :time, type: Time
53+
render do
54+
p do
55+
span { "Hello, " }
56+
input(type: :text, placeholder: "Your Name Here")
57+
span { "! It is #{params.time}"}
58+
end
59+
end
60+
end
61+
62+
every(1) do
63+
Element["#example"].render do
64+
HelloWorld(time: Time.now)
65+
end
66+
end
67+
```
68+
69+
Reactrb components are *isomorphic* (or *univeral*) meaning they can run on the server as well as the client.
70+
71+
Reactrb integrates well with Rails, Sinatra, and simple static sites, and can be added to existing web pages very easily.
4172

42-
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.
73+
Under the hood the actual work is effeciently done by the [React.js](http://facebook.github.io/reactrb/) engine.
4374

44-
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.
4575

4676
## Why ?
4777

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

55-
# Problems, Questions, Issues
85+
## Problems, Questions, Issues
5686

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

6191

62-
# Upgrading to Reactrb
92+
## Upgrading to Reactrb
6393

6494
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.)
6595

@@ -77,7 +107,7 @@ Follow these steps to upgrade:
77107
1. Replace `reactive-ruby` with `reactrb` both in **Gemfile** and any `require`s in your code.
78108
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.
79109

80-
# Roadmap
110+
## Roadmap
81111

82112
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)
83113

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

90120
`git clone` the project.
91121

92-
To play with some live examples cd to the project directory then
93-
94-
2. `cd example/examples`
95-
2. `bundle install`
96-
3. `bundle exec rackup`
97-
4. Open `http://localhost:9292`
98-
99-
or
100-
101-
1. `cd example/rails-tutorial`
102-
2. `bundle install`
103-
3. `bundle exec rails s`
104-
4. Open `http://localhost:3000`
105-
106-
or
107-
108-
1. `cd example/sinatra-tutorial`
109-
2. `bundle install`
110-
3. `bundle exec rackup`
111-
4. Open `http://localhost:9292`
122+
To play with some live examples, refer to https://github.com/reactrb/reactrb-examples.
112123

113-
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)
124+
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)
114125

115126
## Testing
116127

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

120132
## Contributions
121133

0 commit comments

Comments
 (0)