Mengenal Component React Native
Pada artikel ini kita akan membahas mengenai konfigurasi React Native dan bagaimana cara membuat elemen-elemen sederhana pada React Native. React Native bekerja sangat mirip dengan React, mengimplementasikan JSX , state, dan props. Tentu saja, React Native dibangun di atas komponen Native, bukan elemen HTML. Oleh karena itu, jika Anda terbiasa dengan React biasa, akan mudah untuk mempelajari React Native, selama Anda dapat memahami berbagai komponen yang digunakan. Dalam panduan ini, kita akan melihat komponen Native dasar yang digunakan React Native.
Pada gambar diatas terdapat sebuah menu yang terdiri dari ViewGroup yang mana didalamnya ada gambar kucing merupakan ImageView dan tulisan Pouncival merupakan TextView. Berikut penjelasan mengenai komponen dari React Native :
View
View adalah component paling fundamental yang digunakan untuk membuat user interface. Layaknya div di dalam HTML. View digunakan untuk layouting pada aplikasi kita jika kita membuka file App.js maka kita akan melihat cara menggunakan View.
Contoh seperti gambar diatas, sebelum menggunakan component maka diwajibkan untuk import terlebih dahulu component tersebut. Pada gambar terdapat tiga import yaitu StyleSheet, View, dan Text. Penerapan dari StyleSheet sama dengan CSS jika menggunakan HTML.
2. Text
Text digunakan pada React Native untuk menampilkan text pada layar, juga memungkinkan untuk membuat berbagai varian style yang berbeda untuk teks yang berbeda.
Penjelasan: Pada component Text pertama kita mengatur style dengan menggunakan styles.welcome, mengaktifkan selectable dimana teks dapat di-select serta ketika teks ditekan maka akan menampilkan alert onpress.
3. Images
Images adalah komponen untuk menampilkan sebuah gambar. Untuk menggunakan component gambar wajib mencantumkan sumber image dan mengatur style width dan height agar dapat ditampilkan.
4. Button
Button merupakan component yang biasanya banyak digunakan sebuah aplikasi yang berinteraksi dengan user, misal tombol untuk menyimpan, berpindah halaman dan lain sebagainya. Namun untuk button ini sulit untuk di styling tampilan UI nya. Maka dari itu juga component Pressable menggantikan component button agar bisa di styling.
Penjelasan : apabila kita ingin menggunakan component Button maka jangan lupa terlebih dahulu import Button seperti penjelasan pada component View. Setelah itu tentukan Title dari Button dan onPress yang berguna untuk apabila Button di klik maka akan muncul alert “Simple Button Pressed”.
Penjelasan : Disini ada component Pressable yang menggunakan style “styles.btnBuy”, pada component ini juga terdapat onPress yang mana ketika btnBuy di klik maka akan keluar alert “thank you for buying” dan juga terdapat styling untuk btnBuy seperti padding, margin, dll.
Membuat Project React Native
Sebelum memulai membuat project dengan React Native, Maka lakukan konfigurasi React Native terlebih dahulu. Simak Video Konfigurasi React Native untuk pemula, jika sudah melakukan konfigurasi React Native bisa lanjut dengan tutorial di bawah ini:
- Buka Visual Studio Code, lalu klik Terminal → klik New Terminal.
- Selanjutnya, tentukan lokasi untuk penyimpanan proyek. Lalu buat folder baru dengan nama projectReactNative. Mari buat proyek React Native baru bernama AwesomeProject dengan menggunakan npx. Tunggu hingga proses instal selesai.
3. Setelah selesai, maka buka folder AwesomeProject yang ada di dalam folder projectReactNative. Buka file App.js, lalu salin code yang ada pada gambar dibawah ini:
4. Selanjutnya tambahkan Component Image, sebelum ditambahkan maka import terlebih dahulu Component Image dan import lokasi dari image tersebut. Seperti pada gambar dibawah ini :
Dan jangan lupa tambahkan style untuk image tersebut.
5. Selanjutnya, tambahkan Component Presable agar ada sebuah button atau tombol yang apabila di klik akan mengeluarkan sebuah Alert.
Lalu tambahkan style untuk Component Pressable, seperti pada gambar dibawah ini:
Dan hasilnya akan tampil seperti gambar dibawah ini :
Kesimpulan
Jadi, jika ingin menambahkan Component apapun seperti component Text, View, Button, Image, Pressable maka langkah pertama jangan lupa selalu import component terlebih dahulu.
Semua materi ini dapat kalian tonton selengkapnya dari Rizka Pramesti – Trainer Xsis Academy di channel youtube ETG atau klik link berikut ini https://youtu.be/08kPzr7WDSA?list=PLM8SBqh5uTPBSYR6ctWykcFBHxb0zmZC5
Sekian tutorial Cara Membuat Elemen Sederhana pada React Native, semoga bermanfaat. Untuk lebih jelas silahkan kunjungi Youtube Equine Technologies Group. Terimakasih sampai jumpa pada tutorial selanjutnya.
