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
*This README is for `1.x` branch which is still in development. Please switch to latest `0.x` branch for stable version.*
@@ -51,32 +58,38 @@ You can `require` it in your manifest:
51
58
Alternatively, you can include it directly as a separate script tag:
52
59
53
60
```erb
54
-
# app/views/layouts/application.erb.html
61
+
# app/views/layouts/application.html.erb
55
62
56
63
<%= javascript_include_tag "react" %>
57
64
```
58
65
59
66
### JSX
60
67
61
-
To transform your JSX into JS, simply create `.js.jsx` files, and ensure that the file has the `/** @jsx React.DOM */` docblock. These files will be transformed on request, or precompiled as part of the `assets:precompile` task.
68
+
To transform your JSX into JS, simply create `.js.jsx` files. These files will be transformed on request, or precompiled as part of the `assets:precompile` task.
62
69
63
-
CoffeeScript files can also be used, by creating `.js.jsx.coffee` files. You must use this form of the docblock at the top of each file: `###* @jsx React.DOM ###`. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
70
+
CoffeeScript files can also be used, by creating `.js.jsx.coffee` files. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
64
71
65
72
```coffee
66
-
###* @jsx React.DOM ###
67
-
68
73
Component=React.createClass
69
74
render:->
70
75
`<ExampleComponent videos={this.props.videos} />`
71
76
```
72
77
78
+
You can use the `--harmony` or `--strip-types` options by adding a configuration to `application.rb`:
79
+
80
+
```ruby
81
+
config.react.jsx_transform_options = {
82
+
harmony:true,
83
+
strip_types:true, # for removing Flow type annotations
84
+
}
85
+
```
73
86
74
87
### Unobtrusive JavaScript
75
88
76
-
`react_ujs` will call `React.renderComponent` for every element with `data-react-class` attribute. React properties can be specified by `data-react-props` attribute in JSON format. For example:
89
+
`react_ujs` will call `React.render` for every element with `data-react-class` attribute. React properties can be specified by `data-react-props` attribute in JSON format. For example:
77
90
78
91
```erb
79
-
<!-- react_ujs will execute `React.renderComponent(HelloMessage({name:"Bob"}), element)` -->
92
+
<!-- react_ujs will execute `React.render(HelloMessage({name:"Bob"}), element)` -->
@@ -154,11 +167,9 @@ which generates JSON like this:
154
167
This is not suitable for ReactJS props, which is expected to be a key-value object. You will need to wrap your index.json.jbuilder node with a root node, like so:
155
168
156
169
```ruby
157
-
json.messages do |json|
158
-
json.array!(@messages) do |message|
159
-
json.extract! message, :id, :name
160
-
json.url message_url(message, format::json)
161
-
end
170
+
json.messages(@messages) do |message|
171
+
json.extract! message, :id, :name
172
+
json.url message_url(message, format::json)
162
173
end
163
174
```
164
175
@@ -193,8 +204,6 @@ In order for us to render your React components, we need to be able to find them
193
204
This will bring in all files located in the `app/assets/javascripts/components` directory. You can organize your code however you like, as long as a request for `/assets/javascripts/components.js` brings in a concatenated file containing all of your React components, and each one has to be available in the global scope (either `window` or `global` can be used). For `.js.jsx` files this is not a problem, but if you are using `.js.jsx.coffee` files then the wrapper function needs to be taken into account:
This will return the fully rendered component markup, and as long as you have included the `react_ujs` script in your page, then the component will also be instantiated and mounted on the client.
213
222
223
+
### Component Generator
224
+
225
+
react-rails ships with a Rails generator to help you get started with a simple component scaffold. You can run it using `rails generate react:component ComponentName`. The generator takes an optional list of arguments for default propTypes, which follow the conventions set in the [Reusable Components](http://facebook.github.io/react/docs/reusable-components.html) section of the React documentation.
226
+
227
+
For example:
228
+
229
+
```shell
230
+
rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
231
+
```
232
+
233
+
would generate the following in `app/assets/javascripts/components/post.js.jsx`:
The generator can use the following arguments to create basic propTypes:
258
+
259
+
* any
260
+
* array
261
+
* bool
262
+
* element
263
+
* func
264
+
* number
265
+
* object
266
+
* node
267
+
* shape
268
+
* string
269
+
270
+
The following additional arguments have special behavior:
271
+
272
+
*`instanceOf` takes an optional class name in the form of {className}
273
+
*`oneOf` behaves like an enum, and takes an optional list of strings in the form of `'name:oneOf{one,two,three}'`.
274
+
*`oneOfType` takes an optional list of react and custom types in the form of `'model:oneOfType{string,number,OtherType}'`
275
+
276
+
Note that the arguments for `oneOf` and `oneOfType` must be enclosed in single quotes to prevent your terminal from expanding them into an argument list.
277
+
214
278
## Configuring
215
279
216
280
### Variants
@@ -260,8 +324,6 @@ end
260
324
It is possible to use JSX with CoffeeScript. The caveat is that you will still need to include the docblock. Since CoffeeScript doesn't allow `/* */` style comments, we need to do something a little different. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
0 commit comments