xthecapx

// in the function body
let description;
if (product.description) {
 description = <p>{`Description: ${product.description}`}</p>
}
// Bellow the h3 closing tag
{description}

xthecapx

{product.description ? <p>{`Description: ${product.description}`}</p> : null}

xthecapx

{product.description && <p>{`Description: ${product.description}`}</p>}

xthecapx

{products.map(product => {
  return (
    <div>
      <h3>
        <a title={`${product.name} details`}>
          { product.name }
        </a>
      </h3>
    </div>
  )

xthecapx

// Angular
<!-- <Tag *if="name"></Tag> -->


// React
render() {
  return (
    <p>
       {/* This is a comment, one line */}
       {// This is a block 

xthecapx

// Angular HTML
<div (click)="fn()" >Click me!</div>

// Angular Component
@Componet( ... )
export class MyComponent {
  fn() {
    console.log('Clicked')
  };
}

xthecapx

// Angular
<h1>{{name}}</h1>;

// React
<h1>{name}</h1>;

xthecapx

// Functions Mode looks like:
function MyHair(props) {
  return <h1>My hair is, {props.color}</h1>;
}

// Class Mode looks like:
class MyHair extends React.Component {
  render() {
    return <h1>My hair is, {props.color}</h1>;
  }

xthecapx

React.createElement(
  MyHair,
  {color: 'blue'},
  'My Head'
)

xthecapx

<MyHair color="blue">
  My Head
</MyHair>