lifelong learner — urip iku urup, currently working on accenture.

React – component & props

0
Degananda.com -

Framework SPA saat ini menggunakan komponen yang kemudian disusun menjadi suatu aplikasi. Hal ini dikarenakan dengan membaginya berdasarkan komponen-komponen akan memberikan segudang keuntungan. Salah satunnya adalah reuseability dari komponen tersebut. Ulasan ini akan membahas bagaimana membuat komponen dengan menggunakan react

Komponen tersusun(salah satu penyusunnya) atas beberapa react element. Apliaksi yang dibangun React dan beberapa framework SPA(Single page application) merupakan component based. Dengan model seperti ini maka komponen dapat menjadi reuseable atau dapat kita gunakan kembali serta setiap dari komponen tersebut independen hal ini akan meningkatkan kemudahan dalam code maintenanche. Melalui komponen kita dapat membagi UI (user interfaces) yang kita miliki menjadi bagian-bagian tertentu sehingga mudah dalam pengelolaannya. Komponen pada react akan melakukan return react element. Inilah mengapa komponen tersusun dari element. Sehingga element pun dapat diambil dari suatu komponen karena komponen dan element sama-sama memiliki nilai berupa element (javascript plain object).

Pada react komponen didapatkan dari modul “component” yang berada pada package react.

import React , { Component } from 'react';

Untuk membuat komponen pada react kita akan menggunakan ES6 atau Ecmascript2015 yang memperkenalkan fitur mengenai class mengapa es6? karena dengan menggunakan class kode akan lebih mudah dibaca serta berbagai fitur-fitur lainnya yang tidak dimiliki oleh ecmascript sebelum versi 2015. Tidak ada salahnya menggunakan teknologi javascript terbaru terlebih react menggunakan babel untuk mentransformasi/konversi kode-kode ecmascript sehingga dapat digunakan pada kebanyakan browser.  Basically karena OOP (Object oriented programming). Berikut ini adalah kode untuk membuat komponen pada react

class App extends Component {

  // properties

  render() {
    

    return (
      // JSX
    );
  }

}

export default App;

Kode diatas akan menghasilkan komponen <nama-komponen).. Sedangkan properties sama halnya ketika kita mendefinisikan property dari class pada bahasa – bahasa lain. Variabel pada properties bersifat global dalam class tersebut(dapat diakses dari mana saja asalkan tetap berada pada class tersebut). Kita diharapkan menuliskan nama dari komponen dengan huruf pertama secara kapital yang mana menjadi standar penulisan dari nama sebuah Class. Class tersebut melakukan extends (inheritances) dari class Component yang didapatkan dari package react (yang sebelumnya telah kita import). Komponen tersebut akan dilakukan render sehingga dapat menuju ke Real DOM dari Virtual DOM.

Rendering component

React melakukan render terhadap elemen dan komponen dengan menggunakan fungsi reactDOM.Render. Bedannya jika yang kita render adalah komponen maka komponen tersebut akan disatukan pada element tertentu sehingga pada ahirnya yang terjadi adalah proses render element. Ilustrasinnya adalah dibawah ini

Misalnya kita memiliki komponen ini

class MyComponent extends Component {

  // properties

  render() {
    

    return (
    <h1>hello world</h1>
    );
  }

}

komponen diatas dapat direpresentasikan dengan MmyComponent>. Custom html syntax tersebut merupakan bagian dari element. Sehingga pada ahirnya react akan merender komponen tersebut sebagai bagian dari react element.

kita juga dapat menggabungkan beberapa komponen. Berikut ini adalah kode untuk membuat beberapa komponen yang dijadikan satu dalam satu file

import React , { Component } from 'react';
import './App.css';

class Header extends Component {

  render() {
    

    return (
      <h1> ini head </h1>
    );
  }

}

class Content extends Component {

  render() {
    

    return (
      <h1> ini Content </h1>
    );
  }

}



class App extends Component {

  render() {
    

    return (
      <div>
        <Header />
        <Content />
      </div>
    );
  }

}

export default App;

kode diatas akan menghasilkan seperti dibawah ini (pada browser).