[React Native] Understanding JSX, Style and Component

[React Native] Understanding JSX, Style and Component

Beberapa konsep dasar yang akan sering anda temui dalam pengembangan aplikasi dengan react native diantaranya adalah Component, JSX, Props dan State. Pastikan anda memahami hal tersebut agar tidak kesulitan dalam mengembangkan aplikasi dengan react native.

JSX dan Style

Dalam react native kita akan menampilkan sebuah screen/tampilan dengan menggunakan JSX. JSX sendiri menggunakan syntax XML yang dimasukkan ke dalam Javascript dari aplikasi react native. Berikut adalah contoh dari JSX :

       <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to {judul}!
        </Text>
        <Text style={styles.instructions}>
          Hola React Native Developer!
        </Text>
      </View>     

Code tersebut adalah potongan code JSX yang terdiri dari tag “View” dan tag “Text”.  Bagi anda yang sudah familiar dengan HTML besar kemungkinan mudah dalam memahami struktur penulisan code JSX. Pada JSX anda dapat menampilkan nilai suatu variabel atau fungsi dengan menambahkan tag kurung kurawal “{ }”. Penggunaan { } juga dapat digunakan untuk menyisipkan styles, contoh :

<View style={styles.container}>

Bagaimana pengaturan style pada react native?

Style digunakan untuk mengatur dan memperindah tampilan aplikasi anda. Dengan style anda dapat mengatur warna, font huruf, margin, dll. Style bisa langsung anda sisipkan dalam suatu tag control bisa juga anda definisikan secara terpisah dimana style yang telah didefinisikan tadi akan dipanggil langsung dari suatu control. Contoh style yang langsung disisipkan langsung adalah seperti berikut :

 <Image source={pic} style={{width: 193, height: 110}}/>

Sedangkan untuk membuat style yang terpisah dari component-nya, dapat dilakukan dengan menambahkan variabel styles di luar class Component seperti berikut :

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Variabel styles di atas dapat digunakan langsung pada component :

 <View style={styles.container}>

Code di atas menggunakan styles.container yang telah di definisikan pada variabel styles. Anda juga dapat menggunakan styles.welcome dan styles.instructions.

Component

Semua tampilan yang anda lihat pada aplikasi react native adalah kumpulan dari component. Dimana masing-masing component minimal harus memiliki sebuah fungsi yang me-render sebuah tampilan (menggunakan JSX). Berikut adalah contoh code sebuah aplikasi kecil yang mungkin bisa membantu anda untuk memahami strukturnya :

import React, { Component } from 'react'; //import React dari react
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  View
} from 'react-native';  // import beberapa class yang akan digunakan dalam program

// class myfirstApp meng-extends class Component.
export default class myfirstApp extends Component { 
  //fungsi render pada class myfirstApp, jika fungsi ini dipanggil
  //maka secara otomatis aplikasi akan memanggil fungsi render
  //untuk menampilkannya ke aplikasi
  render() {
    let judul='React Native'; //definisi sebuah variabel
    return (
      //ini adalah kumpulan JSX yang akan ditampilkan pada aplikasi
      <View style={styles.container}> // contoh penggunaan styles pada suatu control
        <Text style={styles.welcome}>
          Welcome to {judul}!  // contoh menampilkan sebuah variabel
        </Text>
        <Text style={styles.instructions}>
          Hola React Native Developer!
        </Text>
      </View>
    );
  }
}

//baris di bawah adalah kumpulan definisi styles yang dapat dipanggil
//dari class myfirstApp
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
//baris ini adalah yang pertama kali dieksekusi oleh aplikasi
//baris ini memanggil Component myfirstApp untuk ditampilkan
AppRegistry.registerComponent('myfirstApp', () => myfirstApp);

Catatan : Silahkan hapus code komentar dengan awalan “//” jika mengganggu.

Code tersebut akan menampilkan tampilan aplikasi seperti berikut :

screen-shot-2016-10-30-at-4-25-53-pm

React native memiliki banyak component untuk digunakan, silahkan explore pada website resmi react native.

Happy coding..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: