Skip to content

Commit 768e3ef

Browse files
committed
Document the command line component generator
1 parent da5589c commit 768e3ef

File tree

1 file changed

+54
-0
lines changed

1 file changed

+54
-0
lines changed

README.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,60 @@ react_component('HelloMessage', {name: 'John'}, {prerender: true})
154154
```
155155
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.
156156

157+
### Component Generator
158+
159+
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.
160+
161+
For example:
162+
163+
```shell
164+
rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
165+
```
166+
167+
would generate the following in `app/assets/javascripts/components/post.js.jsx`:
168+
169+
```jsx
170+
/** @jsx React.DOM */
171+
var Post = React.createClass({
172+
propTypes: {
173+
title: React.PropTypes.string,
174+
body: React.PropTypes.string,
175+
published: React.PropTypes.bool,
176+
publishedBy: React.PropTypes.instanceOf(Person)
177+
},
178+
179+
render: function() {
180+
return <div>
181+
<div>Title: {this.props.title}</div>
182+
<div>Body: {this.props.body}</div>
183+
<div>Published: {this.props.published}</div>
184+
<div>Published By: {this.props.published_by}</div>
185+
</div>;
186+
}
187+
})
188+
```
189+
190+
The generator can use the following arguments to create basic propTypes:
191+
192+
* any
193+
* array
194+
* bool
195+
* component
196+
* func
197+
* number
198+
* object
199+
* renderable
200+
* shape
201+
* string
202+
203+
The following additional arguments have special behavior:
204+
205+
* `instanceOf` takes an optional class name in the form of {className}
206+
* `oneOf` behaves like an enum, and takes an optional list of strings in the form of `'name:oneOf{one,two,three}'`.
207+
* `oneOfType` takes an optional list of react and custom types in the form of `'model:oneOfType{string,number,OtherType}'`
208+
209+
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.
210+
157211
## Configuring
158212

159213
### Variants

0 commit comments

Comments
 (0)