React Function Component

Selain diturunkan dari class component, react component juga dapat berupa fungsi JavaScript. Kekurangan dari component fungsi adalah tidak memiliki akses terhadap state.

Jika Anda memerlukan component yang tidak bergantung pada state, component fungsi dapat digunakan.

Menggunakan script dari modul sebelumnya, kita ubah AppFooter menjadi component fungsi. Dapat dilihat, AppFooter tidak memerlukan state.

Berikut code function component untuk AppFooter

import React, {Fragment} from 'react';
//import file css
import './AppFooter.css';

export default function AppFooter(){
    const curYear = new Date().getFullYear();
    return(
        <Fragment>
            <hr/>
            <p className='footer'>Copyright &copy; 2021 - {curYear} Skillplus.web.id</p>
        </Fragment>
    );
}

Perbedaan dari AppFooter menggunakan class adalah, pada baris import, tidak memerlukan import component.

AppFooter dideklarasikan sebagai fungsi, bukan sebagai class yang diextend dari class component.

Karena AppFooter adalah fungsi biasa, maka tidak memerlukan fungsi render (render adalah fungsi turunan dari class Component).

Jika Anda hanya memerlukan dummy component, tidak memerlukan state management, maka component fungsi cocok untuk digunakan.

Dengan berakhirnya modul ini, maka Tutorial React Dasar telah selesai. Semoga bermanfaat.