Which ReactJS syntax to use; React.createClass or ES6 extends? -

i'm beginner of reactjs. learned , studied lot of documents , ebooks on various websites. realize there 2 syntaxes reactjs. example:

react.createclass({   displayname: 'counter',   getdefaultprops: function(){     return {initialcount: 0};   },   getinitialstate: function() {     return {count: this.props.initialcount}    },   proptypes: {initialcount: react.proptypes.number},   tick() {     this.setstate({count: this.state.count + 1});   },   render() {     return (       <div onclick={this.tick}>         clicks: {this.state.count}       </div>     );   } }); 

and version written es6:

class counter extends react.component {   static proptypes = {initialcount: react.proptypes.number};   static defaultprops = {initialcount: 0};    constructor(props) {     super(props);     this.state = {count: props.initialcount};   }    state = {count: this.props.initialcount};   tick() {     this.setstate({count: this.state.count + 1});   }    render() {     return (       <div onclick={this.tick.bind(this)}>         clicks: {this.state.count}       </div>     );   } } 

what better way use reactjs? found these libraries, application on github used perform lot es6.

the second approach correct 1 adopt going forward facebook have said deprecate react.createclass approach.

from react v0.13 release notes:

our eventual goal es6 classes replace react.createclass completely, until have replacement current mixin use cases , support class property initializers in language, don't plan deprecate react.createclass

personally think second approach makes easier read code, more subjective reason.

however, stated above, it's important note es6 format not support mixins, if need mixin need use createclass format component.

this post "react.createclass versus extends react.component" todd motto has information on difference between 2 syntaxes. it's worth reading discussion of how this keyword behaves differently between 2 syntaxes.

edit: dan caragea's post below makes excellent points should considered too.

a third alternative...

there third way of defining react component, called 'stateless functions' in react documentation , called 'stateless functional components' or 'functional stateless components'. example docs:

function hellomessage(props) {   return <div>hello {props.name}</div>; } 

defining component function means created anew each time , has no ongoing internal state. makes component easier to reason about, , test, component's behaviour identical given set of properties (props), rather potentially varying run-to-run due values of internal state.

this approach works particularly when using separate state management approach such redux , ensures redux's time-travel produce consistent results. functional stateless components make implementing features undo/redo simpler.