# Memahami Konsep JSX, Props, State, dan Hooks di React Native
---
## Pendahuluan
Dalam React Native, empat konsep dasar yang wajib dipahami untuk membangun aplikasi yang **interaktif dan dinamis** adalah:
1. JSX
2. Props
3. State
4. React Hooks
Keempatnya saling berkaitan dalam membentuk logika dan tampilan aplikasi mobile berbasis JavaScript.
---
## a. Konsep JSX di React Native
**JSX (JavaScript XML)** adalah ekstensi sintaks JavaScript yang memungkinkan kita menulis **struktur UI mirip HTML** langsung di dalam kode JavaScript. JSX membuat kode lebih mudah dibaca dan mendekatkan logika dengan tampilan.
### Contoh JSX
```
jsx
import React from "react";
import { View, Text } from "react-native";
const HelloJSX = () => {
return (
<View>
<Text>Halo, React Native dengan JSX!</Text>
</View>
);
};
export default HelloJSX;
Penjelasan
-
<View>
dan<Text>
di React Native mirip seperti<div>
dan<p>
pada HTML. - JSX harus memiliki satu elemen induk.
- JSX bukan HTML, tapi akan dikompilasi menjadi
React.createElement()
di belakang layar.
Kelebihan JSX
- Lebih mudah dipahami secara visual.
- Menggabungkan tampilan dan logika dalam satu file komponen.
b. Konsep Props di React Native
Props (Properties) digunakan untuk mengirim data dari komponen induk (parent) ke komponen anak (child).
Props bersifat read-only, artinya data yang diterima tidak dapat diubah oleh komponen penerima.
Contoh Props
jsx
import React from "react";
import { View, Text } from "react-native";
const Welcome = ({ nama }) => {
return (
<View>
<Text>Selamat datang, {nama}!</Text>
</View>
);
};
export default function App() {
return <Welcome nama="Andi" />;
}
Penjelasan
-
nama
adalah props yang dikirim dari komponenApp
ke komponenWelcome
. - Props bisa berisi teks, angka, objek, atau fungsi.
Kegunaan Props
- Mengirim data statis antar komponen.
- Membuat komponen menjadi reusable dan fleksibel.
c. Konsep State di React Native
State adalah cara React Native menyimpan data yang bisa berubah seiring waktu.
Saat state berubah, komponen akan rerender otomatis untuk memperbarui UI.
Contoh State
jsx
import React, { useState } from "react";
import { View, Text, Button } from "react-native";
const CounterApp = () => {
const [count, setCount] = useState(0);
return (
<View style={{ alignItems: "center", marginTop: 50 }}>
<Text style={{ fontSize: 20 }}>Jumlah: {count}</Text>
<Button title="Tambah" onPress={() => setCount(count + 1)} />
</View>
);
};
export default CounterApp;
Penjelasan
-
useState(0)
membuat state bernamacount
dengan nilai awal0
. -
setCount
digunakan untuk mengubah nilaicount
. - UI akan otomatis berubah saat
count
diperbarui.
Kegunaan State
- Menyimpan data yang dinamis (jumlah klik, status login, input pengguna, dsb).
- Mengontrol perilaku dan tampilan aplikasi secara langsung.
d. Konsep React Hooks
Hooks adalah fitur React yang memungkinkan penggunaan state dan lifecycle di dalam functional component tanpa menggunakan class.
Dengan Hooks, kode menjadi lebih ringkas dan mudah dikelola.
Beberapa Hook yang Sering Digunakan
Hook | Fungsi |
---|---|
useState() |
Menyimpan dan memperbarui state. |
useEffect() |
Menjalankan efek samping seperti fetch data atau timer. |
useContext() |
Mengakses data global dari Context API. |
useRef() |
Menyimpan referensi tanpa menyebabkan rerender. |
Contoh Penggunaan Hook (useEffect
)
jsx
import React, { useState, useEffect } from "react";
import { View, Text } from "react-native";
const TimerApp = () => {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
return () => clearInterval(timer); // cleanup ketika komponen dihapus
}, []);
return (
<View style={{ alignItems: "center", marginTop: 50 }}>
<Text>Waktu berjalan: {seconds} detik</Text>
</View>
);
};
export default TimerApp;
Penjelasan
-
useEffect
dijalankan setelah komponen dirender. - Berguna untuk efek samping seperti API call, timer, atau event listener.
- Mengembalikan fungsi cleanup agar performa tetap efisien.
Kesimpulan
Konsep | Fungsi Utama | Contoh Penggunaan |
---|---|---|
JSX | Menulis struktur UI di JavaScript | <Text>Halo Dunia</Text> |
Props | Mengirim data antar komponen | <Profile nama="Budi" /> |
State | Menyimpan data yang bisa berubah | useState(0) |
Hooks | Mengelola state & efek dalam komponen fungsional |
useEffect , useContext
|
Top comments (0)