Belajar React Native – Props

Berjumpa lagi dalam seri Belajar React Native bersama daengweb.id. Setelah sebelumnya kita belajar bersama bagaimana cara menginstal dan konfigurasi react native. Pada kesempatan kali ini kita akan berkenalan dengan Props. Masih terdengar asing, apa itu props ? Sama, saya juga demikian. Maka, mari bersama-sama kita mencari tahu apa itu props dan bagaimana cara kerjanya.

Merujuk pada dokumentasi React Native tentang props, “Most components can be customized when they are created, with different parameters. These creation parameters are called props”. Maka dapat diambil kesimpulan bahwa props merupakan sebuah parameter yang digunakan dalam sebuah component.

Bekerja dengan Props

Sebagai contoh, salah satu basic component React native adalah Image. Saat kamu bekerja dengan gambar, kamu dapat menggunakan prop yang bernama source untuk mengontrol gambar apa yang akan ditampilkan.

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Wikipedia extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/5/53/Wikipedia-logo-en-big.png'
    };
    return (
      <Image source={pic} style={{width: 300, height: 300}}/>
    );
  }
}

AppRegistry.registerComponent('daengweb', () => Wikipedia);

Pastikan bahwa {pic} menggunakan kurung kurawal, yang bertujuan untuk menggunakan variable pic kedalam JSX. Ops, sebelum melangkah lebih lanjut, ada istilah baru yakni JSX. Apa itu JSX ? JSX adalah ekstensi sintaks seperti XML untuk ECMAScript tanpa ada definisi semantik tertentu. TIDAK dirancang untuk diimplementasi oleh engine atau browser. BUKAN sebuah proposal untuk menggabungkan JSX ke spesifikasi ECMAScript itu sendiri. Ditujukan untuk digunakan oleh berbagai preprocesor (transpiler) untuk mengubah token-token ini menjadi ECMAScript standar.

Nah, jika contoh diatas kita menggunakan basic component react native, maka yang selanjutnya kita akan membuat component sendiri. Dan component yang kamu buat juga dapat menggunakan props. Hal ini memungkinkan anda untuk membuat sebuah component yang dapat digunakan diberbagai tempat pada aplikasi anda, dengan value yang berbeda disetiap tempat. Perhatikan this.props pada render function dibawah ini :

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Negara extends Component {
  render() {
    return (
      <Text>Berkunjung ke {this.props.nama}!</Text>
    );
  }
}

export default class daftarNegara extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Negara nama='Indonesia'/>
        <Negara nama='Jepang'/>
        <Negara nama='Australia'/>
        <Negara nama='Amerika'/>
      </View>
    );
  }
}

AppRegistry.registerComponent('daengweb', () => daftarNegara);

dan jika kita jalankan pada emulator maka terlihat seperti ini :

Seperti yang kita lihat diatas, nama adalah props yang terdapat di component Negara yang memungkinkan kita untuk meng-custom dengan value berbeda, sehingga kita dapat menggunakan kembali props pada component tersebut. Pada contoh diatas kita juga menggunakan component Negara didalam JSX, sama seperti built-in components.

Hal lain yang dapat kita pelajari disini adalah component View. View berguna sebagai wadah untuk component lainnya, yang membantu mengontrol style dan layout. Untuk membantu memahami lebih mendalam lagi tentang props, silahkan diexplore lagi dengan kasus yang berbeda. Semoga bermanfaat.