File tree Expand file tree Collapse file tree 3 files changed +42
-2
lines changed Expand file tree Collapse file tree 3 files changed +42
-2
lines changed Original file line number Diff line number Diff line change 204204### Component generator
205205
206206` react-rails ` ships with a Rails generator to help you get started with a simple component scaffold.
207- You can run it using ` rails generate react:component ComponentName ` .
207+ You can run it using ` rails generate react:component ComponentName (--es6) ` .
208208The generator takes an optional list of arguments for default propTypes,
209209which follow the conventions set in the [ Reusable Components] ( http://facebook.github.io/react/docs/reusable-components.html )
210210section of the React documentation.
@@ -239,6 +239,18 @@ var Post = React.createClass({
239239});
240240```
241241
242+ #### Options
243+
244+ ** --es6** : Generate the same component but using cutting edge es6 class
245+
246+ For example:
247+
248+ ``` shell
249+ rails generate react:component Label label:string --es6
250+ ```
251+
252+ #### Arguments
253+
242254The generator can use the following arguments to create basic propTypes:
243255
244256 * any
Original file line number Diff line number Diff line change @@ -50,6 +50,11 @@ class ComponentGenerator < ::Rails::Generators::NamedBase
5050 :default => [ ] ,
5151 :banner => "field[:type] field[:type] ..."
5252
53+ class_option :es6 ,
54+ type : :boolean ,
55+ default : false ,
56+ desc : 'Output es6 class based component'
57+
5358 REACT_PROP_TYPES = {
5459 "node" => 'React.PropTypes.node' ,
5560 "bool" => 'React.PropTypes.bool' ,
@@ -80,7 +85,7 @@ class ComponentGenerator < ::Rails::Generators::NamedBase
8085 }
8186
8287 def create_component_file
83- extension = "js.jsx"
88+ extension = options [ :es6 ] ? "es6.jsx" : "js.jsx"
8489 file_path = File . join ( 'app/assets/javascripts/components' , "#{ file_name } .#{ extension } " )
8590 template ( "component.#{ extension } " , file_path )
8691 end
Original file line number Diff line number Diff line change 1+ class < %= file_name . camelize % > extends React . Component {
2+ render ( ) {
3+ < % if attributes . size > 0 - % >
4+ return (
5+ < div >
6+ < % attributes . each do | attribute | - % >
7+ < div > < %= attribute [ :name ] . titleize % > : { this . props . < %= attribute [ :name ] . camelize ( :lower ) % > } </ div >
8+ < % end - % >
9+ </ div >
10+ );
11+ < % else - % >
12+ return < div /> ;
13+ < % end - % >
14+ }
15+ }
16+
17+ < % if attributes . size > 0 -%>
18+ < %= file_name . camelize % > .propTypes = {
19+ < % attributes . each_with_index do | attribute , idx | - % >
20+ < %= attribute [ :name ] . camelize ( :lower ) % > : < %= attribute [ :type ] % > < % if ( idx < attributes . length - 1 ) % > , < % end % >
21+ < % end - % >
22+ } ;
23+ < % end - % >
You can’t perform that action at this time.
0 commit comments