ES 2009 Components

It was possible to create React components before ES 2015.

1) What is an ES 2009 Component ?
It was possible to create components before ES 2015 was released.
These were represented with a JavaScript function.
Props are implicitly defined.
We implicitly bind 'this' to functions.
We need to use commas to separate functions or methods within the class.
Properties and methods (defined as functions) were bound automatically, which means 'this' always refers to the instance.
propTypes property is an Object where you can declare the type of each prop.
The getDefaultProps property is a function that returns an Object to create intial props.
The getInitialState function gets called once when the component is mounted.
In React 15.5 the React.createClass was removed and placed in a separate package called "create-react-class".
Instead of using "MyComp = React.createClass" you need to use "MyComp = createReactClass"
In React 15.5 the built-in PropTypes were removed and placed in a separate package called "prop-types".

var React = require('react');  
var ReactDOM = require('react-dom');  
var createReactClass = require('create-react-class');  

var R_Comp = createReactClass( { 
   defaultProps : { 
      Prop1: 'def';  
   }, 
   getInitialState : function() { 
      return { 
         s_color: 'red',  
         s_counter: 0 
      }; 
   }, 
   f_handleIncrement : function() { 
      this.setState( {s_counter: this.state.s_counter + 1} ); 
      this.setState( {s_color: 'blue'} );  
   }, 
   f_handleDecrement : function() { 
      this.setState( {s_counter: this.state.s_counter - 1} ); 
   }, 
   f_handleResetCount : function() { 
      this.setState( {s_counter: 0} ); 
   }, 
   render : function() { 
      return ( 
        <div> 
          <h1 style = { {color : this.state.s_color} }>Hello {this.props.p_prop1} {this.state.s_counter}</h1> 
          <button onClick={this.f_handleIncrement}>Increment</button> 
          <button onClick={this.f_handleDecrement}>Decrement</button> 
          <button onClick={this.f_handleResetCount}>Reset</button> 
        </div> 
      ); 
   } 
}); 
ReactDOM.render(<R_Comp Prop1='text'/>, document.getElementById('app')); 

2) Was it possible to perform runtime validation of props ?
Yes you could use PropTypes.
This is the syntax after React 15.5 using the "prop-types" project

import PropTypes from 'prop-types';  
R_Comp.propTypes = { 
   Prop1: PropTypes.bool,   
   Prop2: PropTypes.string.isRequired 
} 

This is the syntax before React 15.5.

R_Comp.propTypes = { 
   Prop1: React.PropTypes.bool    
   Prop2: React.PropTypes.string.isRequired 
} 

3) Was it possible to create a component in ES 2009 using a function ?
Yes

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

4) Was it possible to have and maintain state in an ES 2009 component ?
Yes. You could use the setState method.

5) What would the syntax be for an ES 2009 component without JSX ?

( function() { 
   function R_Comp() { 
        return React.createElement('div', null,  
           React.createElement('h1',null,'Hello') );  
     } 
}) (); 

6) What is a mixin ?
npm install react-mixin