React Native

Belajar React Native – Props

Belajar React Native – Props

1518 Dilihat

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.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Fitur Authentication React Native React Native

Fitur Authentication React Native

Apa jadinya apabila informasi yang bersifat pribadi dapat diakses secara publik yang bukan merupakan pemilik informasi tersebut? Maka dalam kondisi seperti ini, fitur authentication akan sangat dibutu...

Membuat Aplikasi Chatting React Native React Native

Membuat Aplikasi Chatting React Native

Pada case kali ini kita akan berinteraksi dengan database menggunakan Firebase dengan contoh kasus yakni membuat aplikasi chatting yang kita beri nama Whatsapp Clone.

React Native Navigation React Native

React Native Navigation

Salah satu hal yang penting untuk diketahui dalam membangun sebuah aplikasi mobile adalah navigasi, sebab dengan navigasi kita bisa berinteraksi antar satu component dengan component lainnya atau anta...

Komentar