Arsitektur dan Struktur Aplikasi React

1. Struktur Dasar Direktori dalam Aplikasi React

Umumnya, aplikasi React memiliki struktur folder yang digunakan sebagai berikut:

```

my-app/

├── public/

│ ├── index.html

│ └── favicon.ico

├── src/

│ ├── assets/ # Gambar, ikon, atau file statis lainnya

│ ├── components/ # Komponen UI individual

│ ├── hooks/ # Custom hooks

│ ├── pages/ # Halaman atau rute utama aplikasi

│ ├── services/ # Kode untuk API atau service eksternal

│ ├── context/ # Konteks global untuk manajemen state

│ ├── utils/ # Fungsi atau utilitas umum

│ ├── App.js # Komponen utama aplikasi

│ └── index.js # Titik masuk utama aplikasi

└── package.json

```

Penjelasan lebih lanjut:

- **public/**: Berisi file statis seperti `index.html` yang menjadi kerangka dasar aplikasi,
di mana root React (`<div id="root">`) disisipkan.

- **src/**: Menyimpan semua kode sumber aplikasi, yang berisi berbagai folder khusus
untuk komponen, halaman, hook, service, dan lainnya.
2. Struktur Komponen
Dalam React, **komponen** adalah inti dari arsitektur aplikasi, dan struktur serta
kategorisasi komponen memainkan peran penting dalam menjaga kode tetap rapi.

- **Komponen Presentasi dan Kontainer**:

- **Komponen Presentasi (Presentational Component)**: Bertanggung jawab untuk

tampilannya saja, tanpa logika bisnis.

- **Komponen Kontainer (Container Component)**: Mengatur logika bisnis, seperti

pemanggilan API, pengelolaan state, dan passing data ke komponen presentasi.

- **Penamaan Komponen**:

- Setiap komponen biasanya ditempatkan dalam direktori yang menggunakan nama

yang sama dengan komponen tersebut untuk memudahkan navigasi. Contoh:

```

components/

├── Header/

│ ├── Header.js

│ └── Header.css

└── Button/

├── Button.js

└── Button.css

```

3. Manajemen State
Pengelolaan state adalah aspek penting dalam arsitektur aplikasi React, terutama untuk
aplikasi yang kompleks.

- **State Lokal**: Menggunakan `useState` atau `useReducer` dalam komponen untuk

mengelola data spesifik komponen.

- **Context API**: Jika ada data yang perlu dibagikan di berbagai komponen, Context
API dapat digunakan. Biasanya diletakkan di `src/context/` untuk mengakses konteks dari
mana saja di dalam aplikasi.
- **Redux atau Library State Management Lain**: Untuk aplikasi besar dengan state
yang kompleks, Redux atau state management lain bisa digunakan. Pengaturan Redux
melibatkan `actions`, `reducers`, dan `store`, serta folder terpisah di dalam `src`.

4. Routing dalam Aplikasi

Dalam aplikasi yang memiliki beberapa halaman atau rute, **React Router** sering
digunakan. Struktur dasar untuk routing bisa terlihat seperti ini:

```javascript

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import HomePage from './pages/HomePage';

import AboutPage from './pages/AboutPage';

function App() {

return (

<Router>

<Switch>

<Route path="/" exact component={HomePage} />

<Route path="/about" component={AboutPage} />

</Switch>

</Router>

);

export default App;

```

Di sini:

- **Router** digunakan untuk membungkus seluruh aplikasi agar mendukung fitur

routing.

- **Switch** dan **Route** menentukan rute dan komponen mana yang harus dirender
pada setiap rute.
5. Struktur Folder untuk Utilitas, API, dan Hook
- **utils/**: Folder ini biasanya digunakan untuk fungsi atau helper yang bisa digunakan
kembali di seluruh aplikasi, seperti fungsi format tanggal atau validasi input.

- **services/**: Menyimpan file untuk API. Misalnya, file `api.js` yang berisi semua
pemanggilan API ke backend, memungkinkan manajemen dan pemeliharaan yang lebih
mudah.

```javascript

import axios from 'axios';

const API_URL = "https://example.com/api";

export const fetchData = async () => {

try {

const response = await axios.get(`${API_URL}/data`);

return response.data;

} catch (error) {

console.error("Error fetching data:", error);

throw error;

};

```

- **hooks/**: Menyimpan custom hooks. Custom hooks memungkinkan kita untuk

mengenkapsulasi logika reusable, seperti fetching data atau mengelola event listener.

```javascript

import { useState, useEffect } from 'react';

function useFetch(url) {
 const [data, setData] = useState(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

async function fetchData() {

const response = await fetch(url);

const data = await response.json();

setData(data);

setLoading(false);

fetchData();

}, [url]);

return { data, loading };

```

6. Best Practices untuk Struktur dan Arsitektur

- **Pisahkan Logika dan Presentasi**: Usahakan untuk memisahkan komponen
presentasional dan komponen yang memegang logika.

- **Atur Modul Berdasarkan Fungsi**: Alih-alih menumpuk semuanya di satu folder,

pisahkan file menurut fungsinya (komponen, halaman, konteks, dll.).

- **Gunakan Lazy Loading untuk Optimasi**: Dengan `React.lazy` dan `Suspense`, kita
bisa memuat komponen tertentu hanya saat dibutuhkan.