React.createClass

JavaScript classes were introduced in ES 2015.
React originally included its own class syntax that allowed you to generate component classes.

var myClass = React.createClass ({ 
}

However after the success and quick adoption of ES 2015 this class syntax was removed in React version 15.5.
This syntax was moved to a separate module called "create-react-class".

var CreateReactClass = require('create-react-class')  
var myClass = CreateReactClass ({
}

Defining Classes

// With ES 2009 
var React = require('react')
var CreateReactClass = require('create-react-app')
var myClass = CreateReactClass( {
   render : function() {
      return React.createElement("h1", null, "Title");
   }
})

// With ES 2015
import React from 'react'
class myClass extends React.Component {
   render() {
      return ( <h1>Title</h1> )
   }
})

Declaring Default Props

// With ES 2009 
var React = require('react')
var CreateReactClass = require('create-react-app')
var myClass = CreateReactClass( {
   getDefaultProps : function() {
      return {
         property1 : 'some text'
      }
   }
})

// With ES 2015
import React from 'react'
class myClass extends React.Component {
}
myClass.defaultProps = {
   property1 : 'some text'
}

Setting the Initial State

// With ES 2009 
var React = require('react')
var CreateReactClass = require('create-react-app')
var myClass = CreateReactClass( {
   getInitialState : function() {
      return {
         state1 : this.props.property1
      }
   }
})

// With ES 2015
import React from 'react'
class myClass extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         state1 : this.props.property1
      };
   }
}

© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext