Class vs Function Components

Ada dua cara untuk membuat komponen di React: menggunakan classes dan functions.

Component-based fungsi telah lebih trendi selama setahun terakhir ini tetapi masih banyak proyek yang dibangun dengan komponen berbasis class. Jadi, penting bagi Anda untuk mempelajari dan memahami kedua gaya membuat components.

Untuk saat ini, kita akan fokus pada components berbasis class dan kita akan membahas components berbasis function-based components.

Jadi, jika proyek Anda saat ini menggunakan components berbasis fungsi, jangan biarkan hal itu mematahkan semangat Anda untuk melanjutkan task. Semua konsep yang akan Anda pelajari akan membantu Anda lebih memahami component berbasis fungsi.

class component

import React, {Component} from "react";

class Home extends Component {
    constructor(){
        super();
        this.state={
            count :0
        };
        this.increase=this.increase.bind(this);
    }
     
   increase(){
       this.setState({count : this.state.count +1});
   }
 
    render(){
        return (
            <div style={{margin:'50px'}}>
               <h1>Class Component</h1>
               <h2> {this.state.count}</h2> 
               <button onClick={this.increase}> Add</button>
 
            </div>
        )
    }
}

export default Home

function

import React, {useState} from "react";

const Home=()=>{
    const [count, setCount] = useState(0);
 
    const increase = () => {
        setCount(count+1);
    }
 
    return (
        <div style={{margin:'50px'}}>
            <h1>Function</h1>
          <h2>{count}</h2>
            <button onClick={increase}>Add</button>
        </div>
    )
} 

export default Home