You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 19, 2018. It is now read-only.
React.rb components are ruby classes that inherit from `React::Component::Base` or include `React::Component`.
147
31
148
-
Make sure your routes file has a route to your home#show action. Visit that
149
-
route in your browser and you should see 'Hello' rendered.
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.
150
33
151
-
Open up the js console in the browser and you will see a log showing what went
152
-
on during rendering.
34
+
Each react component class has a render method that generates the markup for that component.
153
35
154
-
Have a look at the sources in the console, and notice your ruby code is there,
155
-
and you can set break points etc.
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.
156
37
157
-
### Changing the top level component name and search path
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.
158
39
159
-
You can control the top level component name and search path.
40
+
Under the hood the actual work is effeciently done by the [React.js](http://facebook.github.io/react/) engine.
160
41
161
-
By default the component class name is inferred from the controller method rendering the component.
162
-
You can also specify the component name explicitly in the `render_component` method.
163
-
`render_component "Blatz` will search the for a component class named `Blatz`
164
-
regardless of the name of the controller method.
42
+
React.rb 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.
165
43
166
-
Searching for components works like this: Given a controller named
167
-
"Foo" then react.rb will search for a module named `Foo` containing the component.
168
-
If this fails all modules will be searched (i.e. the name of the controller will be
169
-
ignored.) In either case the search begins at the outer most scope until a match is made.
44
+
React.rb 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.
170
45
171
-
Thus for example given a controller named `Foo`, components could be found in the `Foo` module,
172
-
the `Components::Foo` module, in the outer most scope, or in any nested module.
173
-
The way the search works allows for small projects that do not need a lot
174
-
of name spacing, and also allows components to be shared across several controllers.
46
+
## Why ?
175
47
176
-
Saying `render_component "::Blatz"` will only search the outer scope, while
177
-
`"::Bar::Blatz"` will look only in the module `Bar` for a class named `Blatz`.
48
+
+*Single Language:* Use Ruby everywhere, no JS, markup languages, or JSX
49
+
+*Powerful DSL:* Describe HTML and event handlers with a minimum of fuss
50
+
+*Ruby Goodness:* Use all the features of Ruby to create reusable, maintainable UI code
51
+
+*React Simplicity:* Nothing is taken away from the React.js model
52
+
+*Enhanced Features:* Enhanced parameter and state management and other new features
53
+
+*Plays well with Others:* Works with other frameworks, React.js components, Rails, Sinatra and static web pages
178
54
55
+
# Problems, Questions, Issues
179
56
180
-
## Integration with Sinatra
57
+
+[Stack Overflow](http://stackoverflow.com/questions/tagged/react.rb) tag `react.rb` for specific problems.
58
+
+[Gitter.im](https://gitter.im/zetachang/react.rb) for general questions, discussion, and interactive help.
59
+
+[Github Issues](https://github.com/zetachang/react.rb/issues) for bugs, feature enhancements, etc.
181
60
182
-
See the [sinatra example](https://github.com/zetachang/react.rb/tree/master/example/sinatra-tutorial).
183
61
184
-
## Contextual Code
62
+
#Road Map
185
63
186
-
Sometimes it may be necessary to run code only on the server or only in the
187
-
browser. To execute code only during server side rendering:
64
+
The original `react.rb` gem is still available as the [0-3-stable branch.](https://github.com/zetachang/react.rb/tree/0-3-stable)**but please read on..**
188
65
189
-
```ruby
190
-
ifReact::IsomorphicHelpers.on_opal_server?
191
-
puts'Hello from the server'
192
-
end
193
-
```
66
+
Many new features, bug fixes, and improvements are incoporated in the `reactive-ruby` gem currently built on the [0-7-stable branch.](https://github.com/zetachang/react.rb/tree/0-7-stable) In addtion more extensive documentation for the current stable branch is available at [reactrb.org](http://reactrb.org), and the [Opal Ruby Playground](http://fkchang.github.io/opal-playground/?code:&html_code=%3Cdiv%20id%3D%22container%22%3E%3C%2Fdiv%3E%0A&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A) incorporates the current stable branch.
194
67
195
-
To execute code only in the browser:
68
+
Our plan is to do one more upgrade on the `reactive-ruby` gem which will be designated version 0.8.0. [click for detailed feature list](https://github.com/zetachang/react.rb/milestones/0.8.x)
196
69
197
-
```ruby
198
-
ifReact::IsomorphicHelpers.on_opal_client?
199
-
puts'Hello from the browser'
200
-
end
201
-
```
70
+
From 0.9.0 and beyond we will return to using the `react.rb` gem for releases, and `reactive-ruby` will continue as a meta gem that depends only on react.rb >= 0.9.x.
202
71
203
-
## Typical Problems
72
+
Version 0.9.0 of `react.rb`**will not be** 100% backward compatible with 0.3.0 so its very important to begin your upgrade process now by switching to `reactive-ruby` 0.7.0.
204
73
205
-
`Uncaught TypeError: Cannot read property 'toUpperCase' of undefined` This
206
-
means the thing you are trying to render is not actually a react component.
207
-
Often is because the top level component name is wrong. For example if you are
208
-
in controller Foo and the method is `bar`, but you have named the component
209
-
Foo::Bars then you would see this message.
74
+
Please let us know either at [Gitter.im](https://gitter.im/zetachang/react.rb) or [via an issue](https://github.com/zetachang/react.rb/issues) if you have specific concerns with the upgrade from 0.3.0 to 0.9.0.
210
75
211
-
## Turning off Prerendering
76
+
## Developing
212
77
213
-
Sometimes its handy to switch off prerendering. Add `?no_prerender=1` ... to
214
-
your url.
78
+
`git clone` the project.
215
79
80
+
To play with some live examples cd to the project directory then
216
81
217
-
## TODOS / Work arounds / Issues
82
+
2.`cd example/examples`
83
+
2.`bundle install`
84
+
3.`bundle exec rackup`
85
+
4. Open `http://localhos:9292`
218
86
219
-
* Documentation
220
-
* Should load the RubyRacer, or at least report an error if the RubyRacer is not
221
-
present
222
-
* Get everything to autoload what it needs (i.e. much less config setup)
87
+
or
223
88
224
-
## Developing
89
+
1.`cd example/rails-tutorial`
90
+
2.`bundle install`
91
+
3.`bundle exec rails s`
92
+
4. Open `http://localhost:3000`
225
93
226
-
To run the above examples project yourself:
94
+
or
227
95
228
-
1.`git clone` the project
229
-
2.`cd example/tutorial`
96
+
1.`cd example/sinatra-tutorial`
230
97
2.`bundle install`
231
98
3.`bundle exec rackup`
232
-
4. Open `http://localhost`
99
+
4. Open `http://localhost:9292`
100
+
101
+
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)
233
102
234
103
## Testing
235
104
@@ -238,14 +107,9 @@ To run the above examples project yourself:
238
107
239
108
## Contributions
240
109
241
-
This project is still in early stage, so discussion, bug report and PR are
242
-
really welcome :wink:. We check in often at
243
-
https://gitter.im/zetachang/react.rb ask for @catmando as David is on leave
244
-
right now.
245
-
246
-
## Contact
110
+
This project is still in early stage, so discussion, bug reports and PRs are
111
+
really welcome :wink:.
247
112
248
-
We check in often at https://gitter.im/zetachang/react.rb ask for @catmando.
0 commit comments