Baik, mari kita lanjutkan ke **Ekosistem React**!

Ekosistem React mencakup berbagai

library dan alat bantu yang sering digunakan bersama React untuk memperluas
fungsionalitas, meningkatkan efisiensi pengembangan, dan memudahkan pengelolaan
aplikasi.

### Ekosistem React

React sendiri hanya berfokus pada pembangunan UI, tetapi dalam pengembangan
aplikasi, kita biasanya membutuhkan library tambahan untuk hal-hal seperti routing,
manajemen state, dan styling. Berikut adalah beberapa library yang sering digunakan
dalam ekosistem React.

#### 1. React Router: Routing dalam Aplikasi

**React Router** adalah library yang memungkinkan kita mengimplementasikan routing

di aplikasi React, sehingga aplikasi dapat memiliki beberapa halaman atau tampilan
berbeda. Library ini menyediakan komponen seperti `Route`, `Switch`, dan `Link` yang
membantu menentukan bagaimana dan kapan tampilan aplikasi berubah.

Contoh dasar penggunaan React Router:

```javascript

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

import Home from './pages/Home';

import About from './pages/About';

function App() {

return (

<Router>

<nav>

<Link to="/">Home</Link>

<Link to="/about">About</Link>

</nav>

<Switch>
 <Route path="/" exact component={Home} />

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

</Switch>

</Router>

);

export default App;

```

React Router memudahkan untuk mengelola rute dan transisi halaman di aplikasi React,
sehingga pengguna dapat menikmati pengalaman navigasi yang responsif dan tanpa
perlu memuat ulang halaman.

#### 2. Redux dan Context API: Manajemen State Global

Untuk aplikasi besar, **manajemen state global** menjadi penting karena sering kali
ada data yang perlu diakses oleh berbagai komponen di seluruh aplikasi. Berikut dua opsi
yang umum digunakan:

- **Redux**: Redux adalah library populer untuk manajemen state global, terutama
pada aplikasi yang kompleks. Redux menyediakan alur kerja yang lebih terstruktur
dengan konsep **store**, **actions**, dan **reducers**. Dengan Redux, kita bisa
memisahkan logika pengelolaan data dari tampilan UI dan mempermudah debugging.

Contoh alur kerja Redux:

- **Store** menyimpan state global.

- **Actions** adalah objek yang menggambarkan event (misalnya, menambahkan

item ke keranjang).

- **Reducers** adalah fungsi yang menentukan bagaimana state aplikasi berubah

berdasarkan action.

- **Context API**: Context API adalah fitur bawaan React yang memungkinkan kita
untuk membuat konteks dan menyediakan data ke berbagai komponen tanpa harus
melakukan “props drilling” (passing data melalui banyak lapisan komponen).
Contoh sederhana Context API:

```javascript

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {

const [theme, setTheme] = useState('light');

return (

<ThemeContext.Provider value={{ theme, setTheme }}>

{children}

</ThemeContext.Provider>

);

function Component() {

const { theme, setTheme } = useContext(ThemeContext);

return (

<div>

<p>Current theme: {theme}</p>

<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>

Toggle Theme

</button>

</div>

);

```
 Redux cocok untuk aplikasi yang sangat kompleks, sedangkan Context API lebih
sederhana dan lebih cocok untuk state yang tidak terlalu besar.

#### 3. Styling dalam React: Styled-Components, CSS Modules, dan Emotion

Menyusun styling dalam React bisa dilakukan dengan berbagai cara, tergantung pada
preferensi dan kebutuhan aplikasi:

- **CSS Modules**: CSS Modules menyediakan CSS scoped ke komponen tertentu. Hal
ini mencegah konflik nama class di seluruh aplikasi.

```css

/* Button.module.css */

.button {

background-color: blue;

color: white;

```

```javascript

import styles from './Button.module.css';

function Button() {

return <button className={styles.button}>Click me</button>;

```

- **Styled-Components**: Library ini memungkinkan penulisan styling langsung di dalam

komponen menggunakan JavaScript dengan pendekatan CSS-in-JS.

```javascript

import styled from 'styled-components';

 const Button = styled.button`

background-color: blue;

color: white;

padding: 10px;

border: none;

`;

function App() {

return <Button>Click me</Button>;

```

- **Emotion**: Library CSS-in-JS lain yang populer, menawarkan fungsionalitas mirip

dengan Styled-Components namun dengan fleksibilitas lebih banyak dalam hal
penggunaan dengan framework lain.

#### 4. Axios atau Fetch: Mengambil Data dari API

Untuk berkomunikasi dengan server atau API, **Axios** atau **Fetch API** biasanya
digunakan. Axios adalah library HTTP yang menyediakan fitur tambahan di atas Fetch,
seperti interceptors, penanganan error yang lebih baik, dan dukungan untuk request
berbentuk JSON.

Contoh menggunakan Axios:

```javascript

import axios from 'axios';

function fetchData() {

axios.get('https://jsonplaceholder.typicode.com/posts')

.then(response => console.log(response.data))

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

}

```

#### 5. Testing: Jest dan React Testing Library

Testing sangat penting dalam pengembangan aplikasi untuk memastikan bahwa setiap
komponen dan fungsionalitas bekerja seperti yang diharapkan.

- **Jest**: Framework testing yang disediakan secara default dalam proyek React yang
di-bootstrapped dengan Create React App. Jest memudahkan pengujian unit dan
snapshot testing.

- **React Testing Library**: Ini adalah pustaka testing yang dikembangkan khusus untuk
React, yang mendorong pengujian komponen berdasarkan cara pengguna berinteraksi
dengan UI.

Contoh dasar pengujian dengan React Testing Library:

```javascript

import { render, screen } from '@testing-library/react';

import userEvent from '@testing-library/user-event';

import App from './App';

test('menampilkan teks Hello World', () => {

render(<App />);

const textElement = screen.getByText(/Hello World/i);

expect(textElement).toBeInTheDocument();

});

test('klik tombol mengubah teks', () => {

render(<App />);

const button = screen.getByRole('button');

userEvent.click(button);

const textElement = screen.getByText(/Clicked/i);

 expect(textElement).toBeInTheDocument();

});

```

#### 6. Library Lain dalam Ekosistem

- **Formik dan Yup**: Untuk menangani formulir dan validasi data.

- **Framer Motion**: Untuk animasi yang halus dan kaya fitur.

- **React Query**: Untuk pengelolaan data server yang efisien dan caching otomatis.

- **Next.js**: Framework React untuk membuat aplikasi SSR (Server Side Rendering)
atau SSG (Static Site Generation) yang optimal untuk SEO.

---

Itulah berbagai library dan alat dalam ekosistem React yang sering digunakan. Masing-
masing memiliki fungsinya tersendiri dan memberikan berbagai keuntungan, tergantung
pada kebutuhan aplikasi yang Anda bangun. Jika ada bagian yang ingin digali lebih lanjut,
beri tahu saja!