🚀 Praktikum React Native #1: Membuat Project Pertama dengan Expo

Belajar Mobile Programming dari Nol untuk Siswa SMK RPL

Selamat datang di praktikum pertama React Native. Pada pertemuan ini kita akan mempelajari cara membuat aplikasi mobile menggunakan React Native dengan bantuan Expo. Expo memudahkan kita menjalankan aplikasi tanpa harus melakukan konfigurasi yang rumit.

---

📱 Apa itu React Native?

React Native adalah framework JavaScript yang digunakan untuk membuat aplikasi mobile Android dan iOS menggunakan satu basis kode (single codebase).

Dengan React Native, kita cukup menulis satu kode JavaScript, kemudian aplikasi dapat berjalan di berbagai platform.

Keunggulan React Native

• ✅ Mudah dipelajari

• ✅ Menggunakan JavaScript

• ✅ Bisa membuat aplikasi Android & iOS

• ✅ Banyak digunakan oleh perusahaan

• ✅ Hot Reload (perubahan langsung terlihat)

---

🛠 Persiapan

Sebelum memulai praktikum, pastikan telah menginstal:

• Node.js (LTS)

• Visual Studio Code

• Expo Go (Android)

• Git (Opsional)

---

📂 Membuat Project Baru

Buka Terminal VS Code kemudian jalankan perintah berikut.

npx create-expo-app BelajarReactNative -t blank

Jika muncul pilihan SDK:

Latest (SDK xx) - Recommended for most projects

Pilih Latest kemudian tekan Enter.

Tunggu hingga proses selesai.

---

📁 Masuk ke Folder Project

cd BelajarReactNative

---

🚀 Menjalankan Project

Jalankan Expo.

npx expo start

atau

npm start

Jika berhasil akan muncul QR Code.

---

📲 Menjalankan di Android

Install aplikasi Expo Go dari Google Play Store.

Kemudian:

• Scan QR Code

• Tunggu proses loading

• Aplikasi akan tampil di smartphone

---

📁 Struktur Folder

Setelah project selesai dibuat, kita akan melihat struktur seperti berikut.

BelajarReactNative
│
├── assets
├── node_modules
├── App.js
├── index.js
├── package.json
└── app.json

File yang paling sering kita edit adalah:

App.js

---

Mengenal App.js

Secara sederhana isi App.js terdiri dari tiga bagian.

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello React Native</Text>
    </View>
  );
}

Penjelasan:

• import → mengambil komponen React Native.

• View → wadah seperti <div> pada HTML.

• Text → menampilkan tulisan.

• export default → komponen utama aplikasi.

---

Praktik Pertama

Ganti isi App.js menjadi berikut.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.subTitle}>
        Selamat datang di kelas Mobile Programming
      </Text>

      <Text style={styles.title}>
        Belajar bersama Darsu
      </Text>

      <Text style={styles.footer}>
        🚀 React Native + Expo
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({

  container:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#F5F7FA',
    padding:20
  },

  subTitle:{
    fontSize:18,
    color:'#666',
    textAlign:'center'
  },

  title:{
    fontSize:30,
    fontWeight:'bold',
    textAlign:'center',
    marginVertical:15
  },

  footer:{
    fontSize:18,
    color:'#1E88E5'
  }

});

Simpan file (Ctrl + S).

Perubahan akan langsung muncul di aplikasi (Fast Refresh).

---

Mengenal Komponen

View

Digunakan sebagai wadah komponen.

<View>

---

Text

Digunakan untuk menampilkan tulisan.

<Text>Hello</Text>

---

StyleSheet

Digunakan untuk mengatur tampilan.

StyleSheet.create({
   ...
})

---

Mengenal Flexbox

React Native menggunakan Flexbox untuk mengatur posisi komponen.

Contoh:

justifyContent:'center'
alignItems:'center'

Hasilnya seluruh komponen berada tepat di tengah layar.

---

Hasil Praktikum

Setelah praktikum selesai, tampilan aplikasi akan menampilkan:

• Judul di tengah layar.

• Teks sambutan.

• Tulisan "React Native + Expo".

• Background sederhana dan rapi.

---

Permasalahan yang Sering Muncul

1. npx tidak dikenali

Pastikan Node.js telah terinstal.

Cek:

node -v
npm -v

---

2. Expo Go tidak bisa membuka project

Solusi:

npx expo start --clear

Pastikan Expo Go yang digunakan sesuai dengan SDK project.

---

3. Metro Bundler Error

Hapus cache.

npx expo start -c

---

Tantangan Praktikum

Modifikasi aplikasi dengan kreativitas masing-masing.

Cobalah untuk:

• Mengubah warna latar belakang.

• Mengubah ukuran huruf.

• Menambahkan emoji.

• Mengganti tulisan sesuai identitas masing-masing.

• Menambahkan nama kelas.

Contoh:

Selamat Datang

Belajar React Native

XI RPL 1

SMKN 1 Banjar

---

Kesimpulan

Pada praktikum pertama ini kita telah mempelajari dasar-dasar pengembangan aplikasi menggunakan React Native dengan Expo. Kita mengenal struktur project, menjalankan aplikasi pertama, memahami fungsi View, Text, dan StyleSheet, serta melihat bagaimana perubahan kode dapat langsung tampil melalui fitur Fast Refresh. Penguasaan materi dasar ini menjadi fondasi sebelum melanjutkan ke materi berikutnya seperti penggunaan Button, TextInput, Image, useState, dan pembuatan aplikasi To Do List.

---

💻 Tugas Praktikum

1. Buat project React Native baru menggunakan Expo.

2. Jalankan aplikasi pada perangkat Android menggunakan Expo Go.

3. Ubah tampilan App.js sesuai kreativitas masing-masing.

4. Ambil screenshot hasil aplikasi yang telah dibuat.

5. Buat postingan di blog pribadi yang berisi:

   • Tujuan praktikum.

   • Langkah-langkah pembuatan project.

   • Potongan kode App.js.

   • Screenshot hasil aplikasi.

   • Kesimpulan.

6. Kirimkan link postingan blog pada kolom komentar postingan ini.

Selamat belajar dan teruslah bereksperimen! 🚀 Setiap aplikasi besar selalu dimulai dari proyek sederhana. Hari ini kita membuat aplikasi pertama, dan langkah kecil ini adalah awal perjalanan menjadi seorang Mobile Developer profesional.