Basic React Class Component

Posted on

in

,

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. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

April 2024
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
2930