react.js

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

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

function MySimpleComponent(props) {
  return (
    <h1>Hello { props.name }</h1>
  );
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {}; // Set initial state
  }
  handleClick() {
    // Bad:
    // https://facebook.github.io/react/docs/optimizing-performance.html#examples
    // Since this code mutates the words array in the handleClick method of WordAdder,
    // the old and new values of this.props.words will compare as equal, even though
    // the actual words in the array have changed.
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});
  }
  handleClick() {
    // Good:
    // https://facebook.github.io/react/docs/optimizing-performance.html#the-power-of-not-mutating-data
    this.setState(prevState => ({
      words: prevState.words.concat(['marklar'])
    }));
  }
  componentWillUnmount() {}
  componentDidMount() {}
  componentWillMount() {}
  shouldComponentUpdate(nextProps, nextState) {
    // https://facebook.github.io/react/docs/optimizing-performance.html
    return true;
  }
  render() {
    // https://facebook.github.io/react/docs/composition-vs-inheritance.html
    // This lets other components pass arbitrary children to them by nesting the JSX
    return (
      <div>{ this.props.children }</div>
    );
  }
}

// https://facebook.github.io/react/docs/typechecking-with-proptypes.html
MyComponent.propTypes = {
};

MyComponent.defaultProps = {
};