diff --git a/README.md b/README.md index a9f86de9..4f70aaeb 100644 --- a/README.md +++ b/README.md @@ -204,7 +204,7 @@ end ### Component generator `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`. +You can run it using `rails generate react:component ComponentName (--es6)`. 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. @@ -239,6 +239,18 @@ var Post = React.createClass({ }); ``` +#### Options + +**--es6** : Generate the same component but using cutting edge es6 class + +For example: + +```shell +rails generate react:component Label label:string --es6 +``` + +#### Arguments + The generator can use the following arguments to create basic propTypes: * any diff --git a/lib/generators/react/component_generator.rb b/lib/generators/react/component_generator.rb index 14b9682f..f585c2f5 100644 --- a/lib/generators/react/component_generator.rb +++ b/lib/generators/react/component_generator.rb @@ -50,6 +50,11 @@ class ComponentGenerator < ::Rails::Generators::NamedBase :default => [], :banner => "field[:type] field[:type] ..." + class_option :es6, + type: :boolean, + default: false, + desc: 'Output es6 class based component' + REACT_PROP_TYPES = { "node" => 'React.PropTypes.node', "bool" => 'React.PropTypes.bool', @@ -80,7 +85,7 @@ class ComponentGenerator < ::Rails::Generators::NamedBase } def create_component_file - extension = "js.jsx" + extension = options[:es6] ? "es6.jsx" : "js.jsx" file_path = File.join('app/assets/javascripts/components', "#{file_name}.#{extension}") template("component.#{extension}", file_path) end diff --git a/lib/generators/templates/component.es6.jsx b/lib/generators/templates/component.es6.jsx new file mode 100644 index 00000000..75a48094 --- /dev/null +++ b/lib/generators/templates/component.es6.jsx @@ -0,0 +1,23 @@ +class <%= file_name.camelize %> extends React.Component { + render () { +<% if attributes.size > 0 -%> + return ( +