Ways to define a React component

ReactComponent.js

/*
  This gist explains the several ways to define a React component
 */

// Functional components that has no life cycle methods tied to itself
// Using the function
function SimpleFunction(props) {
  // passing in the props that is given by React by default
  return (
    <div>
    {props.someCustomProperty}
    </div>
  )
}

// Using a variable
// style 1
const AnotherFunctional = (props) => {
  return (
    <div>{props.anotherCustomProp}</div>
  )
}

// style 2
const AnotherShortcut = ({ destructedProp, otherProps }) => {
  // props are destructed immediately in the arguments
  // a little verbose
  return (
    <div>
      <label>{destructedProp}</label>
      {otherProps}
    </div>
  )
}

// style 3
const ComponentNotProps = (customProps) => {
  return <div>{customProps}</div>
}

// Usage
// They can be called and used in such ways
const App = () => (
  <div>
    <SimpleFunction />
    <AnotherFunctional />
    <AnotherShortcut />
    {ComponentNotProps("Hi")}
  </div>
)