Component di React yang Bikin Melongo

Judul di postingan ini sengaja dibuat demikian agar booming, haha. Tapi booming atau tidaknya suatu hal tentu dilihat dari kualitas, setuju ? :) . Baik kita bahas mengenai component.

Kalau teman-teman sudah tidak asing dengan proses templating, maka materi ini lebih cepat dipahami, kalau belum tahu, tenang saja mari kita simak. Component merupakan bagian dari library React yang akan sangat sering kita gunakan dalam proses development Front End. Dikatakan demikian, karena saat kita menggunakan React, kita akan memecah web app menjadi beberapa komponen yang re-usable. Misal, navbar bisa kita gunakan di hampir setiap halaman web kita. Lalu sidebar, bisa digunakan juga disetiap halaman kalau difungsikan sebagai halaman admin. Dan banyak contoh lainnya, tidak terbatas cakupan sebesar navbar maupun sidebar. Mungkin saja button group kita gunakan berulang, bisa saja.

Component sudah termasuk dalam aplikasi React saat kita menginstalnya. Oleh karena itu untuk dapat menggunakannya, cukup import dari package react itu sendiri, seperti berikut :

import {Component} from 'react'

Lalu buat class baru dan extends dari Component agar dapat dirender saat proses compiling. Bisa dengan arrow function (stateless component) maupun syntax ES5 biasa.

import React, { Component } from 'react';

class ComponentBaru extends Component {
    render() {
        return (
            <div>
            {/* Element dari Component */}
            </div>
        );
    }
}

export default ComponentBaru;

Sebagai catatan, component harus memiliki 1 element html parent agar bisa dirender, dalam contoh class di atas yakni tag div.

Lalu, bagaimana untuk dapat menggunakan di Component lain ? Jawabannya, dengan melakukan proses import sebagaimana kita mengimport sebelumnya, namun sourcenya harus berasal dari file baru kita. Jika struktur folder :

- app.js
- component
-- ComponentBaru.js

Dengan app.js adalah file parent, maka gunakan :
import ComponentBaru from './component/ComponentBaru'

Lalu gunakan tag <ComponentBaru /> di dalam script app.js. Untuk melakukan passing variable bagaimana ? Akan dibahas di topik lain.

Semoga bermanfaat.