Class Components

React.Component is the base class for React components when they are defined using ES 2015 classes

React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn't implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
If your React component's render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

This requires you to extend from React.Component and overwrite the render method to return a React element.
This will overwrite the render method inherited from the React.Component class.

class Welcome extends React.Component { 
  render() { 
    return ( 
        <h1>Hello,{ this.props.name}</h1>; 
    ) 
  } 
} 

These have lifecycle methods
These have their own state
Before React 16.8 using Class Components was the only way of managing the state of a component.

Class Component

class MyComponent extends React.Component { 
   render() { 
      return ( 
      <h1> 
         React { this.props.version || 1 } Notes 
      </h1> 
      ); 
   } 
} 

Constructors

class Button extends React.Component { 
   constructor(props) { 
      super(props); 
      this.state = { counter : 4 }; 
   render() { 
   } 
} 

This is equivalent to

class Button extends React.Component { 
   state = {counter : 4 }; 
   render() { 
   } 
} 

Sample

class App extends React.Component { 
   constructor(props) { 
      super(props); 
      this.state = { items: [] } 
   } 
   render() { 
      const stocks = this.state.items.map((item, index) => ( 
       <li>{item}</li> 
     )); 
    return ( 
       <div> 
           <h1>(this.props.title)</h1> 
            <div> 
                <input type="text" 
                     ref="newItem" 
                     onKeyPress={this.add.bind(this)}  /> 
            </div> 
         <ul>{stocks}</ul> 
       </div> 
     ); 
    } 
    add(event) { 
       if (event.key == "Enter") { 
            var list = this.state.items; 
            list.unshift(this.refs.newItem.value); 
            this.setState({items; list}); 
            this.refs.newItem.value = ""; 
       } 
    } 
} 
ReactDOM.render(<App title="Hello World!" />, 
       document.getElementById("app")); 

create an App component with title property
The component is rendered to a DOM element
The components render function adds child elements (using JSX)
The render function is returning JSX code (html and javascript)
The component can only have one root element (wrapped in a div)
The component can have custom properties
Any items that are bound to component state are bound 2 ways
Events can be bound with function.bind syntax
Models can be represented as a ref on the component

// Without JSX 
var HelloWorld_class = React.createClass ( { 
   render : function() { 
      return React.createElement('h1', null, this.props.name)  
   } 
} ); 
var rElement = React.createElement(HelloWorld_class, {name: 'Hello World'}, null); 
var dElement = document.getElementById('app');  
ReactDOM.render(rElement, dElement); 

// Using JSX 
var HelloWorld_class = React.createClass ( { 
   render : function() { 
      return <h1>{this.props.name}</h1>; 
   } 
} ); 
var rElement = < HelloWorld_class name= 'Hello World' /> 
var dElement = document.getElementById('app');  
ReactDOM.render(rElement, dElement); 

// Using ES 2015 
class HelloWorld_class extends React.Component { 
   render () { 
      return <h1>{this.props.name}</h1>; 
   } 
}; 
var rElement = < HelloWorld_class name= 'Hello World' /> 
var dElement = document.getElementById('app');  
ReactDOM.render(rElement, dElement);