React Native with Snack Expo

1. React Native

React Native adalah framework open-source yang dikembangkan oleh Meta (Facebook) untuk membangun aplikasi mobile multiplatform (Android dan iOS) menggunakan bahasa pemrograman JavaScript dan sintaks JSX (JavaScript XML).
Framework ini memungkinkan pengembang membuat aplikasi dengan antarmuka dan performa native, tetapi tetap menggunakan satu basis kode JavaScript.

React Native didasarkan pada konsep komponen React, yang juga digunakan dalam pengembangan web modern. Hal ini membuat pengembang web dapat dengan mudah beralih ke mobile development tanpa harus mempelajari bahasa native seperti Java/Kotlin (Android) atau Swift/Objective-C (iOS).

Selain JavaScript, React Native juga dapat menggunakan TypeScript (variasi JavaScript dengan dukungan tipe data statis) untuk menambah keamanan dan keterbacaan kode.

2. Snack Expo

Snack Expo adalah platform online berbasis web yang dikembangkan oleh Expo.dev (https://snack.expo.dev/) untuk menjalankan, mengedit, dan membagikan proyek React Native secara langsung dari browser tanpa instalasi tambahan seperti Android Studio atau Xcode.

Snack Expo juga menggunakan JavaScript dan JSX sebagai bahasa pemrograman utama, karena seluruh kode yang dijalankan di Snack Expo berbasis pada React Native ecosystem, sehingga melalui Snack Expo pengembang dapat:

• Menulis dan menjalankan kode React Native berbasis JavaScript/JSX langsung di browser
• Melihat hasil secara real-time melalui emulator web
• Menguji aplikasi di perangkat fisik menggunakan aplikasi Expo Go
• Berbagi proyek dengan mudah melalui tautan (URL)

3. Hubungan antara React Native dan Snack Expo

Snack Expo berfungsi sebagai lingkungan pengembangan React Native yang ringan dan mudah diakses. Jika React Native adalah framework utama untuk membangun aplikasi mobile, maka Snack Expo adalah alat bantu (development playground) untuk menulis, menguji, dan membagikan proyek React Native secara cepat dan tanpa konfigurasi rumit.

Keduanya menggunakan bahasa pemrograman yang sama yaitu JavaScript dan JSX, sehingga integrasi antara proyek React Native dan Snack Expo berlangsung tanpa hambatan.

4. Implementasi Snack Expo

• Klik Expo.dev dan disarankan untuk login dengan akun gmail yang dimiliki sebelum melanjutkan ke tahapan selanjutnya

• Pada file App.js ubah line 13 pada tag <Text dengan kalimat “happy red cake“
• Lalu ubah line 31 pada style fontSize menjadi ukuran 20

• Selanjutnya upload 1 foto ke dalam folder assets

• Pada file AssetExample.js yang berada pada folder components, ubah line 7 pada tag <Text dengan kalimat “Happy Red Cake is a delightful dessert that symbolizes joy and celebration, with its vibrant red color and soft, sweet flavor bringing happiness to every bite.“
• Lalu pada line 9 ubahlah alamat foto lama dengan alamat foto baru yang sudah berhasil di upload ke dalam folder assets

Menjalankan Snack Expo di perangkat fisik Android/iOS

• Install terlebih dahulu aplikasi Expo Go yang ada di Play Store atau App Store

• Selanjutnya disarankan untuk login dengan akun gmail yang sama seperti pada website Expo.dev, maka secara otomatis akan memunculkan program yang sedang dijalankan

• Output dari program yang dijalankan menggunakan perangkat fisik iOS

Modifikasilah hingga tampilan akhirnya menjadi seperti ini