Luciogi

React class based component

Table of Contents


Published on

It has been 2 weeks, that I am working with javascript ecosystem. I observed JS world is not leaned towards Classes (or OOP). I thought to get taste of classes in Javascript In javascript classes behave differently than other languages like Python and Ruby or C++.

Note: In react, class components are deprecated, but will not be removed. I am showing this for learning purpose.

Javascript class

class Person {
    constructor() {
       // sprinkle code here 
    }
    
    greet() {
        console.log("Hey I belong to person class");
    } 
}

class Person {
    constructor () {
        this.name = "John Doe"; // name is field
    }

}

class Person {
    name = "John";
    constructor () {
       // sprinkle code here 
    }
}

Now we can proceed to react class components.

React class component

import React from "react"
class MyComponent extends React.Component {
    // code
}

import React from "react"
class MyComponent extends React.Component {
    state = { count: 0 }
    // ...
}

import React from "react"
class MyComponent extends React.Component {
    state = { count: 0 }

    render() {
        return (
            <h1> Count is {this.state.count}</h1> // accessing state
        );
    }
}

import React from "react"
class MyComponent extends React.Component {
    state = { count: 0 }
    
    increment() {
        // updating value by 1
        this.setState( prev => prev.count + 1);
    }

    render() {
        return (
            <h1> Count is {this.state.count}</h1> // accessing state
        );
    }
}

Note: In class component, state must be only in one variable i.e state To store multiple data, use this.state = { data1: ... , data2: ... }

When updating state, each key retain its old values, unless you modify that too


import React from "react"
class MyComponent extends React.Component {
    state = { data1: 10, data2: 0 }
    
    updateData() {
        this.setState( {data1: 100} ); // here data2 will retain value of 0
    }

    render() {
        return (
            <h1> Count is {this.state.count}</h1> // accessing state
        );
    }
}


Related Posts

Tags: