Skip to content

Instantly share code, notes, and snippets.

@apzentral
Last active January 1, 2018 14:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save apzentral/34b51f6aee99c50f8e22 to your computer and use it in GitHub Desktop.
Save apzentral/34b51f6aee99c50f8e22 to your computer and use it in GitHub Desktop.
ReactJS: Skeleton for React component
/**
* @jsx React.DOM
*/
'use strict';
/**
* Libraries
*/
var React = require('react');
/**
* Variables
*/
var DEBUG = false;
var _name = 'ComponentName';
/**
* Component Start
*/
var Component = React.createClass({
displayName: _name,
propTypes: {},
/**
* Initialization
*/
getInitialState: function() {
if (DEBUG) {
console.log('[*] ' + _name + ':getInitialState ---');
}
return {};
},
getDefaultProps: function() {
if (DEBUG) {
console.log('[*] ' + _name + ':getDefaultProps ---');
}
return {};
},
/**
* Render
*/
render: function() {
if (DEBUG) {
console.log('[*] ' + _name + ':render ---');
}
return ( < div / > );
},
/**
* Life-cycle Methods
*/
componentWillMount: function() {
if (DEBUG) {
console.log('[*] ' + _name + ':componentWillMount ---');
}
},
componentDidMount: function() {
if (DEBUG) {
console.log('[*] ' + _name + ':componentDidMount ---');
}
},
componentWillReceiveProps: function(nextProps) {
if (DEBUG) {
console.log('[*] ' + _name + ':componentWillReceiveProps ---');
console.log(nextProps);
}
},
shouldComponentUpdate: function(nextProps, nextState) {
if (DEBUG) {
console.log('[*] ' + _name + ':shouldComponentUpdate ---');
console.log(' Next Properties:');
console.log(nextProps);
console.log(' Next States:');
console.log(nextState);
}
},
componentWillUpdate: function(nextProps, nextState) {
if (DEBUG) {
console.log('[*] ' + _name + ':componentWillUpdate ---');
console.log(' Next Properties:');
console.log(nextProps);
console.log(' Next States:');
console.log(nextState);
}
},
componentDidUpdate: function(prevProps, prevState) {
if (DEBUG) {
console.log('[*] ' + _name + ':componentDidUpdate ---');
console.log(' Next Properties:');
console.log(nextProps);
console.log(' Next States:');
console.log(nextState);
}
},
componentWillUnmount: function() {
if (DEBUG) {
console.log('[*] ' + _name + ':componentWillUnmount ---');
}
}
});
module.exports = Component;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment