Komponen Dasar React Native

 Hallo Sobat Koding dari artikel yang sebelumnya kita sudah membahas apa saja persiapan dan bagaimana cara untuk menginstall React Native. Sekarang, kita akan membahas apa saja komponen-komponen yang ada pada react native ter sebut. Ok langsung saja baca di bawah ini ya..

Props

Komponen-komponen di React Native sebagian besar bisa diciptakan dan dikustomisasi dengan parameter yang berbeda - beda. Parameter inilah yang disebut dengan Props. Props adalah salah satu alasan kenapa React Native bisa dibilang sangat keren. Daripada menunggu munculnya satu set UI primitif untuk keperluan yang berbeda-beda, maka dengan React Native, kamu hanya perlu menciptakan props baru. Props akan bertindak sebagai kanal komunikasi antara komponen-komponen, menurunkan data dari atas (parent) ke bawah (child). Artinya, props akan mengijinkan satu komponen digunakan di berbagai tempat, dengan properties yang berbeda-beda di masing-masing tempat.

State

Di React, ada dua tipe data yang mengontrol sebuah komponen: props dan state. Props diatur pada parent dan akan berlaku permanen selama masa hidup komponen. Sedangkan jika menginginkan data yang bisa berubah-ubah sesuai kondisi yang diprasyaratkan, kita bisa menggunakan state. Sederhananya begini, dengan props, kamu bisa membuat bermacam-macam jenis layar statis. Sedangkan dengan tambahan state, kamu bisa membuat layar statis tersebut berubah-ubah.

Style

Kamu tentu tidak menginginkan tampilan layar yang monoton. Maka, beberapa parameter yang bisa kamu kombinasikan adalah style, width, height, dan layout. Untuk membantu mengaturnya, kamu bisa menggunakan view component. Dengan React Native, kamu tidak perlu menggunakan bahasa khusus atau sintaks lain ketika mengatur style, melainkan menggunakan JavaScript. Hampir sama dengan bagaimana CSS bekerja untuk web, kecuali, ia ditulis berdasarkan aturan camelCasing, contohnya backgroundColor, bukan background-color. Halaman ini berisi daftar yang lengkap mengenai bagaimana mengatur style, khususnya teks.

Height dan Weight

Sesuai namanya, kedua atribut ini digunakan untuk mengatur ukuran komponen di sebuah layar. Secara garis besar dibedakan ke dalam 2 metode dengan hasil keluaran yang berbeda, yaitu:

• Fixed Dimension, yaitu menambahkan width dan height yang permanen. Artinya, cara ini menghasilkan komponen dengan ukuran yang akan selalu sama, mengabaikan dimensi layar.
• Flex Dimensions, yaitu parameter yang dinamis, memungkinkan komponen membesar atau mengecil berdasarkan ukuran yang tersedia. Flex akan memerintahkan sebuah komponen untuk mengisi tempat yang ada, sehingga ruang akan dibagi secara rata di antara masing-masing komponen dengan parent yang sama. Semakin besar flex, semakin tinggi rasio ruang yang akan diambil sebuah komponen.

Layout dengan Flexbox

Sebuah komponen bisa menspesifikasikan layout dari children mereka menggunakan algoritma flexbox. Algoritma ini didesain untuk menyediakan layout yang konsisten pada ukuran layar yang berbeda-beda. Untuk mendapatkan layout yang tepat, biasanya digunakan kombinasi dari:

• flexDirection: Dengan menambahkannya pada style komponen akan menentukan poros utama dari layout.
• justifyContent: Menentukan distribusi children sesuai dengan poros utama. Opsi yang tersedia adalah flex-start, center, flex-end, space-around, dan space-between.
• alignItems: Menentukan penderetan children berdasarkan poros sekunder. Opsi yang tersedia adalah flex-start, center, flex-end, dan stretch.

Kira-kira itulah basic dari layout. Daftar props selengkapnya untuk mengontrol layout bisa kamu temukan disini.

TextInput

TextInput adalah salah satu komponen dasar di React Native yang mengijinkan user untuk memasukkan teks. Sebuah cara untuk menangani input dari user. TextInput mungkin contoh yang paling sederhana dari komponen yang memiliki state yang bisa berubah-ubah setiap waktu. Ada banyak hal yang bisa kamu eksplor dari komponen ini. Contohnya memvalidasi secara otomatis teks yang diketikkan pengguna. Komponen ini memiliki prop onChangeText yang memerintahkan sebuah fungsi untuk dipanggil setiap kali teks berubah, dan sebuah prop onSubmitEditing yang memerintahkan sebuah fungsi untuk dipanggil ketika teks dikirim. Untuk contoh yang lebih komprehensif tentang pemanfaatan komponen ini bisa kamu dapatkan di halaman berikut.

ScrollView

ScrollView adalah salah satu jenis komponen yang biasanya digunakan untuk mengontrol layout. Kamu bisa menggunakan komponen ini untuk menambahkan kapabilitas scroll di layar, baik vertikal maupun horizontal. Ketika menggunakan komponen ini, semua elemen akan di render terlebih dahulu sekalipun belum ditampilkan di layar. Maka ScrollView lebih baik dipakai ketika menampilkan sedikit data. Sedangkan jika kamu memiliki lebih banyak data yang ingin ditampilkan di layar, gunakan ListView.

ListView

Komponen ini menampilkan sebuah scroll vertikal dari data yang berubah, tapi berstruktur sama. Dibanding ScrollView, ListView lebih efektif ketika digunakan untuk menampilkan banyak data, yang mungkin setiap item yang akan ditampilkan memiliki jumlah yang berbeda-beda. Terutama karena ListView hanya akan me-render elemen yang sedang aktif ditampilkan di layar saja dibandingkan me-render semua seperti ScrollView. Komponen ListView sendiri memerlukan dua props:

• dataSource adalah sumber informasi dari daftar yang akan ditampilkan.
• renderRow mengambil satu item dari sumber, kemudian mengembalikannya sebagai sebuah komponen yang sudah siap untuk di-render.

Networking

Apps seringkali perlu menampilkan resource yang tersimpan di remote URL. Misalnya salah satu penggunaan ListView yang umum adalah menampilkan data yang diambil dari server. Maka, untuk melakukan hal ini, kamu perlu mengerti mengenai konsep Networking. Mulai dari membuat request POST untuk sebuah REST API hingga mengambil sejumput konten statis dari server lain, beberapa metode yang digunakan antara lain:

• Fetch adalah salah satu API yang sudah disediakan React Native untuk keperluanmu di networking. Mirip dengan XMLHttpRequest atau API networking lain. Jika kamu perlu informasi tambahan tentang penggunaan Fetch, kami rekomendasikan panduan dari Mozilla Developer Network.
• Library lain seperti Frisbee atau Axios. Keduanya mungkin sekali untuk dipakai karena API XMLHttpRequest sudah terbangun di React Native.
• Websocket atau protocol yang menyediakan kanal komunikasi full-duplex melalui satu koneksi TCP.

Navigator

Apps jarang sekali terdiri dari satu layar. Ketika kamu mulai menambahkan layar kedua, dan seterusnya, kamu mulai dihadapkan pada soalan bagaimana pengguna akan menavigasi dari satu layar ke layar lain. Untuk mengatur transisi antar layar, kamu bisa menggunakan Navigator. React Native sudah menyediakan sejumlah komponen navigasi, tapi untuk app pertama, kami rekomendasikan Navigator. Komponen ini menyediakan sebuah implementasi JavaScript, sehingga ia bisa berfungsi di iOS dan Android. Transisi di dalamnya bisa berupa animasi dari samping ke samping atau popup vertikal.

Sekian, panduan ini kami rangkum dari dokumentasi React Native yang bisa kamu temukan disini. Sekarang kamu bisa mulai bereksperimen dengan React Native. Selamat mencoba.

sumber:

https://ar-ar.facebook.com/notes/refactory/bagian-2-komponen-komponen-dasar-react-native/399779300367866/