Membuat Function Component React

Komponen React berupa fungsi (function component) adalah jenis komponen yang direkomendasikan di React. Sesuai dengan namanya, komponen ini dibuat berupa fungsi JavaScript/ES6 yang me-return elemen React (JSX).

CodeSandBox.io Online IDE memudahkan kita untuk mencoba jalankan kode React

Berikut contoh fungsi yang merupakan komponen react:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import React from "react"

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

export default function App() {
  return (
    <div className='App'>
      <Welcome name="Fulan"/>
    </div>
  )
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import React from "react"

const Welcome = props => <h1>Hello, {props.name}</h1>

export default function App() {
  return (
    <div className='App'>
      <Welcome name="Fulan"/>
    </div>
  )
}

Membuat Komponen React

Komponen React dapat dibuat dengan ketentuan umum sebagai berikut ini:

  1. Import library React
  2. Nama Fungsi diawali dengan huruf kapital
  3. Return value dari fungsi berupa JSX dengan satu child

Mari kita bahas masing-masing ketentuan di atas.

Library React Harus Berada di Dalam Scope

Dikarenakan JSX akan di-transform ke dalam bentuk javascript oleh compiler (babel). maka kita perlu mengikut sertakan library React di setiap scope atau cakupan kode yang menggunakan JSX. Sebagai contoh berikut ini komponen react yang valid:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import React from "react"

export default function App() {
  return (
    <div className='App'>
      <h1>Selamat Datang di Reactjs</h1>
      <p>Kita belajar membuat komponen</p>
    </div>
  )
}

Nama Fungsi Diawali dengan Huruf Kapital

Sebuah fungsi dengan nama yang diawali dengan huruf kapital dan me-return JSX disebut React function component, selanjutnya kita bisa menggunakan custom tag html dengan nama fungsi tersebut. Sedangkan nama fungsi biasa diawali dengan huruf kecil.

Berikut ini adalah contoh komponen React dan fungsi biasa:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import React from "react"

// Nama fungsi Komponen React diawali dengan huruf kapital
function Welcome(props) {
  // return berupa JSX
  return <h1>Selamat Datang</h1>
}

export default function App() {
  return (
    <div className='App'>
      <Welcome />
    </div>
  )
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import React from "react"

// Nama fungsi diawali dengan huruf kecil
function welcome(props) {
  // return berupa JSX
  return <h1>Selamat Datang</h1>
}

export default function App() {
  return <div className='App'>{ welcome() }</div>
}

Meski keduanya memiliki output yang sama namun cara penggunaan atau pemanggilan fungsi biasa berbeda dari fungsi yang menjadi komponen React.

Return Value Hanya Terdiri dari Satu Child

Sebuah fungsi tidak dianggap sebagai komponen React jika tidak menggunakan JSX atau method React.createElement(). Selain itu hanya boleh ada sebuah scope untuk JSX pada return-valuenya.

Berikut contoh dari penggunaan JSX dan method React.createElement():

1
2
3
4
5
6
7
8
9
import React from "react"

export default function App() {
  return (
    <div className='App'>
      <h1>Hello World</h1>
    </div>
  )
}
1
2
3
4
5
6
7
8
import React from 'react'

export default function App() {
  return (
    <h1>Hello</h1>
    <h2>How Are You ?</h2>
    )
}

Contoh diatas dapat diketahui bahwa penggunaan JSX lebih mudah daripada penggunaan React.createElement() dalam membuat komponen React.

Selain tiga hal di atas, kita juga perlu memperhatikan aturan Export Import Module ES6.

Object Props React Component

Sebuah fungsi komponen React yang valid bisa menerima satu argumen bernama props. Props berasal dari kata properties yang merupakan sebuah object. Dengan menggunakan props maka data dari sebuah komponen bisa ditransfer ke komponen lainnya. Ketentuan transfer data antar komponen ini adalah sebagai berikut:

Transfer Props Dari Parent ke Child Component

Pengiriman data dalam bentuk object props hanya berlaku dari parent komponen ke child komponennya. Tidak bisa dari komponen child ke komponen parent.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import React from "react"

// buat komponen Welcome
function Welcome(props) {
  // props.name berarti ada atribut name saat pemanggilan komponen
  return <h1>Hello, {props.name}</h1>
}

// Komponen App sebagai parent komponen bisa
// Memanggil komponen Welcome dengan atribut name
export default function App() {
  return (
    <div>
      <Welcome name='Fahru' />
      <Welcome name='Fulan' />
    </div>
  )
}

Props.children

props.children adalah props spesial yang tidak boleh dijadikan nama atribut, hal ini dikarenakan props.children mewakili dari isi JSX. Perhatikan contoh berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import React from "react"

function Welcome(props) {
  return <h1 className={props.className}>Hello, {props.name}</h1>
}

export default function App() {
  return (
    <div>
      <Welcome name='Fahru' className='title' />
      <Welcome name='Fulan' className='title' />
    </div>
  )
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import React from "react"

function Welcome(props) {
  return <h1 className={props.className}>{props.children}</h1>
}

// Children berarti isi dari komponen Welcome
export default function App() {
  return (
    <div>
      <Welcome className='title'>Ini adalah children</Welcome>
      <Welcome className='title'>Hello Fulan</Welcome>
    </div>
  )
}

Props Bisa Berisi Method (Fungsi)

Dikarenakan props adalah sebuah object, tentu saja method sebagai bagian dari object juga bisa ditransfer. Method yang ditransfer dan dipanggil di komponen child akan mempengaruhi komponen parent -nya.

Pada contoh di bawah ini, kita akan membuat alert berdasarkan data yang ada pada komponen parent-nya:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import React from "react"

const ButtonClick = (props) => {
  return <button onClick={props.clickMe}>Klik Saya</button>
}

export default function App() {
  const data = "This Button is Clicked"

  const clickButton = () => {
    alert(data)
  }

  return (
    <div>
      <ButtonClick clickMe={clickButton} />
    </div>
  )
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from "react"

// pada tambahan ini ada id unik pada tiap button
const ButtonClick = (props) => {
  return (
    <button id={props.id} onClick={props.clickMe}>
      Klik Saya
    </button>
  )
}

export default function App(){
  const data = "This Button is Clicked"

  const clickButton = (event) => {
    // dapatkan id dari tombol yang diklik
    let id = event.target.id
    alert(`${data}: ${id}`)
  }

  return (
    <div>
      <ButtonClick id='idSatu' clickMe={clickButton} />
      <ButtonClick id='idDua' clickMe={clickButton} />
    </div>
  )
}

Props Read-only

props Read-only berarti object props hanya bisa diakses propertinya dan tidak bisa diubah secara langsung nilai dari properti tersebut. Perubahan nilai props hanya boleh dilakukan melalui fungsi tertentu yang dinamakan React hook. Pembahasan mengenai React hook akan dijelaskan pada artikel lainnya.

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram