Cara install dan membuat project baru React Native dengan Expo

Setelah kenalan sama React native dan Expo ayo kita mulai install dan membuat project baru sampai running di HP kalian.

Baca juga : Kenalan dengan React Native dan Expo

Jadi sebenernya itu ada dua cara menurut kalau mau mendevelop aplikasi dengan React Native yaitu dengan Expo dan tanpa Expo. Nah kali ini aku akan bahas yang menggunakan Expo.

Menyiapkan development environment

Yang pertama tama kita harus menginstall beberapa package terlebih dahulu

✅ Menginstall Node.js

 Download dan Install Node.js sesuai dengan OS komputermu di link berikut 👉 Download Node.js(Download yang Recommended version)

Jika sudah diinstall bisa coba dipastikan dengan pada commandprompt/terminal

node -v
npm -v

Kalau keluar versinya berarti node.js sudah terinstall

✅ Menginstall Expo

Buka commandprompt/terminal kamu dan masukan ini :

npm install -g expo-cli

Membuat project baru

Setelah semua terinstall mari kita lanjut buat project barunya

1. Buka cmd/terminal kamu dan masuk ke folder tujuan

expo init ProjectMilyaran

2. Lalu kamu akan ditampilkan beberapa pilihan template

Pilih yang blank paling atas, tunggu sampai proses semua selesai.

3. Masuk ke folder projectmu

cd ProjectMilyaran

4. Jalankan development server

npm start
//atau
expo start

5. Akan keluar seperti ini pada browsermu

Menjalankan aplikasinya di HPmu

Kamu harus mendownload aplikasi Expo client terlebih dahulu

1. Download aplikasi Expo client

• 🤖 D ownload Expo client untuk Android

• 🍎 Download Expo client untuk IOS

2. Buka aplikasinya pada hpmu lalu pilih "Scan QR Code"

3. Scan QR Code yang ada di pojok kiri bawah pada browsermu tadi

4. Tampilan pada HPmu

🥳🥳🥳 Selamat Aplikasi pertamamu sudah running di HPmu

Menjalankan di Emulator Android/IOS

Kalau kamu tidak ada hp untuk digunakan kamu bisa pakai emulator, Sayangnya kalau kamu pakai Windows, kamu tidak bisa menjalankan emulator IOS. Xcode hanya bisa digunakan di MacOS

Aku akan menganggap kamu sudah ada Android studio atau Xcode, tapi jika belum bisa ikuti dokumentasi disini :

• Android Studio Emulator
• IOS Simulator

1. Jalankan Emulator Android/IOS

2. Pada browser yang tadi, klik "Run on Android device/emulator" untuk Android emulator atau "Run on iOS simulator" untuk IOS simulator

3. Tampilan emulator

🥳🥳🥳 Selamat Aplikasi pertamamu sudah running di emulatormu!

Mengedit project

Setelah kamu berhasil menjalankan aplikasinya di device mu, ayo kita coba ubah tulisan yang ada di tengah layar itu, dan ganti warna background..

1. Buka Code editor kamu (kalo aku pakainya VSCode), lalu buka folder projectmu yang baru saja kamu buat tadi

2. Buka file App.js

Coba kamu baca dulu, cari sampai ketemu yang mana yang harus diedit

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

3. Edit Filenya

Udah ketemu belum yang mana yang kamu harus edit? tau dong pastinya. Yapp betulll yang itu tuhh

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Project pertamaku menggunakan Expo</Text> {/* Ganti tulisan */}
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FEF200', // Ganti warna background
    alignItems: 'center',
    justifyContent: 'center',
  },
});

4. Hasilnya

🥳🥳🥳 Sudah selesai deh, Sekian dulu untuk intro di React native kali ini.

Kalau mau ngobrol atau nanya nanya bisa ke twitter di @kikiding. Terimakasih!