react classssses

react-classes.js

// Functional Components: Props Below
const MyFunctionalComponent = ({ text, className, ...props }) => (
  <div {...props}
    className={classNames('my-functional-component', className)} >
    {text}
  </div>
);

MyFunctionalComponent.propTypes = {
  /** Text to render */
  text: string,

  /** Optional className to add to the component for additional styling. */
  className: string,
};

MyFunctionalComponent.defaultProps = {
  text: '',
  className: ''
};


// Components & PureComponents: Props up Tops™
export default class MyReactComponent extends Component {
  static propTypes = {
    /** Text to render */
    text: string,

    /** Optional CSS classname for overriding and extending styles. */
    className: string
  };

  static defaultProps = {
    text: '',
    className: ''
  };

  render() {
    const { className, text, ...props } = this.props;
    return (
      <div {...props}
        className={classNames('my-react-component', className)}>
        {text}
      </div>
    );
  }
}