React React.createClass vs extends React.Component Create React Component
Example
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.createClass({
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Let's take the above React.createClass definition and convert it to use an ES6 class.
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div></div>
);
}
}
export default MyComponent;
In this example we're now using ES6 classes. For the React changes, we now create a class called MyComponent and extend from React.Component instead of accessing React.createClass directly. This way, we use less React boilerplate and more JavaScript.
PS: Typically this would be used with something like Babel to compile the ES6 to ES5 to work in other browsers.
