installasi React Native | React Native

installasi React Native

  Hallo sahabat koding Indonesia, pada tutorial sebelumnya kita telah membahas tentang installasiReact 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 :

 

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

class Greeting extends Component {

  render() {

    return (

      <Text>Hello {this.props.name}!</Text>

    );

  }

}

export default class LotsOfGreetings extends Component {

  render() {

    return (

      <View style={{alignItems: 'center'}}>

        <Greeting name='Rexxar' />

        <Greeting name='Jaina' />

        <Greeting name='Valeera' />

      </View>

    );

  }

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('propstate', () => LotsOfGreetings);

 

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:

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

-

- class Perkenalan extends Component {

-   render() {

-     return (

-       <Text>{this.props.name}{this.props.asal}</Text>

-     );

-   }

- }

-

- export default class LotsOfGreetings extends Component {

-   render() {

-     return (

-       <View>

-         <Perkenalan name='Rexxar' />

-         <Perkenalan asal='Bandung'/>

-         <Perkenalan name='Jaina' />

-         <Perkenalan asal='Surabaya'/>

-         <Perkenalan name='Valeera'/>

-         <Perkenalan asal='Jakarta'/>

-       </View>

-     );

-   }

- }

-

- // skip this line if using Create React Native App

- AppRegistry.registerComponent('propstate', () => LotsOfGreetings);

 

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:

 

import {

-   Text,

-   View,

-   TextInput,

-   AppRegistry

- } from 'react-native';

-

- export default class InputState extends Component {

-   

-   constructor()

-   {

-       super()

-       this.state = {

-           nama:'',

-       }

-   }

-   

-   render() {

-     return (

-       <View>

-         <TextInput

-             onChangeText={(text) => {this.setState({nama:text})}}

-         />

-         <Text>Saya adalah {this.state.nama}</Text>

-       </View>

-     );

-   }

- }

-

- // skip this line if using Create React Native App

- AppRegistry.registerComponent('propstate', () => InputState);

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: