JS syntax and destructuring examples.js

// This is a stateless functional component which
// largely acts like a 'normal' Class-based component's
// `render()` function.
var Hello = function(props) {
  return <div>Hello, {props.name}</div>;
}

// Shorthand.
var Hello = props => <div>Hello, {props.name}</div>;

// I prefer parens for fat arrow function arguments though.
var Hello = (props) => <div>Hello, {props.name}</div>;

// You can also use parens for immediate returns like this.
var Hello = (props) => (
  <div>Hello, {props.name}</div>
);

// Or you could use braces and a return statement.
// This is good if you need to do a little logic,
// like the destructuring I do below.
var Hello = (props) => {
  // The line below translates to "let name = props.name".
  let { name } = props; // This is called "destructuring".
  // You can do all kinds of cool shit with it. Read: 
  // https://ponyfoo.com/articles/es6-destructuring-in-depth
  return (
    <div>
      Hello, {name}
    </div>
  )
};

// You can do destructuring right in
// the arguments too...
var Hello = ({name}) => <div>Hello, {name}</div>;