### Penerapan Praktis dan Contoh Penggunaan

Di bawah ini adalah beberapa contoh implementasi praktis dari berbagai aspek dalam
aplikasi React, seperti manajemen state, routing, dan komunikasi dengan API.

#### 1. Membuat Komponen dan Mengelola State dengan useState

Mari kita buat contoh sederhana untuk menampilkan daftar tugas (to-do list) dengan
kemampuan menambah dan menghapus item. Kita akan menggunakan `useState` untuk
mengelola state dari daftar tugas ini.

```javascript

import React, { useState } from 'react';

function TodoApp() {

const [tasks, setTasks] = useState([]);

const [input, setInput] = useState('');

const addTask = () => {

setTasks([...tasks, { text: input, id: Date.now() }]);

setInput('');

};

const removeTask = (id) => {

setTasks(tasks.filter(task => task.id !== id));

};

return (

<div>

<h1>To-Do List</h1>

<input value={input} onChange={(e) => setInput(e.target.value)}

placeholder="New task" />
 <button onClick={addTask}>Add</button>

<ul>

{tasks.map(task => (

<li key={task.id}>

{task.text} <button onClick={() => removeTask(task.id)}>Remove</button>

</li>

))}

</ul>

</div>

);

export default TodoApp;

```

Di sini, kita membuat komponen `TodoApp` yang:

- Mengelola state daftar tugas (`tasks`) dan input pengguna (`input`) menggunakan
`useState`.

- Menambahkan item baru dengan `addTask()` dan menghapus item dengan

`removeTask()`.

#### 2. Routing dengan React Router

Misalnya kita ingin membuat aplikasi sederhana dengan beberapa halaman, seperti
"Home" dan "About". Kita dapat menggunakan **React Router** untuk menavigasi
antara halaman ini.

```javascript

import React from 'react';

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

function Home() {
 return <h2>Home Page</h2>;

function About() {

return <h2>About Page</h2>;

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;

```

Dalam kode ini:

- `Router` membungkus seluruh aplikasi untuk memberikan dukungan routing.

- `Link` digunakan untuk navigasi antar halaman.

- `Switch` dan `Route` menentukan rute spesifik dan halaman yang sesuai.
#### 3. Pengambilan Data dari API dengan useEffect

Kita akan mengambil data dari API menggunakan **Axios** di dalam komponen dan
menampilkan hasilnya menggunakan `useEffect`. Berikut adalah contohnya:

```javascript

import React, { useState, useEffect } from 'react';

import axios from 'axios';

function DataFetcher() {

const [data, setData] = useState([]);

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

useEffect(() => {

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

.then(response => {

setData(response.data);

setLoading(false);

})

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

}, []);

if (loading) return <p>Loading...</p>;

return (

<div>

<h1>Posts</h1>

<ul>

{data.map(post => (

<li key={post.id}>{post.title}</li>

))}
 </ul>

</div>

);

export default DataFetcher;

```

Di sini:

- `useEffect` memanggil API saat pertama kali komponen di-render.

- `data` disimpan di state dan ditampilkan sebagai daftar setelah data berhasil diambil.

#### 4. Menggunakan Context API untuk Manajemen State Global

Misalkan kita ingin membuat tema light dan dark untuk aplikasi yang dapat diakses oleh
berbagai komponen. Kita bisa melakukannya dengan **Context API**.

```javascript

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

const ThemeContext = createContext();

function ThemeProvider({ children }) {

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

const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

return (

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

{children}

</ThemeContext.Provider>

);
}

function ThemedComponent() {

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

return (

<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ?
'#000' : '#fff' }}>

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

<button onClick={toggleTheme}>Toggle Theme</button>

</div>

);

function App() {

return (

<ThemeProvider>

<ThemedComponent />

</ThemeProvider>

);

export default App;

```

Di sini:

- `ThemeProvider` adalah komponen penyedia konteks untuk state global `theme`.

- `ThemedComponent` menggunakan konteks ini untuk mengakses state tema dan

memungkinkannya untuk mengubah tema.
#### 5. Membuat Formulir dengan Validasi menggunakan Formik dan Yup

**Formik** dan **Yup** adalah library yang sangat membantu untuk menangani form
dan validasinya.

```javascript

import React from 'react';

import { useFormik } from 'formik';

import * as Yup from 'yup';

function SignupForm() {

const formik = useFormik({

initialValues: {

name: '',

email: '',

},

validationSchema: Yup.object({

name: Yup.string().required('Name is required'),

email: Yup.string().email('Invalid email format').required('Email is required'),

}),

onSubmit: values => {

console.log('Form data', values);

},

});

return (

<form onSubmit={formik.handleSubmit}>

<label>

Name:

<input type="text" {...formik.getFieldProps('name')} />

 {formik.touched.name && formik.errors.name ?
<div>{formik.errors.name}</div> : null}

</label>

<label>

Email:

<input type="email" {...formik.getFieldProps('email')} />

{formik.touched.email && formik.errors.email ?

<div>{formik.errors.email}</div> : null}

</label>

<button type="submit">Submit</button>

</form>

);

export default SignupForm;

```

Di sini:

- **Formik** mengatur state form, handling, dan validasi secara otomatis.

- **Yup** digunakan untuk membuat validasi schema, sehingga mudah ditambahkan

dan dikelola.

#### 6. Testing Komponen dengan React Testing Library

Menggunakan **React Testing Library** untuk memastikan komponen berfungsi seperti

yang diharapkan. Berikut adalah contoh pengujian sederhana.

```javascript

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

import TodoApp from './TodoApp';

test('menambahkan item ke dalam daftar tugas', () => {

 render(<TodoApp />);

const input = screen.getByPlaceholderText(/new task/i);

const button = screen.getByText(/add/i);

fireEvent.change(input, { target: { value: 'Learn Testing' } });

fireEvent.click(button);

expect(screen.getByText(/learn testing/i)).toBeInTheDocument();

});

```

Pada pengujian ini:

- Komponen `TodoApp` dirender.

- Menggunakan `fireEvent` untuk mensimulasikan interaksi pengguna dengan form input.

- Memastikan bahwa item baru muncul setelah tombol Add diklik.