---

🧑‍🏫 PEMBELAJARAN – REACT NATIVE STATE & HOOKS DASAR

Halo, anak-anakku yang hebat! 👋

Maaf hari ini saya tidak bisa hadir menemani kalian di kelas. Tapi jangan khawatir, saya sudah menyusun panduan belajar mandiri yang terarah untuk React Native (mobile).

Tugas kalian hari ini:
1️⃣ Memahami konsep State dan Hooks di React Native.
2️⃣ Membuat 1 Project Aplikasi Mobile (Counter + Timer).
3️⃣ Mendokumentasikan proses belajar dalam postingan blog dan mengirimkan link-nya ke kolom komentar di postingan ini.

---

🎯 TUJUAN PEMBELAJARAN

Setelah mengikuti pembelajaran ini, kalian diharapkan mampu:

• Menjelaskan fungsi useState dan useEffect dalam React Native.

• Mengelola data dinamis (state) pada komponen fungsional.

• Menangani efek samping (side effects) seperti timer dan interval di aplikasi mobile.

• Membangun aplikasi mobile sederhana dengan interaksi pengguna.

• Mendokumentasikan proses belajar secara tertulis.

---

📚 MATERI INTI

React Native menggunakan Hooks yang sama persis dengan React untuk web. Perbedaannya hanya pada komponen UI yang digunakan (menggunakan komponen native seperti View, Text, Button dari react-native) .

1. State Management dengan useState

State adalah data yang dapat berubah dan mempengaruhi tampilan komponen. Di React Native, kita menggunakan Hook useState dengan cara yang sama seperti di React .

Sintaks dasar:

jsx

const [nilai, setNilai] = useState(initialValue);

• nilai → state saat ini.

• setNilai → fungsi untuk mengubah state.

• initialValue → nilai awal.

Contoh penggunaan di React Native:

jsx

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.countText}>Count: {count}</Text>
      <Button title="Tambah" onPress={() => setCount(count + 1)} />
      <Button title="Kurang" onPress={() => setCount(count - 1)} />
      <Button title="Reset" onPress={() => setCount(0)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  countText: { fontSize: 24, marginBottom: 20 }
});

export default Counter;

Setiap kali setCount dipanggil, komponen akan di-render ulang dengan nilai state terbaru .

---

2. Efek Samping dengan useEffect

useEffect digunakan untuk menjalankan kode saat komponen di-render, di-update, atau dihapus dari layar. Cocok untuk:

• Mengambil data dari API.

• Mengatur interval/timer.

• Membersihkan resource (cleanup) .

Sintaks dasar:

jsx

useEffect(() => {
  // kode efek samping
  return () => {
    // kode cleanup (opsional)
  };
}, [dependencies]);

• [] kosong → efek dijalankan sekali saat komponen pertama kali tampil.

• [variabel] → efek dijalankan setiap kali variabel berubah.

• Tanpa array kedua → efek dijalankan setiap kali komponen di-render .

Contoh Timer di React Native:

jsx

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

const Timer = () => {
  const [detik, setDetik] = useState(0);
  const [berjalan, setBerjalan] = useState(false);

  useEffect(() => {
    let interval = null;
    if (berjalan) {
      interval = setInterval(() => {
        setDetik(prev => prev + 1);
      }, 1000);
    } else {
      clearInterval(interval);
    }
    return () => clearInterval(interval); // cleanup
  }, [berjalan]);

  return (
    <View style={styles.container}>
      <Text style={styles.timerText}>⏱️ {detik} detik</Text>
      <View style={styles.buttonRow}>
        <Button title="Mulai" onPress={() => setBerjalan(true)} />
        <Button title="Stop" onPress={() => setBerjalan(false)} />
        <Button title="Reset" onPress={() => setDetik(0)} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  timerText: { fontSize: 32, marginBottom: 20 },
  buttonRow: { flexDirection: 'row', gap: 10 }
});

export default Timer;

🔍 Catatan penting:
Cleanup function (return () => clearInterval(interval)) mencegah memory leak saat komponen di-unmount .

---

🧪 PERINTAH PRAKTIKUM (IKUTI STEP BY STEP)

🚀 Persiapan Project

Pilih salah satu cara berikut:

Opsi A: Menggunakan Expo (Direkomendasikan untuk pemula)

bash

npx create-expo-app CounterTimerApp
cd CounterTimerApp
npm start

Opsi B: Menggunakan React Native CLI

bash

npx @react-native-community/cli@latest init CounterTimerApp
cd CounterTimerApp
npm start

Untuk menjalankan di emulator:

bash

npm run android   # untuk Android
npm run ios       # untuk iOS

2. Buka folder project di VS Code atau editor favorit kalian.

---

📝 STEP 1: Membuat Komponen Counter (Gunakan useState)

• Buat file Counter.jsx di folder src atau di root project (sesuai struktur).

• Buat komponen dengan:

  • Tampilan angka (state count).

  • Tombol + dan – untuk mengubah count (gunakan Button dari react-native).

  • Tombol Reset untuk mengembalikan ke 0.

• Export dan import ke App.jsx, lalu tampilkan.

Boleh lihat cuplikan di materi inti sebagai referensi.

---

⏱️ STEP 2: Membuat Komponen Timer (Gunakan useEffect)

• Buat file Timer.jsx.

• Buat komponen dengan:

  • Tampilkan detik (state seconds).

  • Tombol Mulai, Stop, dan Reset.

  • Gunakan useEffect dan setInterval untuk update detik setiap 1 detik.

  • Jangan lupa cleanup interval!

• Export dan import ke App.jsx, tampilkan di bawah Counter.

---

🔗 STEP 3: Integrasi & Fitur Tambahan (Wajib)

Gabungkan Counter dan Timer dalam satu halaman dengan layout sederhana menggunakan View dan ScrollView.

Tambahkan minimal 1 fitur interaksi antar komponen, contoh:

• Saat counter mencapai 0 (nol), timer otomatis berhenti.

• Atau saat timer mencapai 10 detik, counter otomatis bertambah 1.

• Simpan state ke AsyncStorage agar tetap bertahan saat aplikasi ditutup.

💡 Pilih salah satu atau buat ide kalian sendiri yang menarik!

---

🎨 STEP 4: Styling (Opsional tapi nilai tambah)

Beri tampilan yang rapi. Kalian bisa pakai:

• StyleSheet dari React Native (cara standar).

• NativeWind (Tailwind untuk React Native) .

• Library UI seperti react-native-elements.

---

📝 STEP 5: Dokumentasi Blog (WAJIB)

Buat postingan blog di platform pilihan kalian, misalnya:

• Medium

• Dev.to

• Blog pribadi (WordPress, Blogger, dll.)

Isi blog minimal:

1. Judul menarik (contoh: "Belajar useState dan useEffect di React Native – Membuat Counter & Timer Mobile").

2. Penjelasan singkat tentang useState dan useEffect dengan bahasa kalian sendiri.

3. Cuplikan kode dari Counter dan Timer (jangan copy-paste semua, pilih bagian penting).

4. Screenshot tampilan aplikasi yang sudah jadi di emulator atau HP.

5. Kendala yang kalian hadapi dan bagaimana cara mengatasinya.

6. Kesimpulan – apa yang kalian pelajari hari ini.

---

📤 STEP 6: Submit

1. Copy URL blog kalian.

2. Tempelkan link tersebut di kolom komentar pada postingan ini.

3. Sertakan Nama dan Kelas di komentar.

---

📎 SUMBER BELAJAR PENDUKUNG

• 📹 Video penjelasan useState & useEffect di React Native:
  Cari di YouTube dengan kata kunci "React Native useState useEffect tutorial"

• 📖 Dokumentasi resmi React Native:
  https://reactnative.dev/docs/getting-started 

• 📖 Dokumentasi React Hooks:
  https://react.dev/learn/state-a-components-memory

• 🧩 Contoh state management di React Native:
  https://reactnative.dev/docs/state

• 🛠️ Panduan state management lanjutan (Zustand, Jotai, React Query) untuk yang sudah mahir:
  https://github.com/infometa/workbuddyskills/blob/main/skills/react-native-dev/references/state-management.md 

---

✅ KRITERIA PENILAIAN

Aspek yang Dinilai	Bobot
Kode berjalan tanpa error dan sesuai fitur	30%
Pemahaman konsep (terlihat dari blog & kode)	25%
Kreativitas fitur tambahan	15%
Kerapihan kode dan struktur project	10%
Dokumentasi blog (kelengkapan & kualitas)	20%

---

💬 PESAN :

Anak-anak, saya percaya kalian semua mampu menyelesaikan tugas ini dengan baik.
Jangan takut mencoba, jangan malu bertanya di grup diskusi.
Setiap error adalah bagian dari proses belajar.
Yang penting bukan hasil sempurna, tapi usaha dan pemahaman yang kalian dapat.

Semangat! Saya tunggu link blog kalian di kolom komentar. 🔥

---

Salam sukses,
Darsu.

Read More