Pengenalan React Native

React Native memungkinkan Anda membuat aplikasi seluler hanya menggunakan

JavaScript. Ini menggunakan desain yang sama dengan React, memungkinkan Anda

membuat UI seluler yang kaya dari komponen deklaratif. Dengan React Native, Anda

tidak membuat aplikasi web seluler, aplikasi HTML5, atau aplikasi hibrid; Anda

membuat aplikasi seluler nyata yang tidak dapat dibedakan dari aplikasi yang dibuat

menggunakan Objective-C atau Java. React Native menggunakan blok bangunan UI

dasar yang sama dengan aplikasi iOS dan Android biasa. Anda cukup menggabungkan

blok penyusun tersebut menggunakan JavaScript dan Bereaksi.

Apa itu React-Native?

React-Native adalah framework JavaScript untuk membuat aplikasi mobile yang dapat

digunakan diplatform seperti iOS atau Android. React-Native dikembangkan oleh

Facebook untuk membuat aplikasi miliknya. Tidak seperti aplikasi webview, hasil dari

framework React-Native ini nantinya berupa native code atau kode asli tiap platform.

Hal ini menyebabkan performa dari aplikasi React-Native tidak berbeda jauh dari

aplikasi native. berikut link menuju Dokumentasi

Aplikasi apa saja yang dibuat menggunakan React-Native?

1 | Muhammad Mahrus Zain, S.S.T., M.T.I.

Kenapa Menggunakan React Native

1. Cepat dalam mengambangkan aplikasi cross platform

2. Murah, karena hanya butuh 1 code untuk membuat dua platform

3. Mudah untuk mencari developer Dapat membuild ke berbagai jenis platform

Expo

Expo sendiri merupakan suatu set tools, library, dan services yang digunakan untuk

memudahkan kode React Native apps. Berikut beberapa keunggulan menggunakan

Expo.

● Expo menggunakan SDK Expo, jadi kita tidak membutuhkan Android Studio dan

Xcode.

● Pengaturan aplikasi lebih mudah, sehingga bisa langsung ditambahkan pada file

app.json.

2 | Muhammad Mahrus Zain, S.S.T., M.T.I.

 ● Mode debug aplikasi dapat dijalankan langsung di device dengan aplikasi Expo

pada Android dan iOS dengan membagikan link ataupun QR Code dari project

yang telah dibuat.

● Beberapa fitur yang sering digunakan seperti Push Notification dan Social Media

Authentication (facebook login) sudah disediakan oleh Expo.

● Beberapa library seperti maps, camera, dan gallery sudah di sediakan Expo

sehingga tidak perlu menambahkan library serta juga dapat berjalan pada

Android maupun iOS.

Langkah 1: Instal create-react-native-app

Setelah berhasil menginstal NodeJS dan NPM di sistem Anda, Anda dapat melanjutkan

dengan penginstalan create-react-native-app (secara global seperti yang ditunjukkan

di bawah).

C:\Users\Tutorialspoint> npm install -g create-react-native-app

Langkah 2: Buat proyek

Jelajahi folder yang diperlukan dan buat proyek reaksi asli baru seperti yang ditunjukkan di
bawah ini.

3 | Muhammad Mahrus Zain, S.S.T., M.T.I.

Setelah menjalankan perintah di atas, folder dengan nama yang ditentukan dibuat dengan
konten berikut.
Jika sudah berhasil

Berikut Struktur folder ketika sudah berhasil diinstall

4 | Muhammad Mahrus Zain, S.S.T., M.T.I.

Nama Folder/File Fungsi

assets untuk menyimpan file assets seperti

gambar, icon, video dll

components folder yang digunakan untuk menyimpan

komponen file dari projek.

App.js Default Komponen utama dalam project

React-Native

package.json List komponen library yang digunakan

dalam projek

Langkah 3: Install Expo

Pastikan Anda telah menginstal Expo didalam android ataupun IOS untuk melakukan

simulasi aplikasi

Nb : download aplikasi expo di playstore atau expo go di appstore.

Langkah 4: Jalankan Projek

Jalankan projek react native yang sudah terinstall didalam folder dengan cara menjalankan
perintah di cmd npm start . Jangan lupa pastikan sudah masuk kedalam folder projek
MyReactNative.

5 | Muhammad Mahrus Zain, S.S.T., M.T.I.

Langkah 4: Snack Expo
Karena release versi terbaru Expo sudah tidak meinlucdekan metro bundler untuk melakukan
simulasi secara live pada smartphone. Sebagai pilihan untuk simulasi nanti kita akan
menggunakan editor online dari expo yaitu https://snack.expo.dev/ . Snack expo adalah online
editor dari react native expo. Strukutr foldernya hampir sama dengan expo yang kita install pada
langkah sebelumnya.

1. Pastikan sudah mendaftar dan login pada snack expo.

2. Silahkan scan qr code untuk melakukan simulasi pada android (jika diperlukan). Hasil
akhir pada aplikasi berada disebelah kanan. Jadi kita tidak memerlukan avd untuk
melakukan simulasi aplikasi.

Langkah 4: Komponen UI React Native

Pada setiap percobaan komponen ubah code app.js
1. View
a. Buat file KomponenView.js di folder components
View terutama digunakan untuk style dan tata letak elemen. Mari kita lihat
beberapa styleyang bisa kita terapkan pada tampilan. Contoh di bawah berisi
dua View: tampilan luar yang menentukan perataan konten yang terkandung di
dalamnya, dan tampilan dalam yang menggambar kotak biru.

6 | Muhammad Mahrus Zain, S.S.T., M.T.I.

 2. Text
Textdigunakan untuk merender teks. Tidak seperti di web, teks harus dibungkus
dalam sebuah <Text>komponen.

3. Gambar

7 | Muhammad Mahrus Zain, S.S.T., M.T.I.

Imagedigunakan untuk merender gambar. Gambar dapat diunduh dari web, atau

diimpor sebagai file, yang kemudian gabungkan dengan aplikasi.

Untuk menggabungkan gambar di aplikasi, importfile gambar dengan url nya,

termasuk ekstensi file. Saat memuat gambar yang dibundel, gambar yang sama

digunakan untuk merender di iOS dan Android. Penulisan import './test.png'akan

memilih gambar yang paling sesuai untuk ukuran perangkat: test.png, test@2x.png,

atau test@3x.png.

4. Button

8 | Muhammad Mahrus Zain, S.S.T., M.T.I.

 5. ScrollView
ScrollView digunakan untuk konten yang dapat discroll.

9 | Muhammad Mahrus Zain, S.S.T., M.T.I.

 6. Fetch Data API

Untuk membuat reducer status request pada api kita buat file post.js. Didalam file tersebut kita
definisikan 3 status yaitu sukses,loading dan gagal request ke server backend.

10 | Muhammad Mahrus Zain, S.S.T., M.T.I.

11 | Muhammad Mahrus Zain, S.S.T., M.T.I.
12 | Muhammad Mahrus Zain, S.S.T., M.T.I.
13 | Muhammad Mahrus Zain, S.S.T., M.T.I.
14 | Muhammad Mahrus Zain, S.S.T., M.T.I.