https://blog.bitsrc.io/react-16-lifecycle-methods-how-and-when-to-use-them-f4ad31fb2282

constructor

Reference: https://blog.bitsrc.io/react-16-lifecycle-methods-how-and-when-to-use-them-f4ad31fb2282

Most Common Use Case For Constructor: Setting up state, creating refs and method binding.

render

Reference: https://lucybain.com/blog/2016/react-state-vs-pros/

// render is the only required method for a class component 
render() {
  return (
    <button onClick={() => this.updateCount()}>
      Clicked {this.state.count} times
    </button>
  );
}

state

Reference: https://itnext.io/react-setstate-usage-and-gotchas-ac10b4e03d60

Interesting reading: Boost your React with State Machines

class Counter extends React.Component {
 constructor(props, context) {
    super(props, context)
    this.state = {
      quantity: 1,
      counter: 0
    }
  }
}
// or
class Counter extends React.Component {
  state = {
    quantity: 1,
    counter: 0
  }
}

props

Reference: https://www.freecodecamp.org/news/react-js-for-beginners-props-state-explained/

const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 
};

defaultProps

Reference: https://blog.bitsrc.io/understanding-react-default-props-5c50401ed37d

ES6 class

class ReactComp extends React.Component {}
ReactComp.defaultProps = {}
// or
class ReactComp extends React.Component {
    static defaultProps = {}
}

Functional component

function Reactcomp(props) {}
ReactComp.defaultProps = {}