< Back to Coding, React

Basic React Class Component

Just a basic example of a React Class component:

import React from 'react';

class ComponentName extends React.Component {
  //initialisation function to initialise state or bind methods
  constructor(props) {
    super(props);
    this.state = {
      something: "something"
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e){
    console.log("something");
  }

  componentDidMount(){
    //component got added. Initialise things that require DOM objects
  }

  componentWillUnmount(){
    //clean things up from componentDidMount
  }

  componentDidUpdate(prevProps) {
    //whenever state changes etc
  }

  render(){
    
    //do some logic here
    var somethingVar = "something";

    return(
      <button onClick={this.handleClick} className="">
        {somethingVar} {this.state.something} {this.props.something}
      </button>
    )
  }
}

export default ComponentName;

Leave a Reply

Your email address will not be published.