DEV Community

sandatya widhi
sandatya widhi

Posted on

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

# 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;


Enter fullscreen mode Exit fullscreen mode

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" />;
}


Enter fullscreen mode Exit fullscreen mode

Penjelasan

  • nama adalah props yang dikirim dari komponen App ke komponen Welcome.
  • 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;


Enter fullscreen mode Exit fullscreen mode

Penjelasan

  • useState(0) membuat state bernama count dengan nilai awal 0.
  • setCount digunakan untuk mengubah nilai count.
  • 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;


Enter fullscreen mode Exit fullscreen mode

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)