Tugas applikasi Alquran (tugas1)

Kerjakan tugas1 jalankan langkah2 sesuai petunjuk di bawah, jalankan dan foto hasilnya, foto hasil kirim ke eris@lembaharafah.com

Berikut adalah langkah-langkah untuk membuat aplikasi React Native sederhana yang menampilkan data dalam bentuk tabel dari REST API. Kita akan menggunakan library react-native-paper untuk komponen UI dan axios untuk mengambil data dari API.

Langkah 1: Inisialisasi Proyek React Native

npx react-native init SimpleDataTableApp
cd SimpleDataTableApp

Langkah 2: Instalasi Dependensi

Instal library yang diperlukan:

npm install react-native-paper axios

Langkah 3: Setup Komponen

Buat file App.js dengan kode berikut:

import React, { useEffect, useState } from "react";
import { View, StyleSheet } from "react-native";
import { DataTable, ActivityIndicator, Text } from "react-native-paper";
import axios from "axios";

const App = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  // Fetch data from API
  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts") // Ganti URL dengan API Anda
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
        setLoading(false);
      });
  }, []);

  return (
    <View style={styles.container}>
      {loading ? (
        <ActivityIndicator animating={true} size="large" />
      ) : (
        <DataTable>
          <DataTable.Header>
            <DataTable.Title>ID</DataTable.Title>
            <DataTable.Title>Title</DataTable.Title>
          </DataTable.Header>
          {data.slice(0, 10).map((item) => ( // Batasi data untuk contoh
            <DataTable.Row key={item.id}>
              <DataTable.Cell>{item.id}</DataTable.Cell>
              <DataTable.Cell>{item.title}</DataTable.Cell>
            </DataTable.Row>
          ))}
        </DataTable>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    justifyContent: "center",
    backgroundColor: "#f5f5f5",
  },
});

export default App;

Penjelasan Kode

1. Fetch Data: axios.get digunakan untuk mengambil data dari API.
2. State Management: Menggunakan useState untuk menyimpan data dan status loading.
3. Tabel Data: react-native-paper menyediakan komponen DataTable untuk menampilkan data secara terstruktur.
4. Error Handling: Terdapat penanganan error sederhana menggunakan catch.

Langkah 4: Jalankan Aplikasi

npx react-native run-android

atau

npx react-native run-ios

Hasil

Aplikasi akan menampilkan tabel dengan data dari API. Jika menggunakan URL API berbeda, sesuaikan key data sesuai struktur respons API Anda.

Jika ada pertanyaan atau kebutuhan lebih lanjut, beri tahu saya!