DEV Community: sandatya widhi

LATIHAN SOAL

sandatya widhi — Mon, 01 Dec 2025 07:10:04 +0000

Migrasikan Program React Native Berikut ke Redux

Pada latihan ini, kamu diminta memigrasi dua program (Counter dan ToDoApp) dari penggunaan state lokal (useState) menjadi menggunakan Redux.
Setiap contoh sudah diberikan kode awal sebelum Redux serta langkah migrasinya.

1️⃣ Program Counter (Versi Sebelum Redux)

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

export default function App() {
  // state lokal untuk counter
  const [value, setValue] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.counterText}>Counter: {value}</Text>

      <View style={styles.row}>
        <Button title="+" onPress={() => setValue((prev) => prev + 1)} />
        <View style={{ width: 12 }} />
        <Button title="-" onPress={() => setValue((prev) => prev - 1)} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
  counterText: { fontSize: 40, marginBottom: 20 },
  row: { flexDirection: "row" },
});

Langkah Migrasi ke Redux

Buat file counterReducer.jsx
Berisi reducer dengan action INCREMENT dan DECREMENT.
Buat store.jsx
Gunakan combineReducers() dan createStore().
Bungkus root app dengan Provider

   <Provider store={store}>...</Provider>

Hapus useState dari komponen Counter.
Ganti pembacaan value dengan:

   const value = useSelector(state => state.counter.value)

Ganti tombol plus/minus menjadi dispatch:

   dispatch({ type: "INCREMENT" })
   dispatch({ type: "DECREMENT" })

Tes aplikasi. Pastikan counter bekerja sama seperti sebelumnya.

2️⃣ Program ToDoApp (Versi Sebelum Redux)

import React, { useState } from "react";
import { View, TextInput, Button, Text, FlatList, TouchableOpacity, StyleSheet } from "react-native";

export default function TodoScreen() {
  const [text, setText] = useState("");
  const [todos, setTodos] = useState([]);

  const addTodo = () => {
    if (!text.trim()) return;
    const item = { id: Date.now().toString(), text };
    setTodos((prev) => [item, ...prev]);
    setText("");
  };

  const deleteTodo = (id) => {
    setTodos((prev) => prev.filter((t) => t.id !== id));
  };

  return (
    <View style={styles.container}>
      <TextInput placeholder="Tulis todo..." value={text} onChangeText={setText} style={styles.input} />
      <Button title="Tambah" onPress={addTodo} />

      <FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={{ flex: 1 }}>{item.text}</Text>
            <TouchableOpacity onPress={() => deleteTodo(item.id)}>
              <Text style={styles.delete}>Hapus</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 16, flex: 1 },
  input: { borderWidth: 1, padding: 8, marginBottom: 8 },
  item: { flexDirection: "row", alignItems: "center", paddingVertical: 8 },
  delete: { color: "red", marginLeft: 8 },
});

Langkah Migrasi ToDo ke Redux

Buat todoReducer.jsx Harus menangani:

ADD_TODO
DELETE_TODO

Buat store.jsx dan bungkus App dengan Provider.
Di TodoScreen:

Hapus state:

 const [todos, setTodos] = useState([])

Ganti dengan:

 const todos = useSelector(state => state.todo.todos)

Migrasi fungsi tambah todo:

   dispatch({
     type: "ADD_TODO",
     payload: { id: Date.now(), text }
   })

Migrasi fungsi hapus todo:

   dispatch({
     type: "DELETE_TODO",
     payload: { id }
   })

Tes aplikasi. Pastikan tambah & hapus todo bekerja seperti sebelumnya.

Mengenal React Redux

sandatya widhi — Sun, 30 Nov 2025 03:57:15 +0000

1. Apa Itu Redux?

Redux adalah tempat menyimpan data aplikasi secara global.
Jika aplikasi Anda hanya memiliki 1 atau 2 komponen, maka state biasa (useState) sudah cukup.
Tetapi dalam aplikasi besar, banyak komponen membutuhkan data yang sama, misalnya:

data user login
keranjang belanja
notifikasi
tema aplikasi
status online/offline

Redux membantu mengelola data global ini dengan rapi, konsisten, dan mudah dipakai di banyak halaman.

2. Mengapa Redux Diperlukan?

Contoh masalah tanpa Redux:

Anda punya screen Home.
Anda punya screen Cart.
Anda punya ProductCard yang tersebar di banyak tempat.

Jika user menambah barang ke keranjang di Home, bagaimana Cart tahu bahwa barang sudah bertambah?

Tanpa Redux, Anda akan melakukan "oper-oper props" yang panjang (props drilling).
Itu membuat aplikasi sulit dipelihara.

Dengan Redux:

Data disimpan di satu tempat (store)
Semua screen bisa membaca dan mengubah data tersebut
Tidak ada props drilling

3. Cara Kerja Redux

Redux memiliki 4 konsep dasar:

Store
Tempat menyimpan seluruh data global aplikasi.
Action
Perintah yang dikirim untuk mengubah state. Contoh: ADD_ITEM, REMOVE_ITEM.
Reducer
Fungsi yang memutuskan bagaimana state berubah ketika action dikirim.
Dispatch
Cara kita memanggil action ke reducer.

Skema sederhananya:

Komponen → dispatch(action) → reducer → store → komponen otomatis terupdate

4. Instalasi Redux Toolkit

Redux modern memakai Redux Toolkit karena lebih mudah dipakai.

Jalankan:

npm install @reduxjs/toolkit react-redux

React Redux menghubungkan Redux dengan React Native.

5. Studi Kasus: Aplikasi Keranjang Belanja Sederhana

Pada studi kasus ini kita membuat aplikasi yang memiliki dua halaman:

HomeScreen
Menampilkan daftar produk + tombol tambah ke keranjang.
Cart
Menampilkan semua item dalam keranjang.

Navigasi antar halaman memakai React Navigation.

6. Struktur Folder

Gunakan struktur berikut:

app/
 ├── App.jsx
 ├── MainApp.jsx
 ├── screens/
 │     ├── HomeScreen.jsx
 │     └── Cart.jsx
 ├── redux/
 │     ├── store.js
 │     └── cartSlice.js

7. Implementasi

File 1: App.jsx

Membungkus aplikasi dengan Provider agar Redux bisa digunakan di seluruh halaman.

import React from "react";
import { Provider } from "react-redux";
import { store } from "./redux/store";
import MainApp from "./MainApp";

export default function App() {
  return (
    <Provider store={store}>
      <MainApp />
    </Provider>
  );
}

File 2: MainApp.jsx

Mengatur navigasi HomeScreen dan Cart menggunakan React Navigation.

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import HomeScreen from "./screens/HomeScreen";
import Cart from "./screens/Cart";

const Stack = createStackNavigator();

export default function MainApp() {
  return (
 <NavigationIndependentTree>
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: "Daftar Produk" }} />
        <Stack.Screen name="Cart" component={Cart} options={{ title: "Keranjang Belanja" }} />
      </Stack.Navigator>
    </NavigationContainer>
 </NavigationIndependentTree>
  );
}

File 3: redux/store.js

Store Redux yang berisi seluruh state global.

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./cartSlice";

export const store = configureStore({
  reducer: {
    cart: cartReducer
  }
});

File 4: redux/cartSlice.js

Mengelola data keranjang: menambah dan menghapus item.

import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    items: []
  },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item !== action.payload);
    }
  }
});

export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;

File 5: screens/HomeScreen.jsx

Halaman utama, menampilkan produk dan tombol tambah ke Redux state.

import React from "react";
import { View, Text, Button } from "react-native";
import { useDispatch } from "react-redux";
import { addItem } from "../redux/cartSlice";

export default function HomeScreen({ navigation }) {
  const dispatch = useDispatch();

  const products = ["Headphone", "Handphone"];

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 22, marginBottom: 10 }}>Daftar Produk</Text>

      {products.map((p) => (
        <View key={p} style={{ marginBottom: 12 }}>
          <Text>{p}</Text>
          <Button
            title="Tambah ke Keranjang"
            onPress={() => dispatch(addItem(p))}
          />
        </View>
      ))}

      <Button
        title="Lihat Keranjang"
        onPress={() => navigation.navigate("Cart")}
      />
    </View>
  );
}

File 6: screens/Cart.jsx

Menampilkan isi keranjang yang disimpan di Redux.

import React from "react";
import { View, Text, Button } from "react-native";
import { useSelector, useDispatch } from "react-redux";
import { removeItem } from "../redux/cartSlice";

export default function Cart() {
  const items = useSelector((state) => state.cart.items);
  const dispatch = useDispatch();

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 22, marginBottom: 10 }}>Keranjang Belanja</Text>

      {items.length === 0 ? (
        <Text>Keranjang masih kosong</Text>
      ) : (
        items.map((item, index) => (
          <View key={index} style={{ marginBottom: 8 }}>
            <Text>{item}</Text>
            <Button
              title="Hapus"
              onPress={() => dispatch(removeItem(item))}
            />
          </View>
        ))
      )}
    </View>
  );
}

8. Penjelasan Alur Kerjanya

User berada di HomeScreen.
User menekan tombol “Tambah ke Keranjang”.
HomeScreen memanggil: dispatch(addItem("Headphone"))
Redux memasukkan item ke state global cart.items.
Ketika membuka halaman Cart: useSelector(state => state.cart.items) otomatis mengambil isi keranjang dari Redux.
Halaman Cart langsung menampilkan isi keranjang tanpa props.

Ini menunjukkan bagaimana Redux membuat data bisa dipakai banyak halaman secara konsisten.

9. Menjalankan Proyek

Instal semua dependency:

npm install @reduxjs/toolkit react-redux
npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

Jika memakai Expo:

expo install react-native-screens react-native-safe-area-context

Mengenal React Navigation di React Native

sandatya widhi — Fri, 21 Nov 2025 07:47:35 +0000

React Native digunakan untuk membuat aplikasi mobile berbasis JavaScript. Tetapi untuk membuat aplikasi yang memiliki banyak halaman, kita butuh navigator.
Di sinilah React Navigation sangat membantu.

Pada materi ini, kita akan belajar:

Apa itu React Navigation
Cara kerja React Navigation
Implementasi Stack Navigation
Implementasi Tab Navigation
Implementasi Drawer Navigation

1. Apa itu React Navigation?

React Navigation adalah library yang digunakan di React Native untuk:

Pindah antar halaman
Membuat navigasi berbasis tab
Membuat menu samping (drawer)
Mengatur header, parameter, dan state antar halaman

Library ini paling populer karena:

Mudah digunakan
Dokumentasi lengkap
Cocok untuk kebanyakan aplikasi mobile

2. Konsep Utama React Navigation

React Navigation terdiri dari beberapa navigator:

a) Stack Navigator

Navigasi bertumpuk seperti halaman pada browser.

Halaman baru ditaruh di atas stack
Ada fitur "Back"

b) Bottom Tab Navigator

Navigasi dalam bentuk bar di bawah aplikasi.

Biasanya untuk menu utama
Contoh: Home, Search, Profile

c) Drawer Navigator

Menu geser dari samping kiri.

Cocok untuk aplikasi dengan banyak menu
Contoh: aplikasi email, marketplace

Cara Kerja Umum

Install react-navigation dan dependensinya
Bungkus aplikasi dengan <NavigationContainer> (penggunaan NavigationContainer cukup pada satu file saja, jika lebih dari 2 file terdapat deklarasi <NavigationContainer> maka akan muncul error). Namun seandainya jika Anda mendeklarasikan <NavigationContainer> ini pada lebih dari 1 file maka <NavigationContainer> wajib dibungkus dengan NavigationIndependentTree
Buat navigator (stack/tab/drawer)
Daftarkan screen ke dalam navigator
Gunakan navigation.navigate("ScreenName") untuk pindah halaman

3. Instalasi React Navigation

Jalankan pada terminal:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

Install stack navigator:

npm install @react-navigation/stack

Install tab navigation:

npm install @react-navigation/bottom-tabs

Install drawer navigation:

npm install @react-navigation/drawer

4. Implementasi React Navigation

4.1 Stack Navigation (Pindah Antar Halaman)

App.jsx

import * as React from "react";
import { NavigationContainer, NavigationIndependentTree } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { View, Text, Button } from "react-native";

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Ini Halaman Home</Text>
      <Button title="Ke Detail" onPress={() => navigation.navigate("Detail")} />
    </View>
  );
}

function DetailScreen() {
  return (
    <View>
      <Text>Ini Halaman Detail</Text>
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationIndependentTree>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Detail" component={DetailScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </NavigationIndependentTree>
  );
}

4.2 Bottom Tab Navigation

App.jsx

import * as React from "react";
import { NavigationContainer, NavigationIndependentTree } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View, Text, Button } from "react-native";
import { IconSymbol } from "@/components/ui/icon-symbol";

/*sumber antdesain : https://icons.expo.fyi/Index*/
import AntDesign from "@expo/vector-icons/AntDesign";

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Ini Halaman Home</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View>
      <Text>Ini Halaman Profile</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationIndependentTree>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen
            name="Home"
            component={HomeScreen}
            options={{
              title: "Home",
              tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
            }}
          />
          <Tab.Screen
            name="Profile"
            component={ProfileScreen}
            options={{
              title: "Profile",
              tabBarIcon: ({ color }) => <AntDesign name="user" size={24} color="black" />,
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </NavigationIndependentTree>
  );
}

4.3 Drawer Navigation

App.jsx

import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationIndependentTree, NavigationContainer } from "@react-navigation/native";
import { View, Text, Button } from "react-native";

function HomeScreen() {
  return (
    <View>
      <Text>Ini Halaman Home</Text>
    </View>
  );
}
function SettingsScreen() {
  return (
    <View>
      <Text>Ini Halaman Setting</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationIndependentTree>
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name="Home" component={HomeScreen} />
          <Drawer.Screen name="Settings" component={SettingsScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
    </NavigationIndependentTree>
  );
}

06. Styling React Native Components

sandatya widhi — Mon, 27 Oct 2025 05:01:10 +0000

Pendahuluan

Saat membangun aplikasi mobile dengan React Native, tampilan antarmuka (UI) adalah hal yang sangat penting.
React Native menyediakan cara mudah untuk memberi gaya (styling) pada setiap komponen agar tampak menarik dan konsisten.

Pada materi ini, kita akan membahas:

Konsep Styling Components di React Native
Konsep Flexbox untuk Pengaturan Layout
Membuat Layout Berdasarkan Desain

A. Konsep Styling Components di React Native

React Native menggunakan sistem styling yang mirip dengan CSS, tetapi ditulis dalam bentuk JavaScript object.
Artinya, kita menuliskan gaya (style) langsung di dalam file .js atau .jsx.

Contoh sederhana:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Halo React Native!</Text>
      <Text style={styles.subtitle}>Styling membuat tampilan lebih menarik</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#333",
  },
  subtitle: {
    fontSize: 16,
    color: "gray",
  },
});

Penjelasan:

StyleSheet.create() digunakan untuk mendefinisikan kumpulan gaya.
Properti seperti fontSize, color, backgroundColor, margin, padding, dan lainnya mirip seperti di CSS.
Styling diterapkan ke komponen dengan menambahkan style={styles.namaStyle}.

B. Konsep Flexbox

React Native menggunakan Flexbox untuk mengatur posisi dan ukuran elemen pada layar.
Dengan Flexbox, kita bisa dengan mudah membuat tampilan responsif tanpa perlu menghitung posisi secara manual.

🔹 Properti Flexbox yang sering digunakan:

Properti	Fungsi
`flexDirection`	Mengatur arah elemen (`row` = horizontal, `column` = vertikal)
`justifyContent`	Mengatur posisi elemen secara vertikal/horizontal
`alignItems`	Mengatur posisi elemen secara sejajar melintang
`flex`	Mengatur seberapa besar ruang yang diambil oleh elemen
`gap`	Memberi jarak antar elemen (fitur baru React Native)

Contoh:

Menampilkan tiga kotak sejajar horizontal dengan jarak sama rata.

import React from "react";
import { View } from "react-native";

export default function App() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          width: 250,
        }}
      >
        <View style={{ width: 60, height: 60, backgroundColor: "red" }} />
        <View style={{ width: 60, height: 60, backgroundColor: "green" }} />
        <View style={{ width: 60, height: 60, backgroundColor: "blue" }} />
      </View>
    </View>
  );
}

Penjelasan:

flexDirection: "row" → menata elemen secara horizontal.
justifyContent: "space-between" → memberi jarak sama antar kotak.
alignItems: "center" → memposisikan elemen sejajar secara vertikal di tengah.

C. Membuat Layout Berdasarkan Desain di React Native

Ketika kita mendapatkan desain UI dari Figma atau XD, kita dapat menerjemahkannya menjadi layout React Native dengan memanfaatkan kombinasi View, Flexbox, dan StyleSheet.

Contoh Desain Sederhana:

Tampilan profil pengguna:

[ Foto Profil ]
Nama: Andi Pratama
Deskripsi: Mahasiswa Mobile Programming
[ Tombol Edit Profil ]

Implementasi Layout-nya:

import React from "react";
import { View, Text, Image, Button, StyleSheet } from "react-native";

export default function Profile() {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: "https://via.placeholder.com/100" }}
        style={styles.avatar}
      />
      <Text style={styles.name}>Andi Pratama</Text>
      <Text style={styles.description}>
        Mahasiswa Mobile Programming, semester 5
      </Text>
      <View style={styles.button}>
        <Button title="Edit Profil" color="#007AFF" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
    backgroundColor: "#fff",
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 20,
  },
  name: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  description: {
    textAlign: "center",
    color: "gray",
    marginVertical: 10,
  },
  button: {
    width: "60%",
    marginTop: 20,
  },
});

Penjelasan:

Image digunakan untuk menampilkan foto profil.
Text untuk menampilkan nama dan deskripsi.
View digunakan sebagai wadah untuk menyusun elemen-elemen di layar.
Button ditempatkan di dalam View agar mudah diatur lebarnya.
Semua elemen diberi style sesuai desain UI.

Kesimpulan

Konsep	Penjelasan Singkat
Styling Components	Mengatur tampilan komponen menggunakan `StyleSheet` (mirip CSS).
Flexbox	Mengatur posisi dan tata letak elemen dengan mudah dan responsif.
Layout Berdasarkan Desain	Menerjemahkan desain UI (misal dari Figma) ke dalam kode React Native.

Dengan menguasai styling dan layout, kamu dapat membuat tampilan aplikasi yang menarik, rapi, dan responsif di berbagai ukuran layar.

LATIHAN ANTARMUKA

sandatya widhi — Mon, 20 Oct 2025 11:09:05 +0000

Latihan 1: TextInput dan State

Soal

Buat aplikasi React Native yang memiliki:

Satu komponen TextInput untuk mengetik nama.
Menampilkan teks “Halo, [nama]!” secara otomatis ketika pengguna mengetik.

Contoh tampilan:

Latihan 2: ScrollView

Soal

Buat tampilan yang menampilkan 20 teks berbeda menggunakan ScrollView agar dapat di-scroll secara vertikal.

Hint: Gunakan perulangan array [...Array(20)].

Contoh tampilan:

Latihan 3: FlatList

Soal

Buat aplikasi yang menampilkan daftar produk menggunakan FlatList dengan data:

[
  { id: '1', nama: 'Laptop' },
  { id: '2', nama: 'Keyboard' },
  { id: '3', nama: 'Mouse' },
  { id: '4', nama: 'Monitor' }
]

Setiap item ditampilkan dalam Text dengan garis pemisah di bawahnya.

Contoh tampilan:

Latihan 4: Layout Flexbox

Soal

Buat layout sederhana yang menampilkan 3 kotak warna sejajar horizontal (baris) dengan jarak antar elemen sama rata.

Contoh tampilan:

Latihan 5 (Mini Project): Aplikasi Daftar Nama Mahasiswa

Soal

Buat aplikasi kecil yang memiliki fitur:

Aplikasi memiliki input teks (TextInput) untuk menulis nama mahasiswa.
Terdapat tombol "Tambah" yang berfungsi menambahkan nama ke daftar.
Daftar nama ditampilkan menggunakan FlatList.
Jika jumlah data lebih dari 10, daftar dapat di-scroll.
Gunakan Flexbox untuk mengatur tata letak antara komponen input dan tombol agar sejajar secara horizontal.
Gunakan View sebagai container utama dengan padding dan margin yang sesuai agar tampilan lebih rapi.

Contoh tampilan:

LATIHAN SOAL (jsx, props, state dan hooks)

sandatya widhi — Mon, 20 Oct 2025 10:41:08 +0000

Latihan Soal

Soal 1 – JSX

Buatlah komponen bernama WelcomeApp yang menampilkan teks:

Selamat datang di React Native!

Gunakan komponen <View> dan <Text>.

contoh output :

Soal 2 – Props

Buat komponen bernama ProfileCard yang menerima props:

nama
jurusan

Lalu tampilkan teks:

Nama: Dita
Jurusan: Bisnis Digital

contoh output :

Soal 3 – State

Buat aplikasi penghitung sederhana dengan tombol Tambah dan Reset.
Gunakan useState untuk menyimpan nilai hitungan.

contoh output :

Soal 4 – Hooks

Buat komponen bernama TimerApp yang menampilkan waktu berjalan (detik) menggunakan useEffect dan useState.

contoh output:

05. Mengenal Fungsi Dasar Interaksi dan Struktur Antarmuka di React Native

sandatya widhi — Mon, 20 Oct 2025 03:37:24 +0000

Pengenalan Fungsi Dasar Interaksi & Struktur Antarmuka di React Native

Pada materi kali ini, kita akan belajar cara membuat antarmuka dan interaksi dasar di React Native, meliputi:

Fungsi dasar interaksi React Native (TextInput, ScrollView, ListView)
Struktur pembangun antarmuka React Native
Membuat layout antarmuka sederhana

1. Fungsi Dasar Interaksi React Native

React Native menyediakan berbagai komponen bawaan untuk berinteraksi dengan pengguna.

Tiga komponen dasar yang paling sering digunakan adalah:

a. TextInput

Digunakan untuk menerima input teks dari pengguna, seperti form login, komentar, atau pencarian.

Contoh:

import React, { useState } from "react";
import { View, Text, TextInput } from "react-native";

export default function TextInputExample() {
  const [nama, setNama] = useState("");

  return (
    <View style={{ padding: 20 }}>
      <Text>Masukkan Nama Anda:</Text>
      <TextInput
        style={{
          borderWidth: 1,
          borderColor: "#ccc",
          borderRadius: 5,
          padding: 10,
          marginTop: 10,
        }}
        placeholder="Ketik di sini..."
        onChangeText={(text) => setNama(text)}
      />
      <Text style={{ marginTop: 10 }}>Halo, {nama}!</Text>
    </View>
  );
}

Penjelasan:

TextInput menerima teks dari pengguna.
onChangeText digunakan untuk menangkap nilai input.
useState menyimpan teks yang dimasukkan.

b. ScrollView

Digunakan untuk menggulung (scroll) tampilan secara vertikal atau horizontal.
Sangat berguna jika konten di layar cukup panjang.

Contoh:

import React from "react";
import { ScrollView, Text } from "react-native";

export default function ScrollViewExample() {
  return (
    <ScrollView style={{ padding: 20 }}>
      {[...Array(20)].map((_, i) => (
        <Text key={i} style={{ marginVertical: 10 }}>
          Ini item ke-{i + 1}
        </Text>
      ))}
    </ScrollView>
  );
}

Penjelasan:

ScrollView menampung elemen yang panjang.
Gunakan map() untuk menampilkan banyak teks dalam satu tampilan.

c. ListView (FlatList)

FlatList digunakan untuk menampilkan daftar data (list) secara efisien.
Ini adalah versi modern dari ListView.

Contoh:

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

const dataMahasiswa = [
  { id: "1", nama: "Dita" },
  { id: "2", nama: "Andi" },
  { id: "3", nama: "Rina" },
];

export default function FlatListExample() {
  return (
    <FlatList
      data={dataMahasiswa}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View
          style={{
            padding: 15,
            borderBottomWidth: 1,
            borderBottomColor: "#ddd",
          }}
        >
          <Text>{item.nama}</Text>
        </View>
      )}
    />
  );
}

Penjelasan:

data berisi array daftar data.
renderItem digunakan untuk menampilkan setiap item dalam daftar.
keyExtractor memberikan ID unik untuk setiap elemen.

2. Struktur Pembangun Antarmuka di React Native

Aplikasi React Native disusun menggunakan komponen.
Komponen-komponen ini bisa dibayangkan seperti “kepingan Lego” yang disusun menjadi satu tampilan.

Struktur dasarnya terdiri dari:

Komponen	Fungsi	Contoh
View	Wadah utama atau kontainer	`<View>...</View>`
Text	Menampilkan teks	`<Text>Halo Dunia</Text>`
Image	Menampilkan gambar	`<Image source={...} />`
Button	Tombol interaksi	`<Button title="Klik" />`
TextInput	Input teks dari pengguna	`<TextInput />`

Contoh struktur dasar:

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

export default function StrukturDasar() {
  return (
    <View style={{ padding: 20 }}>
      <Text>Halo, ini struktur antarmuka dasar React Native!</Text>
      <Button title="Klik Saya" onPress={() => alert("Tombol diklik!")} />
    </View>
  );
}

3. Membuat Layout Antarmuka Sederhana

Untuk mengatur tata letak antarmuka, React Native menggunakan sistem Flexbox — sama seperti di CSS.
Dengan Flexbox, kita bisa mengatur arah, posisi, dan ukuran elemen dengan mudah.

Contoh Layout Sederhana:

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

export default function LayoutSederhana() {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text>Header</Text>
      </View>
      <View style={styles.box2}>
        <Text>Konten Utama</Text>
      </View>
      <View style={styles.box3}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  box1: {
    flex: 1,
    backgroundColor: "#FFD700",
    justifyContent: "center",
    alignItems: "center",
  },
  box2: {
    flex: 3,
    backgroundColor: "#ADD8E6",
    justifyContent: "center",
    alignItems: "center",
  },
  box3: {
    flex: 1,
    backgroundColor: "#90EE90",
    justifyContent: "center",
    alignItems: "center",
  },
});

Penjelasan:

flex: 1 artinya ruang dibagi proporsional berdasarkan nilai flex.
justifyContent dan alignItems digunakan untuk mengatur posisi elemen.
StyleSheet.create() digunakan untuk membuat style terpisah agar kode rapi.

Kesimpulan

Konsep	Fungsi	Komponen
TextInput	Menerima input teks dari pengguna	`TextInput`
ScrollView	Menampilkan konten panjang yang bisa digulung	`ScrollView`
ListView / FlatList	Menampilkan daftar data secara efisien	`FlatList`
View, Text, Image	Penyusun utama antarmuka	-
Flexbox	Mengatur layout dan posisi elemen	`flex`, `justifyContent`, `alignItems`

TUGAS (komponen dasar)

sandatya widhi — Mon, 13 Oct 2025 11:44:46 +0000

Soal 1 – Functional & Class Component

Tugas:

Buat dua versi komponen yang menampilkan teks “Halo, Komponen Dasar!”, yaitu:

Versi Functional Component
Versi Class Component

Contoh output :

Soal 2 – Menggabungkan Komponen

Tugas:
Buat komponen Header dan Footer.
Lalu dalam komponen AppMain, render Header di atas, Footer di bawah, dan teks di tengah: “Selamat Datang!”.

Contoh Output :

Soal 3 – Props dalam Komponen

Tugas:
Buat komponen UserCard yang menerima props nama dan umur, lalu menampilkan:

Nama: [nama]
Umur: [umur] tahun

Gunakan UserCard dalam sebuah komponen utama (AppUser) dengan contoh data.

Contoh output :

Soal 4 – Komponen Dasar React Native

Tugas:
Gunakan komponen dasar React Native — seperti View, Text, Image, dan ScrollView — untuk membuat tampilan sederhana:

Header teks
Beberapa gambar dalam scroll vertikal
Footer teks kecil

Contoh output :

Soal 5 – Kombinasi (Functional + Props + Komponen Dasar)

Tugas:
Buat komponen Profile yang menampilkan:

Gambar profil menggunakan Image
Nama pengguna dan bio sebagai props

Susun agar tampil rapi (gambar + teks di atas atau samping).

Contoh output :

04. Pengenalan JSX, Props, State, dan Hooks di React Native

sandatya widhi — Sat, 11 Oct 2025 14:29:15 +0000

Pada materi kali ini, kita akan membahas empat konsep penting dalam React Native yang menjadi dasar dari semua aplikasi modern, yaitu:

JSX
Props
State
Hooks

1. Konsep JSX di React Native

Apa itu JSX?

JSX (JavaScript XML) adalah cara menulis kode React yang menggabungkan JavaScript dan HTML-like syntax.

Dengan JSX, kita bisa menulis tampilan (UI) seperti HTML, tetapi tetap menggunakan kekuatan logika JavaScript.

Contoh sederhana JSX:

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

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

Penjelasan:

<View> mirip seperti <div> di HTML — wadah utama elemen.
<Text> digunakan untuk menampilkan teks.
JSX harus dibungkus dalam satu elemen utama.

2. Konsep Props di React Native

Apa itu Props?

Props (Properties) adalah cara mengirim data dari komponen induk ke komponen anak.
Props bersifat immutable (tidak bisa diubah dari dalam komponen).

Contoh penggunaan Props:

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

function Greeting(props) {
  return (
    <View>
      <Text>Halo, {props.nama}!</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <Greeting nama="Dita" />
      <Greeting nama="Andi" />
    </View>
  );
}

Penjelasan:

Komponen Greeting menerima props.nama.
Nilai nama dikirim dari komponen App.
Output:

  Halo, Dita!
  Halo, Andi!

Props digunakan saat kita ingin membuat komponen yang dapat digunakan berulang kali dengan data berbeda.

3. Konsep State di React Native

Apa itu State?

State adalah data dinamis yang bisa berubah dari waktu ke waktu di dalam komponen.
Biasanya digunakan untuk menyimpan data yang bisa berubah karena interaksi pengguna.

Untuk menggunakan state, kita memakai Hook useState.

Contoh penggunaan State:

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

export default function CounterApp() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Jumlah klik: {count}</Text>
      <Button title="Tambah" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Penjelasan:

useState(0) artinya nilai awal count adalah 0.
Saat tombol ditekan, fungsi setCount() akan menambah nilai count sebanyak 1.
Komponen akan merender ulang setiap kali state berubah.

4. Konsep React Hooks di React Native

Apa itu Hooks?

Hooks adalah fitur pada React (dan React Native) yang memungkinkan kita menggunakan state dan fitur React lainnya tanpa menulis class component.

Beberapa Hooks yang sering digunakan:

useState() → untuk menyimpan data (state).
useEffect() → untuk menjalankan efek samping seperti memanggil API.
useRef() → untuk menyimpan referensi elemen.
useContext() → untuk berbagi data antar komponen.

Contoh penggunaan useEffect:

import React, { useState, useEffect } from "react";
import { View, Text } from "react-native";

export default function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <View>
      <Text>Waktu berjalan: {seconds} detik</Text>
    </View>
  );
}

Penjelasan:

useEffect dijalankan saat komponen pertama kali dimuat.
Setiap 1 detik, setSeconds menambah 1.
Saat komponen dihapus, timer dibersihkan.

Kesimpulan

Konsep	Fungsi Utama	Contoh
JSX	Menggabungkan tampilan (UI) dan logika JavaScript	`<Text>Halo!</Text>`
Props	Mengirim data dari komponen induk ke anak	`<Greeting nama="Andi" />`
State	Menyimpan data yang bisa berubah	`const [count, setCount] = useState(0)`
Hooks	Menambahkan fitur React ke function component	`useEffect`, `useState`

03. Struktur Folder React Native

sandatya widhi — Sun, 05 Oct 2025 15:41:27 +0000

📁 Memahami Struktur Folder Expo di React Native

🚀 Pendahuluan

Ketika kamu menjalankan perintah berikut:

npx create-expo-app MyApp

Expo akan otomatis membuat sebuah folder proyek bernama MyApp.
Di dalamnya terdapat berbagai folder dan file yang sudah diatur untuk memudahkan pengembangan aplikasi React Native.

Berikut contoh struktur folder yang terbentuk:

MyApp/
├── .expo/
├── .vscode/
├── app/
│   ├── (tabs)/
│   │   ├── _layout.tsx
│   │   ├── explore.tsx
│   │   ├── index.tsx
│   ├── _layout.tsx
│   ├── modal.tsx
├── assets/
│   └── images/
├── components/
│   ├── ui/
│   │   ├── external-link.tsx
│   │   ├── haptic-tab.tsx
│   │   ├── hello-wave.tsx
│   │   ├── parallax-scroll-view.tsx
│   │   ├── themed-text.tsx
│   │   ├── themed-view.tsx
├── constants/
│   ├── theme.ts
├── hooks/
│   ├── use-color-scheme.ts
│   ├── use-color-scheme.web.ts
│   ├── use-theme-color.ts
├── node_modules/
├── scripts/
│   ├── reset-project.js
├── .gitignore
├── app.json

🧩 Penjelasan Tiap Folder dan File

1. `.expo/`

Berisi:

Cache proyek
Metadata hasil build
File konfigurasi sementara (misalnya data login Expo Go)

⚠️ Catatan: Folder ini dibuat otomatis oleh Expo dan tidak perlu diubah secara manual.

2. `.vscode/`

Menyimpan pengaturan untuk Visual Studio Code, seperti:

Format kode otomatis (settings.json)
Ekstensi bawaan proyek

Tujuannya agar semua anggota tim memiliki pengaturan editor yang seragam.

3. `app/` 📱

Inti aplikasi yang berisi semua halaman (screen) dan komponen utama.

File penting di dalamnya:

_layout.tsx → Layout global aplikasi
index.tsx → Halaman utama (home screen)
modal.tsx → Halaman modal (pop-up)

Subfolder (tabs)/:
Berisi struktur navigasi tab aplikasi:

_layout.tsx → Layout khusus tab
explore.tsx → Halaman tab “Explore”
index.tsx → Halaman tab utama

4. `assets/images/` 🖼️

Tempat menyimpan file gambar, ikon, atau media lain.

assets/images/logo.png
assets/images/background.jpg

Contoh import di kode:

import logo from '../assets/images/logo.png';

5. `components/` ⚛️

Berisi komponen kustom yang digunakan berulang.

Contoh file:

hello-wave.tsx → Animasi sapaan
haptic-tab.tsx → Tab dengan efek getar
themed-text.tsx, themed-view.tsx → Mendukung tema terang/gelap

Subfolder ui/
Biasanya berisi elemen UI kecil seperti tombol atau link.

6. `constants/`

Berisi nilai tetap (konstanta) yang digunakan di seluruh aplikasi.

// constants/theme.ts
export const Colors = {
  light: "#ffffff",
  dark: "#000000",
};

7. `hooks/` 🔄

Berisi custom hooks — fungsi reusable dengan logika tertentu.

Contoh:

use-color-scheme.ts → Mendeteksi mode terang/gelap
use-theme-color.ts → Menentukan warna sesuai tema

Contoh penggunaan:

const theme = useThemeColor();

8. `node_modules/` 📦

Tempat semua dependensi npm disimpan.

⚠️ Jangan ubah folder ini secara manual.
Folder dibuat otomatis saat menjalankan npm install.

9. `scripts/`

Berisi skrip tambahan proyek.

// scripts/reset-project.js
// digunakan untuk menghapus cache dan reset konfigurasi Expo

10. `.gitignore`

Berisi daftar file dan folder yang tidak disertakan dalam Git.

node_modules/
.vscode/
.expo/

11. `app.json` ⚙️

File konfigurasi utama proyek Expo.

{
  "expo": {
    "name": "MyApp",
    "slug": "myapp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png"
  }
}

❓ Kenapa Folder `(tabs)` Menggunakan Tanda Kurung?

Expo (khususnya Expo Router) menggunakan tanda kurung ( ) untuk mengelompokkan routes tanpa memengaruhi URL.

Artinya:

Folder (tabs) tidak muncul di URL
Hanya berfungsi sebagai pengelompokan (grouping)

app/
├── (tabs)/
│   ├── index.tsx
│   ├── explore.tsx
│   ├── _layout.tsx
├── settings.tsx

Hasil URL:

File	URL
`index.tsx`	`/`
`explore.tsx`	`/explore`
`settings.tsx`	`/settings`

📘 Jadi, URL tidak akan menjadi /tabs/explore, karena (tabs) hanya untuk grouping.

🔄 Jika Tanpa Tanda Kurung

app/
├── tabs/
│   ├── index.tsx
│   ├── explore.tsx

Maka URL menjadi:

/tabs
/tabs/explore

📊 Perbandingan

Folder	Efek pada URL	Kegunaan
`(tabs)`	Tidak muncul di URL	Untuk grouping rute
`tabs`	Muncul di URL	Untuk membuat path sebenarnya

02. Instalasi, Konfigurasi Tools & Inisialisasi Project

sandatya widhi — Sat, 27 Sep 2025 05:18:17 +0000

Persiapan untuk Belajar React Native
Berikut adalah beberapa hal yang perlu disiapkan sebelum mulai belajar React Native:

Menginstal Node.js Hal pertama yang harus tersedia di komputer adalah Node.js. Node.js merupakan runtime yang memungkinkan eksekusi kode JavaScript di luar browser. Silahkan gunakan versi 18.20.6, berikut link download aplikasinya : https://nodejs.org/en/blog/release/v18.20.6 . CARI yang ekstensinya .msi Jika sudah terinstal maka selanjutnya pastikan Node.js terinstal dengan mengecek versinya dengan memasukkan perintah berikut di cmd

node -v

Menginstal Andorid Studio (Opsional)
Karena size aplikasi ini besar diperbolehkan untuk menginstal atau tidak.
Android studio ini nantinya akan digunakan untuk membuat emulator agar aplikasi bisa diview dalam tampilan mobile.
Menginstal React Native
Menggunakan Expo CLI (Mudah, tidak perlu Android Studio)
Jalankan perintah ini di Command Prompt (CMD) atau PowerShell:

npm install -g expo-cli

Jika perintah diatas berhasil dijalankan seharusnya muncul keterangan sebagai berikut :

npm WARN deprecated [email protected]: This version of npm is no longer supported.
npm WARN deprecated [email protected]: This version of npm is no longer supported.
npm WARN deprecated [email protected]: This version of npm is no longer supported.
+ [email protected]
added 150 packages from 95 contributors in 12.345s

Setelah itu, Anda dapat memverifikasi instalasi dengan menjalankan perintah expo --version untuk memastikan bahwa Expo CLI telah terpasang dengan benar di sistem Anda.

=====================================================
INISIALISASI PROJECT
Buat sebuah folder, pada contoh ini saya membuat folder dengan nama Kuliah kemudian buka folder tersebut pada VSCODE.

Setelah folder terbuka pada VSCODE, langkah selanjutnya adalah membuka terminal pada VSCODE kemudian jalan perintah berikut untuk membuat project react native

npx create-expo-app MyApp

Berikut adalah tampilan jika sudah berhasil menjalankan perintah diatas

setelah itu, jalan perintah cd MyApp untuk pindah direktori.

setelah pindah direktori jalankan perintah npm run web jika ingin aplikasi berjalan pada browser (tanpa HP)

Berikut tampilannya jika di run pada browser :

atau jalankan perintah npx expo start jika ingin menjalankan aplikasi pada HP milik kalian dengan cara Instal aplikasi Expo Go di HP Android/IOS kemduian Scan QR Code yang muncul di terminal menggunakan Expo Go.

DAFTAR EXTENSIONS YANG PERLU DI INSTAL PADA VS CODE

01. Pengenalan Version Control System (VCS), Git, dan GitHub

sandatya widhi — Tue, 23 Sep 2025 04:43:40 +0000

📌 Pengenalan Version Control System (VCS)

a. Pengertian VCS

Version Control System (VCS) adalah sebuah sistem yang digunakan untuk mencatat perubahan dari suatu file atau sekumpulan file dalam jangka waktu tertentu. Dengan VCS, kita bisa melihat riwayat perubahan, kembali ke versi sebelumnya, serta memudahkan kerja sama dalam pengembangan proyek.

b. Kegunaan VCS

Beberapa manfaat utama dari penggunaan VCS antara lain:

✅ Melacak perubahan pada kode atau dokumen.
✅ Memungkinkan rollback (kembali ke versi sebelumnya).
✅ Mempermudah kolaborasi antar tim developer.
✅ Mencegah konflik saat banyak orang mengedit file yang sama.
✅ Menyediakan backup terdistribusi.

ILUSTRASI TANPA VCS

c. Beberapa Software VCS

Ada berbagai software VCS yang populer, antara lain:

Git → paling banyak digunakan saat ini.
Subversion (SVN) → banyak digunakan di perusahaan lama.
Mercurial → ringan dan cepat.
Perforce → biasa digunakan untuk proyek besar (misalnya game development).

🔧 Git VCS

a. Pengenalan Git

Git adalah software Version Control System yang bersifat terdistribusi (distributed VCS), diciptakan oleh Linus Torvalds pada tahun 2005. Git memungkinkan setiap developer memiliki salinan penuh dari repository, sehingga tetap bisa bekerja meski tanpa koneksi internet.

b. Istilah Penting dalam Git

Berikut adalah beberapa istilah dasar yang sering digunakan dalam Git:

Repository (Repo) → wadah yang menyimpan seluruh file proyek beserta riwayat perubahannya.
Commit → snapshot perubahan yang disimpan ke dalam repository.
Branch → cabang pengembangan yang memungkinkan kita bekerja pada fitur atau perbaikan tanpa mengganggu branch utama.
Merge → proses menggabungkan perubahan dari satu branch ke branch lain.
Clone → menyalin repository dari remote server ke komputer lokal.
Pull → mengambil update terbaru dari remote repository.
Push → mengirim perubahan lokal ke remote repository.
Staging Area → area sementara untuk menyimpan perubahan sebelum di-commit.

🌐 GitHub

a. Pengenalan GitHub

GitHub adalah platform hosting berbasis web untuk repository Git. Dengan GitHub, developer dapat:

Menyimpan proyek secara online.
Berkolaborasi dengan tim melalui fitur pull request & issues.
Mengelola proyek dengan fitur project board.
Menggunakan GitHub Actions untuk automasi CI/CD.
Berkontribusi ke proyek open-source dengan mudah.

GitHub bukan hanya tempat menyimpan kode, tapi juga ekosistem kolaborasi bagi jutaan developer di seluruh dunia.

🤔 Kenapa Tidak Pakai Dropbox atau Google Drive?

Mungkin muncul pertanyaan: “Kenapa harus pakai Git/GitHub? Kenapa tidak pakai Dropbox atau Google Drive saja untuk simpan file proyek?”

Jawabannya adalah Dropbox/Google Drive hanya sekadar cloud storage, bukan Version Control System (VCS).

Berikut perbandingannya:

Fitur	Git/GitHub (VCS) ✅	Dropbox/Google Drive ❌
Menyimpan file	Ya	Ya
Melacak riwayat perubahan	Ya (bisa kembali ke versi lama dengan detail commit)	Terbatas, biasanya hanya versi terakhir
Kolaborasi antar developer	Sangat baik (branch, merge, pull request)	Tidak ada fitur branch/merge
Menangani konflik perubahan	Ada mekanisme merge & conflict resolution	Konflik sering menimpa file (misalnya file `doc(1).txt`)
Automasi & integrasi (CI/CD)	Bisa dengan GitHub Actions, GitLab CI, dsb.	Tidak ada
Open Source & kontribusi publik	Bisa (pull request, fork repo)	Tidak bisa

Jadi, walaupun Dropbox/Google Drive bisa untuk backup file, mereka tidak cocok untuk pengembangan software yang membutuhkan riwayat detail, kolaborasi, dan integrasi otomatis.

Kesimpulannya: gunakan Dropbox/Google Drive untuk arsip biasa, tapi gunakan Git/GitHub untuk pengembangan perangkat lunak profesional.

Kesimpulan:

VCS membantu mengelola perubahan kode dan mempermudah kolaborasi.
Git adalah VCS paling populer dengan sistem terdistribusi.
GitHub menyediakan platform online untuk hosting repository Git dan kerja sama developer.