Suggestion to add functional option to component generator

[CaitlinWeb-st]

Thank you for this wonderful library, it's helped me set up React in Rails when I'm new to Rails. It's especially nice to have rails g react:component for quickly creating new components. I'm using a lot of functional components in my project, though, so it's not as useful.

What about adding an option to make it a functional component? Something like rails g react:component --func or rails g react:component --function.

This would create:

import React from "react"
import PropTypes from "prop-types"
function SomeComponent() {
  return (
    <React.Fragment>
      Example: {this.props.example}
    </React.Fragment>
  );
}

SomeComponent.propTypes = {
  example: PropTypes.text
};
export default SomeComponent

[yedhink]

This would be a super helpful feature. Currently I manually change all class components to functional, since in our workflow we usually stick with functional components as starters.

[wasabigeek]

It's possible to override the template by copying it into your Rails project at this path lib/templates/react/component/component.es6.jsx and then modifying it. Took me a while to find the correct path, hope it helps someone!

[paulodeon]

Worth noting that React now recommends using functional components. This should be the default with the class based generator as an option

[ahangarha]

@justin808 Since officially it is recommended to use function components, isn't it better we use such components by default unless the developer wants to make a class based one?

If not, this issue is resolved by #1093.

[harrison-broadbent]

Hi just checking back in on this. Has there been any more work on adding functional components into react-rails?

[ahangarha]

@justin808 Let's add this to the list for the version 3, to create a functional component unless the specific option for a class component is given.

[ahangarha]

Please check the add-option-for-generating-functional-component branch and share your feedback.

cc: @CaitlinWeb-st @yedhink @wasabigeek @harrison-broadbent