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

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

1. JSX
2. Props
3. State
4. 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

---