Tutorial by Examples

Let's explore the syntax differences by comparing two code examples. React.createClass (deprecated) Here we have a const with a React class assigned, with the render function following on to complete a typical base component definition. import React from 'react'; const MyComponent = React.crea...

There are important changes in how we use and declare default props and their types. React.createClass In this version, the propTypes property is an Object in which we can declare the type for each prop. The getDefaultProps property is a function that returns an Object to create the initial props....

There are changes in how we are setting the initial states. React.createClass We have a getInitialState function, which simply returns an Object of initial states. import React from 'react'; const MyComponent = React.createClass({ getInitialState () { return { activePage: 1 ...

We can use mixins only with the React.createClass way. React.createClass In this version we can add mixins to components using the mixins property which takes an Array of available mixins. These then extend the component class. import React from 'react'; var MyMixin = { doSomething() { ...

Using React.createClass will automatically bind this context (values) correctly, but that is not the case when using ES6 classes. React.createClass Note the onClick declaration with the this.handleClick method bound. When this method gets called React will apply the right execution context to the ...

import React from 'react'; class SearchEs6 extends React.Component{ constructor(props) { super(props); this.state = { searchResults: [] }; } showResults(response){ this.setState({ searchResults: response.results ...