function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

//If you don't pass a value to a property, it defaults to true
<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

In JSX expressions with start and end tags, the content between tags is passed as a special parameter: props.children

<MyComponent>Hello world!</MyComponent>

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

false, null, undefined, and true are valid children, but they are not rendered directly

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

If you want something like false, true, null, or undefined to appear in the output, you must first convert it to a string:

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

JSX will only render when showHeader is true

<div>
  {showHeader && <Header />}
  <Content />
</div>

The following code will not run as you expect, because when props.message is an empty array, it will print 0:

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

Use PropTypes for type checking

import PropTypes from 'prop-types';

class Greeting extends BaseComponent {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

// Specify a default value for the property:
Greeting.defaultProps = {
  name: 'Stranger'
};

MyComponent.propTypes = {
  // You can declare properties as the following JS native types
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // Any element that can be rendered (including numbers, strings, subelements, or arrays).
  optionalNode: PropTypes.node,

  // A React element
  optionalElement: PropTypes.element,
  // You can also add 'isRequired' after any PropTypes property` 
  // Suffix, so that if the parent component of this property is not provided, a warning message will be printed
  requiredFunc: PropTypes.func.isRequired,

  // Any type of data
  requiredAny: PropTypes.any.isRequired,
};

With PropTypes.element you can specify that only one child is passed

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

class SayHello extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // It's a key business
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert(this.state.message);
  }

  render() {
    // Because 'this.handleClick' is bound to an instance, we can use it to handle the click event
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}