React-CreateComponent.js

// Type 1
var ClickableImage = function(props) { 
  return (
    <a href={props.href}> <img src={props.src} />
    </a> );
};
    
// ES6 version 
var ClickableImage = props => ( 
    <a href={props.href}>
      <img src={props.src} /> 
    </a>
);
    
// Type 2 using React.createClass
var ClickableImage = React.createClass({ render: function() {
  return (
    <a href={this.props.href}> <img src={this.props.src} /></a> 
    );
  } 
});

var Timer = React.createClass({
  getInitialState: function() {
    return { counter: this.props.initialSeconds }; 
  },
  componentDidMount: function() {
    var component = this, currentCounter; 
    component.timerId = setInterval(function() {
      currentCounter = component.state.counter; 
      if (currentCounter === 1) {
        clearInterval(component.timerId); 
      }
      component.setState({ counter: currentCounter - 1 }); 
    }, 1000);
  },
  render: function() {
    return <div>{this.state.counter}</div>; 
  }
}); 
ReactDOM.render(<Timer initialSeconds={42} />, document.getElementById("react") );

    
// Type 3 using ES6 - 'extend'
                
class Timer extends React.Component { 
  constructor(props) {
    super(props);
    this.state = { counter: this.props.initialSeconds };
  }
  componentDidMount() {
    let currentCounter;
    this.timerId = setInterval(() => { 
      currentCounter = this.state.counter;
      if (currentCounter === 1) {
        clearInterval(this.timerId);
      }
      this.setState({ counter: currentCounter - 1 }); 
    }, 1000);
  } 
  render() {
    return ( <div>{this.state.counter}</div>);
  }
}