fbpx

Berkenalan dengan React Component

React component itu apa sih?

Membuat aplikasi menggunakan ReactJS pasti akan selalu berurusan dengan Component. Lalu Component itu apa? Component adalah potongan kode kecil yang dapat digunakan kembali (Reusable) yang bertujuan agar user interface terpisah menjadi bagian- bagian kecil dan di render menjadi sebuah kode HTML.

Ada 2 cara yang bisa digunakan untuk membuat component, tergantung dari fungsi component itu.

  • Functional Component

Functional component hanya bisa menggunakan props itu sebabnya function component disebut stateless component atau biasa digunakan juga sebagai UI Component (komponen yang menangani tampilan).

untuk membuat functional component, kita menggunakan arrow function. Berikut contoh coding lengkap dari Functional Component

import React from 'react';

const NamaComponent = () =>{
    return(
        <div style={{border: "1px solid black", width: 300, margin: 'auto'}}>
            <p>Ini Adalah Functional Component</p>
        </div>
    );
}

export default NamaComponent;
  • Class-based Component

Sedangkan Class component dapat menggunakan state dan props. Diawali dengan mendeklarasikan Class NamaComponent extends Component

Berikut coding lengkap penulisan Class-based Component

import React, { Component } from 'react';


class NamaComponent extends Component {
    state = {  }
    render() { 
        return ( 
        <div style={{border: "1px solid black", width: 300, margin: 'auto'}}>
            <p>Saya adalah class-based component</p>
        </div>
      );
    }
}
 
export default NamaComponent;