Now Reading:

Bagian 2 React Native – Props dan State

Bagian 2 React Native – Props dan State

Hallo sahabat koding Indonesia, pada tutorial sebelumnya kita telah membahas tentang installasi React Native di sistem operasi windows. Pada tutorial kali ini kita akan membahas tentang Props dan State. Ditutorial ini kita akan merujuk dari docs atau documentation dari React Native sendiri yang berada di Link Berikut.

Sedikit informasi, pada dasarnya setiap bahasa pemrograman atau framework itu memiliki documentation. Jadi sebenarnya kita cukup belajar dari docs nya itu sudah cukup karena lumayan lengkap. Tetapi tidak menutup kemungkinan kita juga perlu belajar dari tutorial lain atau dari pengalaman seseorang, karena itu juga penting untuk menambah wawasan dan juga mengetahui problem solving. Oke langsung saja kita mulai.

PROPS

Jika kita merujuk pada docs react native maka props ini adalah sebagai berikut :

 

 

 

Jadi bisa dibilang bahwa props ini merupakan sebuah parameter default yang dimiliki oleh suatu komponen. Agar lebih memahaminya, yuk mari kita coba.

Step 1 : Membuat Project

Pertama yang harus kita lakukan adalah membuat project react native baru, langkahnya adalah sebagai berikut:

Buka command prompt atau terminal.

Pada command prompt arahkan ke folder dimana kita akan menginstall projectnya.

Install project dengan menuliskan perintah “react-native init NamaProject” pada Command Prompt. Lalu tunggu hingga proses install selesai. Untuk lebih jelasnya silahkan perhatikan gambar berikut:

 

Step 2 : Memodifikasi Project

Setelah membuat project baru dengan nama propstate selanjutnya buka text editor dan buka project yang telah kita buat. Pada tutorial ini saya menggunakan text editor Visual Studio Code.

Buka folder project “propstate” pada text editor.

Setelah itu Run atau jalankan program Android pada Emulator atau bisa juga langsung pada perangkat dengan perintah “react-native run-android”.

Bila tidak ada kesalahan maka akan muncul program default atau bawaan dari React Native: Wellcome to React Native, seperti gambar di bawah ini.

Selanjutnya modifikasi file index.android.js menjadi seperti di bawah ini :

Ganti semua syntax pada file index.android.js menjadi seperti di atas kemudian Run kembali projectnya maka tampilannya akan berubah menjadi seperti berikut:

Tampilan program di atas sesuai dengan yang terdapat pada docs dari react native

Penting :
Jangan lupa pada bagian
AppRegistry.registerComponent(‘propstate’, () => LotsOfGreetings);
‘propstate’  >>>>  ganti sesuai dengan nama project yang kita buat

Setelah itu coba modifikasi syntaxnya menjadi seperti di bawah ini:

Jika kita jalankan kembali programnya maka hasilnya akan menjadi seperti berikut:

 

STATE

Jika kita merujuk pada penjelasan dari documentation React Native maka penjelasannya adalah sebagai berikut :

 

 

 

 

 

Kurang lebih artinya adalah :

Ada dua jenis data yang mengendalikan suatu komponen: Props dan State. Props ditetapkan oleh parent dan mereka tetap sepanjang komponen aktif. Untuk data yang akan berubah-ubah, kita harus menggunakan state.

Secara umum, Anda harus menginisialisasi state di constructor dan kemudian memanggil setState saat Anda ingin mengubahnya.

Kesimpulan:
“Jadi, State bisa dibilang adalah variabel default yang dimiliki suatu component yang nilainya dapat diubah-ubah dan nilai pada state harus didefinisikan terlebih dahulu pada constructor suatu component”

Oke, langsung saja kita coba. Untuk percobaan State ini kita tidak perlu membuat project baru lagi, kita gunakan project “propstate” yang telah kita buat sebelumnya.

Jika kita tidak ingin merusak project sebelumnya maka saya sarankan syntax sebelumnya di index.android.js dipindahkan semua ke file baru sebagai dokumentasi belajar. Silahkan buat folder baru bernama Propstate kemudian di dalamnya buat file baru bernama props.js setelah itu pindahkan semua syntax di index.android.js pada file tersebut. Perhatikan gambar di bawah ini:

Jika telah dipindahkan maka selanjutnya ganti syntax pada index.android.js menjadi seperti berikut:

Setelah itu jalankan programnya maka hasilnya akan menjadi seperti berikut:

Jadi cara kerja dari program yang kita buat di atas adalah jika kita menuliskan sebuah nama pada TextInput maka hasilnya akan muncul di bawah sesuai dengan yang kita tuliskan.

Penjelasan:

Kurang lebih seperti itu penjelasannya, kurang lebihnya saya mohon maaf jika ada kesalahan dalam penjelasan. Jika ada Koreksi silahkan beri komentar di bawah. Semoga tutorial ini bermanfaat.

Kamu juga bisa ikut membantu orang lain untuk mudah belajar Mobile Apps dengan men-share tutorial ini. Happy koding 😀

 

Konten developer untuk Mobile Development yang sangat mencintai mobile programming
Share This Articles
  • Kevin Jeremia

    Sangat menarik. Saya sedang belajar React Native dan sangat membantu.
    Oh iya. Saya ada pertanyaan. Kalau state bisa simpan React Component atau Class tidak?

    NB : Ditunggu ya tutorial Navigation / Stack Navigator-nya hehe

  • #right

    Tutorialnya cukup membantu saya, saya ada beberapa kendala sebuah activity mengambil sebuah id dari activity laiinya. Misalkan saya punya list kabupaten, dan list kecamatan. Ketika kita onPress row dari listview kabupaten maka akan diarahkan ke listview kecamatan yang disesuaikan where id_kabupaten. api nya saya bangun dengan php mysql. Bagaimana kah cara mengambil id agar listview kecamatan sesuai kabupaten yg dipilih?